/* ============================================================
   FULL-WIDTH BANNER — 1920×720
   Text fixed height above · Image always at same position
   ============================================================ */

.rk-banner{ width:100%; }

.rk-banner-wrapper{
  overflow:hidden;
  position:relative;
  line-height:0;
}

.rk-banner-track{
  display:flex;
  transition:transform 0.6s ease;
}

/* ── SLIDE ────────────────────────────────────────────────── */
.rk-banner-slide{
  flex:0 0 100%;
  width:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  line-height:0;
}

/* ── IMAGE — always at bottom, never shifts ──────────────── */
.rk-banner-link{
  display:block;
  width:100%;
  line-height:0;
  flex-shrink:0;
}
.rk-banner-slide img{
  width:100%;
  height:auto;
  display:block;
}

/* ── TEXT AREA — fixed height so image never moves ──────── */
.rk-banner-text{
  /* fixed height — image position stays locked regardless of text */
  height:110px;
  padding:0 60px;
  background:#fff;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  flex-shrink:0;
  box-sizing:border-box;
  overflow:hidden;
}

/* ── TITLE ───────────────────────────────────────────────── */
.rk-ov-title{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(22px, 2.5vw, 40px);
  font-weight:700;
  color:#1a2e1e;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin:0;
  line-height:1.2;
  /* clamp to 1 line to stay within fixed height */
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── SUBTITLE ────────────────────────────────────────────── */
.rk-ov-sub{
  font-family:'DM Sans', sans-serif;
  font-size:clamp(12px, 1.1vw, 15px);
  color:#666;
  letter-spacing:0.3px;
  margin:0;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── DOTS ─────────────────────────────────────────────────── */
.rk-dots{
  position:absolute;
  bottom:14px;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:7px;
  z-index:10;
}
.rk-dots span{
  width:9px; height:9px;
  background:rgba(255,255,255,0.45);
  border-radius:50%;
  cursor:pointer;
  display:inline-block;
  transition:background 0.3s, width 0.3s, border-radius 0.3s;
}
.rk-dots .active{
  background:#fff;
  width:26px;
  border-radius:5px;
}

/* ── TABLET (481–768px) ───────────────────────────────────── */
@media(min-width:481px) and (max-width:768px){
  .rk-banner-text{
    height:90px;
    padding:0 32px;
  }
}

/* ── MOBILE (≤480px) ──────────────────────────────────────── */
@media(max-width:480px){
  .rk-banner-text{
    height:80px;
    padding:0 18px;
    gap:4px;
  }
  .rk-dots{ bottom:8px; }
}