/* ==========================================================================
   Homepage (front-page.php)
   ========================================================================== */
@layer pages {
  /* Height of the sticky header the hero photo slides under
     (bar + 1px border on mobile; bar + main nav + border on desktop) */
  body[data-page="home"] { --header-space: calc(var(--header-h-compact) + 1px); }

  @media (min-width: 1024px) {
    body[data-page="home"] { --header-space: calc(var(--header-h) + var(--nav-h) + 1px); }
  }

  /* ------------------------------------------------------------------------
     Hero — full-bleed photo under the transparent header, white type on a
     soft scrim. The bar at the bottom carries trust points + "in the photo".
     ------------------------------------------------------------------------ */
  .home-hero {
    --hero-ink: #fff;
    --hero-ink-soft: rgb(255 255 255 / 0.86);
    --hero-line: rgb(255 255 255 / 0.28);
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: max(560px, 100svh);
    margin-block-start: calc(var(--header-space) * -1);
    padding-block-start: var(--header-space);
    background: var(--night);
    color: var(--hero-ink);
    overflow: clip;
  }

  .home-hero__bg,
  .home-hero__bg img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
  }

  .home-hero__bg img { object-fit: cover; object-position: 50% 55%; }

  /* Scrim: darker behind the header, the centred copy and the bottom bar */
  .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgb(24 19 17 / 0.5) 0%, rgb(24 19 17 / 0) 26%),
      radial-gradient(ellipse 62% 48% at 50% 50%, rgb(24 19 17 / 0.42) 0%, rgb(24 19 17 / 0) 100%),
      linear-gradient(0deg, rgb(24 19 17 / 0.62) 0%, rgb(24 19 17 / 0) 32%),
      rgb(24 19 17 / 0.14);
  }

  .home-hero__inner {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100%;
  }

  .home-hero__content {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--space-4);
    max-width: 52rem;
    margin-inline: auto;
    padding-block: clamp(var(--space-5), 7svh, var(--space-8));
    text-align: center;
    text-shadow: 0 1px 28px rgb(0 0 0 / 0.28);
  }

  .home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 32px;
    padding-inline: 0.95em;
    border: 1px solid var(--hero-line);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-label);
    text-shadow: none;
  }

  .home-hero__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral-300);
  }

  .home-hero__title {
    color: var(--hero-ink);
    font-size: clamp(2.6rem, min(1.2rem + 5.6vw, 8.5svh), 5.75rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  .home-hero__title em { color: inherit; }

  .home-hero__lead {
    max-width: 40ch;
    color: var(--hero-ink-soft);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed, 1.6);
  }

  .home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    text-shadow: none;
  }

  .home-hero .btn--outline {
    --btn-fg: var(--hero-ink);
    --btn-bd: rgb(255 255 255 / 0.7);
    --btn-bg: rgb(255 255 255 / 0.06);
    --btn-bg-hover: var(--hero-ink);
    --btn-fg-hover: var(--ink);
    --btn-bd-hover: var(--hero-ink);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .home-hero :focus-visible { outline-color: var(--hero-ink); }

  /* Bottom bar */
  .home-hero__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-4) var(--space-5);
    border-block-start: 1px solid var(--hero-line);
    font-size: var(--fs-sm);
  }

  .home-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    color: var(--hero-ink-soft);
  }

  .home-hero__meta li { display: inline-flex; align-items: center; gap: 0.55em; }
  .home-hero__meta .icon { --icon-size: 1.15rem; color: var(--coral-300); }

  .home-hero__meta a {
    color: var(--hero-ink);
    text-decoration-color: var(--hero-line);
    text-underline-offset: 0.2em;
  }

  .home-hero__meta a:hover { text-decoration-color: currentColor; }

  .home-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    margin-inline-start: auto;
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
    border: 1px solid var(--hero-line);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--hero-ink);
    text-decoration: none;
    line-height: 1.25;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }

  .home-hero__tag > span:not([class]) { display: grid; }
  .home-hero__tag-label { color: var(--hero-ink-soft); font-size: var(--fs-2xs); }
  .home-hero__tag-name { font-weight: var(--fw-medium); }

  .home-hero__tag-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--coral-500);
    box-shadow: 0 0 0 4px rgb(255 119 120 / 0.3);
  }

  .home-hero__tag > .icon {
    flex: none;
    box-sizing: content-box;
    padding: 0.45rem;
    border-radius: 50%;
    background: var(--hero-ink);
    color: var(--ink);
  }

  .home-hero__tag:hover { background: var(--hero-ink); color: var(--ink); }
  .home-hero__tag:hover .home-hero__tag-label { color: var(--text-muted); }
  .home-hero__tag:hover > .icon { background: var(--ink); color: var(--paper); }

  @media (max-width: 767.98px) {
    .home-hero { min-height: max(540px, 92svh); }
    .home-hero__content {
      justify-items: start;
      align-content: end;
      padding-block: var(--space-7) var(--space-6);
      text-align: start;
    }
    .home-hero__content { gap: var(--space-3); }
    .home-hero__lead { font-size: var(--fs-base); }
    .home-hero__actions { justify-content: start; margin-block-start: var(--space-2); }
    .home-hero__actions > .btn { flex: 1 1 auto; min-height: 48px; padding-inline: 1.25em; font-size: var(--fs-sm); }
    .home-hero__bar { padding-block: var(--space-3) var(--space-4); font-size: var(--fs-xs); }
    .home-hero__meta { gap: var(--space-1) var(--space-4); }
    .home-hero__meta .icon { --icon-size: 1rem; }
    /* Stronger scrim towards the bottom where the copy sits on phones */
    .home-hero::before {
      background:
        linear-gradient(180deg, rgb(24 19 17 / 0.5) 0%, rgb(24 19 17 / 0) 24%),
        linear-gradient(0deg, rgb(24 19 17 / 0.78) 0%, rgb(24 19 17 / 0.4) 45%, rgb(24 19 17 / 0) 70%),
        rgb(24 19 17 / 0.1);
    }
  }

  /* Below 1200px the trust points take the whole bar; the "in the photo" tag
     only shows where both fit on one line */
  @media (max-width: 1199.98px) {
    .home-hero__tag { display: none; }
  }

  /* Short landscape screens (small laptops): keep the bottom bar above the fold */
  @media (min-width: 768px) and (max-height: 760px) {
    .home-hero__content { gap: var(--space-3); padding-block: var(--space-4); }
    .home-hero__lead { font-size: var(--fs-base); }
    .home-hero__actions { margin-block-start: var(--space-2); }
    .home-hero__bar { padding-block: var(--space-3); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .home-hero__bg img { animation: home-hero-settle 2.4s var(--ease-out) both; }

    @keyframes home-hero-settle {
      from { scale: 1.06; }
    }
  }

  /* ------------------------------------------------------------------------
     Shop by room: rail on phones, grid from tablet
     ------------------------------------------------------------------------ */
  .room-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .room-grid::-webkit-scrollbar { display: none; }
  .room-grid > li { scroll-snap-align: start; }

  .room-grid .cat-tile__media { --ratio: 4 / 5; }

  @media (min-width: 768px) {
    .room-grid {
      grid-auto-flow: row;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-6) var(--space-4);
      margin-inline: 0;
      padding-inline: 0;
      overflow: visible;
    }
  }

  /* ------------------------------------------------------------------------
     Product tabs
     ------------------------------------------------------------------------ */
  .home-picks .section-head { align-items: center; }

  .home-picks .tabs__list {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home-picks .products { --cols: 2; }

  @media (min-width: 1024px) {
    .home-picks .products { --cols: 4; }
  }

  .home-picks__more {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-7);
  }

  /* ------------------------------------------------------------------------
     Shop the look (hotspots are plain links to the list items → no JS)
     ------------------------------------------------------------------------ */
  .look {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  .look__media { position: relative; }

  .look__figure {
    --ratio: 4 / 3;
    margin: 0;
    border-radius: var(--radius-lg);
  }

  .hotspot {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    translate: -50% -50%;
    border-radius: 50%;
    color: var(--ink);
    text-decoration: none;
  }

  .hotspot__dot {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: 0 0 0 6px color-mix(in oklch, var(--paper) 45%, transparent), 0 2px 8px rgb(43 38 36 / 0.25);
    transition: scale var(--dur) var(--ease-out);
  }

  .hotspot__dot::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--coral-600);
  }

  .hotspot__label {
    position: absolute;
    inset-block-end: calc(100% + 2px);
    inset-inline-start: 50%;
    translate: -50% 4px;
    display: grid;
    width: max-content;
    max-width: 200px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--paper);
    box-shadow: var(--shadow-overlay);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  }

  .hotspot__price { color: var(--text-muted); font-variant-numeric: tabular-nums; }

  .hotspot:hover .hotspot__dot,
  .hotspot:focus .hotspot__dot { scale: 1.12; }

  .hotspot:hover .hotspot__label,
  .hotspot:focus .hotspot__label {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
  }

  /* Labels are hover/focus only; on phones the list below names every spot */
  @media (hover: none) {
    .hotspot__label { display: none; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hotspot__dot { animation: hotspot-pulse 2.8s var(--ease-in-out) infinite; }
    .hotspot:nth-of-type(2) .hotspot__dot { animation-delay: 0.6s; }
    .hotspot:nth-of-type(3) .hotspot__dot { animation-delay: 1.2s; }
  }

  @keyframes hotspot-pulse {
    0%, 100% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--paper) 45%, transparent), 0 2px 8px rgb(43 38 36 / 0.25); }
    50% { box-shadow: 0 0 0 11px color-mix(in oklch, var(--paper) 20%, transparent), 0 2px 8px rgb(43 38 36 / 0.25); }
  }

  .look__panel {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }

  .look__panel h2 em { font-style: italic; font-weight: var(--fw-light); }

  .look__list {
    display: grid;
    border-block: 1px solid var(--border);
  }

  .look__item + .look__item { border-block-start: 1px solid var(--border); }

  .look__item { scroll-margin-block: calc(var(--header-space) + var(--space-6)); border-radius: var(--radius-sm); }
  .look__item:target { background: color-mix(in oklch, var(--coral-100) 55%, transparent); }
  .look__item:focus { outline: none; }
  .look__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .look__item .mini-product { padding-inline: var(--space-2); }

  .look__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-soft);
  }

  .look__total strong {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);
    color: var(--text);
  }

  @media (min-width: 1024px) {
    .look { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(var(--space-7), 5vw, var(--space-9)); }
  }

  /* ------------------------------------------------------------------------
     Promo duo
     ------------------------------------------------------------------------ */
  .promo-duo {
    display: grid;
    gap: var(--space-4);
  }

  @media (min-width: 768px) {
    .promo-duo { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  }

  .promo-card {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: var(--on-dark);
    text-decoration: none;
    isolation: isolate;
  }

  .promo-card:hover { color: var(--on-dark); }

  .promo-card__media { --ratio: 1; grid-area: 1 / 1; }
  .promo-card__media img { transition: scale 900ms var(--ease-out); }
  .promo-card:hover .promo-card__media img { scale: 1.04; }

  .promo-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgb(30 26 24 / 0.72) 100%);
  }

  .promo-card__body {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: end;
    display: grid;
    gap: var(--space-2);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
  }

  .promo-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
  }

  .promo-card__text { max-width: 36ch; font-size: var(--fs-sm); color: color-mix(in oklch, var(--on-dark) 88%, transparent); }

  .promo-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-block-start: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }

  .promo-card__cta .icon { transition: translate var(--dur) var(--ease-out); }
  .promo-card:hover .promo-card__cta .icon { translate: 4px 0; }

  @media (min-width: 768px) and (max-width: 1023.98px) {
    .promo-card__media { --ratio: 4 / 5; }
  }

  @media (min-width: 1024px) {
    .promo-card__media { --ratio: 4 / 3; }
  }

  /* ------------------------------------------------------------------------
     Story + brands
     ------------------------------------------------------------------------ */
  .story {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  .story__media { margin: 0; border-radius: var(--radius-lg); }

  .story__text {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }

  .story__text h2 em { font-style: italic; font-weight: var(--fw-light); }

  .values {
    display: grid;
    gap: var(--space-4);
    width: 100%;
    padding-block: var(--space-5);
    border-block: 1px solid var(--border);
  }

  .value {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    font-size: var(--fs-sm);
  }

  .value > span:last-child { display: grid; gap: 2px; }

  .value__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--accent-ink);
  }

  .value__icon .icon { --icon-size: 1.25rem; }

  @media (min-width: 768px) {
    .story__media { max-width: 560px; }
  }

  @media (min-width: 1024px) {
    .story { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(var(--space-7), 6vw, var(--space-10)); }
    .story__media { max-width: none; }
  }

  .brand-duo {
    display: grid;
    gap: var(--space-4);
    margin-block-start: clamp(var(--space-7), 6vw, var(--space-9));
  }

  @media (min-width: 768px) {
    .brand-duo { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  }

  .brand-card {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    justify-items: start;
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .brand-card__name {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);
    color: var(--heading);
  }

  /* ------------------------------------------------------------------------
     Hotel / B2B
     ------------------------------------------------------------------------ */
  .home-hotel__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  .home-hotel__text {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }

  .home-hotel__text h2 em { font-style: italic; font-weight: var(--fw-light); }
  .home-hotel .lead { color: var(--on-dark-muted); max-width: 46ch; }
  .home-hotel .eyebrow { color: var(--coral-300); }

  .check-list {
    display: grid;
    gap: var(--space-3);
  }

  .check-list li {
    display: flex;
    align-items: start;
    gap: var(--space-3);
  }

  .check-list .icon {
    flex: none;
    margin-block-start: 0.2em;
    color: var(--coral-300);
  }

  .home-hotel__media {
    position: relative;
    padding-block-end: var(--space-6);
  }

  .home-hotel__main { --ratio: 5 / 4; margin: 0; border-radius: var(--radius-lg); }

  .home-hotel__detail {
    position: absolute;
    inset-inline-end: var(--space-4);
    inset-block-end: 0;
    width: clamp(110px, 30%, 210px);
    margin: 0;
    border: 6px solid var(--night);
    border-radius: var(--radius-md);
  }

  @media (min-width: 1024px) {
    .home-hotel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--space-7), 6vw, var(--space-10)); }
    .home-hotel__detail { inset-inline-end: auto; inset-inline-start: calc(var(--space-7) * -1); }
  }

  /* ------------------------------------------------------------------------
     Reviews
     ------------------------------------------------------------------------ */
  .review-grid {
    display: grid;
    gap: var(--space-4);
  }

  @media (min-width: 768px) {
    .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  }

  .review-card {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: var(--space-3);
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    border-radius: var(--radius-lg);
    background: var(--surface-2);
  }

  .review-card blockquote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--text);
  }

  .review-card__by { margin-block-start: var(--space-2); font-size: var(--fs-sm); }
  .review-card__product { font-size: var(--fs-xs); }

  /* ------------------------------------------------------------------------
     Instagram
     ------------------------------------------------------------------------ */
  .insta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  @media (min-width: 1024px) {
    .insta-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
  }

  .insta-tile {
    --ratio: 1;
    display: block;
    border-radius: var(--radius-sm);
    color: var(--paper);
  }

  .insta-tile img { transition: scale 700ms var(--ease-out), filter var(--dur) var(--ease-out); }

  .insta-tile__icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(30 26 24 / 0.35);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
  }

  .insta-tile__icon .icon { --icon-size: 1.75rem; }

  .insta-tile:hover img { scale: 1.05; }
  .insta-tile:hover .insta-tile__icon,
  .insta-tile:focus-visible .insta-tile__icon { opacity: 1; }
  .insta-tile:hover { color: var(--paper); }
}