/* ==========================================================================
   Rota Mekke — sub-page components
   ========================================================================== */

/* Services rows */
.srows { border-top: 1px solid var(--line); }
.srow { display: grid; grid-template-columns: 70px 64px 1fr 1.2fr auto; gap: 24px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease), background .4s; }
.srow:hover { padding-inline: 20px; background: rgba(201, 164, 92, .1); }
.srow__n { font: 400 13px/1 var(--mono); color: var(--muted); }
.srow__ic { width: 44px; height: 44px; color: var(--gold-ink); }
.srow p { color: var(--muted); }
.srow__tag { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* Split image + copy */
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.arch--tall { aspect-ratio: 3 / 4; }
.split .lead { margin-top: 24px; }
.ticks { list-style: none; margin: 32px 0 36px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ticks li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.ticks li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }

/* Process timeline */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: calc(180px + 32px); top: 10px; bottom: 10px; width: 1px; background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 12px); opacity: .35; }
.tl__step { display: grid; grid-template-columns: 180px 64px 1fr; gap: 0; align-items: start; padding: 0 0 72px; }
.tl__step:last-child { padding-bottom: 0; }
.tl__when { padding-top: 20px; font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tl__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--gold-2); }
.tl__dot svg { width: 28px; height: 28px; }
.tl__step:nth-child(3) .tl__dot { background: var(--gold); color: var(--night); }
.tl__body { padding: 8px 0 0 40px; max-width: 640px; }
.tl__body small { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--gold-ink); text-transform: uppercase; }
.tl__body .h3 { margin-top: 12px; font-size: clamp(34px, 3.6vw, 56px); }
.tl__body p { margin-top: 12px; font-size: 17px; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }

/* Room cards */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.room { position: relative; display: flex; flex-direction: column; min-height: 560px; padding: 32px; border-radius: 28px; background: #fbf8f1; border: 1px solid var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.room:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(23, 20, 15, .45); }
.room::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--pattern) 0 0 / 60px; opacity: .14; }
.room--hot { background: var(--night); color: var(--sand); border-color: transparent; }
.room__tag { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--gold-2); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.room--hot .room__tag { background: var(--gold); color: var(--night); }
.room__n { position: absolute; right: 32px; top: 32px; font: 400 13px/1 var(--mono); color: var(--muted); }
.room .h3 { margin-top: 64px; }
.room__price { display: flex; align-items: flex-start; flex-wrap: wrap; margin-top: 16px; }
.room__price b { font: 400 clamp(88px, 9vw, 140px)/.8 var(--serif); letter-spacing: -.05em; font-weight: 400; }
.room__price sup { font: 400 32px/1 var(--serif); margin: 6px 0 0 4px; color: var(--gold-ink); }
.room--hot .room__price sup { color: var(--gold); }
.room__price small { flex-basis: 100%; margin-top: 12px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.room ul { list-style: none; margin: 32px 0 28px; padding: 0; border-top: 1px solid var(--line); }
.room--hot ul, .room--hot li { border-color: var(--line-d); }
.room li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.room__go { margin-top: auto; display: inline-flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--ink); color: var(--sand); font-weight: 500; }
.room__go .btn__i { background: var(--sand); color: var(--ink); }
.room--hot .room__go { background: var(--gold); color: var(--night); }
.room--hot .room__go .btn__i { background: var(--night); color: var(--gold); }
.room:hover .btn__i svg { transform: translateX(3px) rotate(-45deg); }

/* Gallery page */
.shots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; padding-top: 18px; }
.shot { grid-column: span 6; display: grid; gap: 18px; align-content: start; }
.shot--wide { grid-column: span 12; }
.shot--tall .shot__btn { aspect-ratio: 4 / 5; }
.shot__btn { display: block; width: 100%; padding: 0; border: 0; overflow: hidden; border-radius: 999px 999px 24px 24px; aspect-ratio: 4 / 3.6; background: var(--night-3); cursor: zoom-in; }
.shot--wide .shot__btn { aspect-ratio: 21 / 9; border-radius: 28px; }
.shot__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.shot__btn:hover img { transform: scale(1.04); }
.shot figcaption { display: grid; grid-template-columns: 140px 1fr; gap: 4px 20px; }
.shot figcaption span { grid-row: span 2; font: 500 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }
.shot figcaption b { font: 400 28px/1.1 var(--serif); font-weight: 400; }
.shot figcaption p { color: var(--muted-d); font-size: 15px; }
.lightbox { width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 20px; background: var(--night); color: var(--sand); overflow: hidden; }
.lightbox::backdrop { background: rgba(5, 7, 6, .88); backdrop-filter: blur(6px); }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox p { padding: 16px 22px; font: 400 22px/1.2 var(--serif); }
.lightbox__x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sand); color: var(--night); font-size: 24px; line-height: 1; }

@media (max-width: 1080px) {
  .srow { grid-template-columns: 48px 1fr auto; gap: 12px 20px; }
  .srow__ic { grid-row: span 2; grid-column: 1; width: 36px; height: 36px; }
  .srow__n { display: none; }
  .srow p { grid-column: 2 / -1; }
  .srow__tag { grid-row: 1; grid-column: 3; }
  .split { grid-template-columns: 1fr; }
  .arch--tall { max-width: 460px; }
  .rooms { grid-template-columns: 1fr; }
  .room { min-height: 0; }
}
@media (max-width: 720px) {
  .srow__tag { grid-column: 2 / -1; grid-row: auto; justify-self: start; }
  .tl::before { left: 32px; }
  .tl__step { grid-template-columns: 64px 1fr; padding-bottom: 48px; }
  .tl__when { grid-column: 2; padding: 0 0 0 24px; }
  .tl__dot { grid-row: 1 / span 2; grid-column: 1; }
  .tl__body { grid-column: 2; padding-left: 24px; }
  .shot, .shot--wide { grid-column: span 12; }
  .shot--wide .shot__btn { aspect-ratio: 4 / 3; }
  .shot figcaption { grid-template-columns: 1fr; }
  .shot figcaption span { grid-row: auto; }
}