/* SKHAI Luxury · home — page layout only (from mockups/luxury/css/pages/home.css + the live-data
   sections). Hand-scoped to body.skx-lux; loaded only on the front page when Luxury renders. */

.skx-lux .lxp-cinema { --ratio: 4 / 3; }
@media (min-width: 768px) { .skx-lux .lxp-cinema { --ratio: 21 / 9; } }

/* Chapter I: film poster with the play control centred, then the second still */
.skx-lux .lxp-film { position: relative; }
.skx-lux .lxp-film__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(29,24,20,.45), rgba(29,24,20,.1)); }
.skx-lux .lxp-film__play .lx-play { color: var(--c-linen); text-shadow: 0 1px 12px rgba(29,24,20,.6); }
.skx-lux .lxp-film__play .lx-play__ring { border-color: var(--c-linen); }
.skx-lux .lxp-after-film { margin-top: var(--sp-3); }
.skx-lux .lxp-band { --ratio: 16 / 9; }
@media (min-width: 768px) { .skx-lux .lxp-band { --ratio: 21 / 9; } }
.skx-lux #villas .lx-intro .lx-prose { max-width: none; margin-top: var(--sp-5); }
.skx-lux #villas .lx-intro .lx-prose p { margin: 0; }

/* Chapter II: developments */
.skx-lux .lxp-rail-gap { margin-top: var(--sp-10); }
.skx-lux .lxp-wide-title { font-size: var(--fs-h2); font-weight: var(--fw-regular); }
.skx-lux .lx-card--wide .lx-card__body { justify-items: start; }
.skx-lux .lxp-ops { display: grid; gap: var(--grid-gap); }
.skx-lux .lx-card--development .lx-card__meta,
.skx-lux .lx-card--wide .lx-card__meta { color: var(--text-soft); font-size: var(--fs-small); }
.skx-lux .lx-card .lx-card__more { position: relative; z-index: 0; }

/* Chapter III: destinations cross-fade — the classic slide has a short phone caption and a long desktop one */
.skx-lux .lxp-dest .lx-intro { margin-bottom: var(--sp-6); }
.skx-lux .lxp-desc-lg { display: none; }
@media (min-width: 992px) { .skx-lux .lxp-desc-sm { display: none; } .skx-lux .lxp-desc-lg { display: block; } }
@media (max-width: 767px) {
  .skx-lux .lxp-dest .lx-fade__caption { background: linear-gradient(to top, rgba(29,24,20,.92) 0%, rgba(29,24,20,.7) 55%, rgba(29,24,20,0) 100%); padding-top: var(--sp-10); }
}

/* Chapter IV: customisation pair */
.skx-lux .lxp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: start; }
.skx-lux .lxp-pair .lx-media { --ratio: 3 / 4; }
.skx-lux .lxp-pair > :last-child { margin-top: var(--sp-8); }
@media (min-width: 992px) { .skx-lux .lxp-pair { gap: var(--sp-5); } .skx-lux .lxp-pair > :last-child { margin-top: var(--sp-9); } }
/* Pasted Figma metadata spans in the live text carry no visible content */
.skx-lux #bespoke .lx-prose span[data-metadata], .skx-lux #bespoke .lx-prose span[data-buffer] { display: none; }

/* Instagram band (LightWidget iframe kept) */
.skx-lux .lxp-ig-band .instagram-feed-container { width: 100%; overflow: hidden; margin-top: var(--sp-5); }
.skx-lux .lxp-ig-band .lightwidget-widget { width: 100% !important; min-height: 280px; display: block; }

/* Chapter V: guides (live band has no images — text cards on umber) */
.skx-lux .lxp-guide { background: var(--c-umber); border: 1px solid rgba(239,232,222,.14); }
.skx-lux .lxp-guide .lx-card__body { padding: var(--sp-6); min-height: 160px; align-content: space-between; }
.skx-lux .lxp-guide .lx-card__title { font-size: var(--fs-h3); }
.skx-lux .lxp-guide:hover { border-color: var(--c-brass-light); }
.skx-lux .lxp-guide-foot { margin-top: var(--sp-8); color: var(--text-soft); font-weight: var(--fw-regular); }

/* Hero: keep the last line clear on phones */
@media (max-width: 991px) { .skx-lux .lx-hero__content { padding-bottom: calc(clamp(3rem, 2rem + 4vw, 6.5rem) + 12px); } }
.skx-lux .lx-media > picture { display: block; }
@media (max-width: 639px) { .skx-lux .lxp-devgrid .lx-card--development .lx-media { --ratio: 4 / 3; } }

/* Rail links stay on one line; below 400px the visible label shortens (aria-label keeps the full text) */
.skx-lux .lx-rail-head .lx-link { white-space: nowrap; flex: none; }
@media (max-width: 399px) { .skx-lux .lxp-hide-xs { display: none; } }

/* Intro still: paired with the film (same container, one step apart), warm grade, 3:2 on phones */
.skx-lux .lxp-after-film { margin-top: var(--sp-3); }
.skx-lux .lxp-band { position: relative; --ratio: 3 / 2; }
@media (min-width: 768px) { .skx-lux .lxp-band { --ratio: 21 / 9; } }
.skx-lux .lxp-band::after { content: ""; position: absolute; inset: 0; background: rgba(43, 37, 33, .12); mix-blend-mode: multiply; pointer-events: none; }
.skx-lux .lxp-band img { filter: saturate(.92) sepia(.08); }

/* Guides: destination image heads each card */
.skx-lux .lxp-guide .lx-media { margin: 0; }