/* ==========================================================================
   Pavilion — Homepage (index.html)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { background: var(--color-yellow-100); padding: 40px var(--gutter) 80px; text-align: center; }
.hero__title { max-width: 958px; margin: 0 auto; }
/* Figma: Desktop/Display (80) on desktop, Mobile/H1 (38) on mobile */
.hero .hero__title { font-size: clamp(38px, 38px + 42 * var(--fluid), 80px); line-height: 1; }

.hero-video { background: linear-gradient(180deg, var(--color-yellow-100), var(--color-yellow-100)); }
.hero-video__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-white); }   /* Figma video frame 1240×697.5; white = the video's first frame, so nothing flashes before it starts */   /* matches the video's first frame (it fades in from white), so nothing flashes before it starts */
.hero-video__media img,
.hero-video__media video,
.hero-video__media mux-video { width: 100%; height: 100%; object-fit: cover; --media-object-fit: cover; display: block; }

.intro { background: var(--color-yellow-100); padding: 80px var(--gutter) 88px; text-align: center; }
.intro__text { max-width: 846px; margin: 0 auto; color: var(--color-black); }   /* Desktop/H4.5 (.t-h45) · Mobile/H5 below */

/* ---------- Audience cards ---------- */
.audiences {
  background: linear-gradient(180deg, var(--color-yellow-100) 0%, #fefdf9 100%);
  padding: 0 var(--gutter);
}
.audiences__track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: var(--content-max); margin: 0 auto;
}
.audience-card {
  display: flex; flex-direction: column; gap: 32px;
  padding: 40px; border-radius: var(--radius-card); min-height: 570px;
}
.audience-card .t-label + .t-h4 { margin-top: -4px; }            /* 28px eyebrow→title */
.audience-card--homeowners { background: var(--color-purple-200); }
.audience-card--managers   { background: var(--color-blue-200); }
.audience-card--guests     { background: var(--color-orange-200); }
.audience-card { transition: background-color .25s ease; }
@media (hover: hover) and (max-width: 1099px) {   /* tablet with a mouse only; desktop uses the expand-on-hover below */
  .audience-card:hover, .audience-card:focus-within { background: var(--color-yellow-200); }
}
.audience-card__art { height: 120px; display: flex; align-items: center; justify-content: center; }
.audience-card__art img { max-height: 120px; width: auto; }   /* *-alpha.png: white knocked out to transparency, so no blend mode needed */
.audience-card__text { color: var(--text-muted); }
.audience-card__cta { margin-top: auto; align-self: flex-end; }
.carousel-dots { display: none; }
/* Wrappers only matter on desktop (hover swap); below 1100 they drop out of the layout */
.audience-card__swap, .audience-card__more, .audience-card__more-inner, .audience-card__actions { display: contents; }
.audience-card__caret { display: none; }
@media (max-width: 1099px) {   /* keep the mobile/tablet order: label, title, art, body, CTA */
  .audience-card__art { order: 1; }
  .audience-card__text { order: 2; }
  .audience-card__cta { order: 3; }
  .audience-card__swap .t-h4 { margin-top: -4px; }   /* same 28px eyebrow→title as before the wrapper */
}

/* Desktop: compact card (art, label, headline, caret). On hover/keyboard focus the body copy
   cross-fades in where the headline was and the caret becomes the CTA, so the card only grows
   by the difference in text height. Figma: "3-up" + "3-up - expanded text". */
@media (min-width: 1100px) {
  /* Row is locked to the collapsed card height; a hovered card grows over the padding
     below instead of pushing the rest of the page down. */
  .audiences__track { align-items: start; }
  .audience-card { min-height: 420px; gap: 0; align-items: center; text-align: center; }
  .audience-card__art { order: -1; margin-bottom: 40px; }
  .audience-card .t-label { font-size: 16px; color: var(--color-black); }   /* bigger mono caps eyebrow, just for these cards (Figma 3-up) */
  .audience-card__swap { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 22px; }   /* Figma: 22 eyebrow→headline */
  .audience-card__swap { min-height: var(--audience-h4-h, 0px); }   /* tallest headline (js/home.js), so all three cards match */
  .audience-card .t-h4 { font-size: var(--fs-h45); line-height: var(--lh-h45); color: var(--color-black); }   /* Desktop/H4.5 */
  .audience-card__more { display: block; width: 100%; }
  .audience-card__more-inner { display: block; }
  .audience-card__text { padding-top: 24px; color: var(--color-black); }
  .audience-card__actions { display: grid; place-items: end center; width: 100%; height: 55px; margin-top: 40px; }
  .audience-card__actions > * { grid-area: 1 / 1; }
  .audience-card .audience-card__cta { margin: 0; background: var(--color-maroon); color: var(--color-off-white); }
  .audience-card .audience-card__cta:hover { background: var(--color-maroon-dark); }
}
@media (min-width: 1100px) and (hover: hover) {
  .audiences { position: relative; z-index: 1; }
  .audiences__track { grid-template-rows: 420px; }   /* collapsed height; a hovered card overflows it */
  /* headline and body share one cell; the body's row animates open so the cell only grows once it outgrows the headline */
  .audience-card__swap { display: grid; align-items: start; }
  .audience-card__swap > * { grid-area: 1 / 1; }
  .audience-card .t-h4 { transition: opacity .2s ease .1s, transform .3s ease .1s; }
  .audience-card__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1); }
  .audience-card__more-inner { min-height: 0; overflow: hidden; padding-block: .35em; margin-block: -.35em;   /* room for descenders: the trimmed text box would clip g/y/p */ opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
  .audience-card__text { padding-top: 0; }
  .audience-card__caret { display: flex; pointer-events: none; transition: opacity .2s ease .1s; }   /* decorative: never catches the cursor or clicks */
  .audience-card__caret > span { display: flex; align-items: center; justify-content: center; width: 66px; height: 44px; border-radius: var(--radius-pill); color: var(--color-black); }
  .audience-card--homeowners .audience-card__caret > span { background: var(--color-purple-100); }
  .audience-card--managers   .audience-card__caret > span { background: var(--color-blue-100); }
  .audience-card--guests     .audience-card__caret > span { background: #fff1e6; }
  .audience-card .audience-card__cta { position: relative; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .2s ease, background-color .2s ease; }

  .audience-card:hover .t-h4, .audience-card:focus-within .t-h4 { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }
  .audience-card:hover .audience-card__more, .audience-card:focus-within .audience-card__more { grid-template-rows: 1fr; }
  .audience-card:hover .audience-card__more-inner,
  .audience-card:focus-within .audience-card__more-inner { opacity: 1; transform: none; transition: opacity .3s ease .12s, transform .3s ease .12s; }
  .audience-card:hover .audience-card__caret, .audience-card:focus-within .audience-card__caret { opacity: 0; transition-delay: 0s; }
  .audience-card:hover .audience-card__cta,
  .audience-card:focus-within .audience-card__cta { opacity: 1; pointer-events: auto; transition: opacity .3s ease .12s, background-color .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .audience-card .t-h4, .audience-card__more, .audience-card__more-inner, .audience-card__caret, .audience-card .audience-card__cta { transition: none !important; }
}

/* ---------- What we believe ---------- */
.believe {
  background: var(--color-off-white);   /* Figma: What We Believe #FFFDF9 */
  display: grid; grid-template-columns: 670fr 590fr; gap: 20px; align-items: center;
  padding: 40px 80px;   /* Figma: 40 / 80 */
}
.believe__text { max-width: 590px; padding-right: 80px; box-sizing: content-box; display: flex; flex-direction: column; }
.believe__symbol { margin: 0 4px 40px; }
.believe__body { color: var(--color-gray-400); margin: 48px 0 40px; }
.believe__art { display: flex; justify-content: center; }
.believe__art img { width: min(590px, 100%); height: auto; }

/* ---------- Collage ---------- */
.collage { position: relative; background: var(--color-off-white); height: min(970px, 67.4vw); overflow: hidden; }
.collage__bg, .collage__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* positions = Figma "Background Image Desktop" (1440×970) as percentages */
.collage__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(846px, 90%); text-align: center; display: flex; flex-direction: column; align-items: center;
}
.collage__symbol { margin-bottom: 24px; }
.collage__center .t-script { margin-top: 24px; }

/* ---------- Two ways ---------- */
.two-ways { background: var(--color-maroon); padding: 128px var(--gutter); }
.two-ways__grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.way-card {
  background: var(--color-off-white); border-radius: var(--radius-panel); padding: 0; overflow: hidden;
  display: grid; grid-template-columns: 342fr 278fr; gap: 0;   /* Figma: text column 342 (32 padding) + full-height photo 278 */
}
.way-card__text { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; padding: 32px; }
/* eyebrow: .t-label (Body UPPERCASE, maroon) */
.way-card__body { color: var(--color-gray-400); }
.way-card { transition: background-color .25s ease; }
@media (hover: hover) {
  .way-card:hover, .way-card:focus-within { background: var(--color-yellow-200); }
}
.way-card__text .btn { margin-top: auto; }
.way-card .btn--yellow:hover, .way-card .btn--yellow:focus-visible { background: var(--color-white); }   /* card turns yellow-200 on hover, so a yellow button hover would vanish */
.way-card__art { display: flex; align-items: center; justify-content: center; }
.way-card__art img { width: 100%; height: auto; max-height: 322px; object-fit: contain; mix-blend-mode: multiply; }
.way-card__art--photo img { mix-blend-mode: normal; }
.way-card__art--photo { align-self: stretch; }
.way-card__art--photo img { object-fit: cover; border-radius: 0; width: 100%; height: 100%; max-height: none; }   /* full-bleed photo; card corners clip it */
/* Desktop: art keeps its proportions and sits at the top, instead of stretching
   to the text column's height as the cards narrow toward 1100px */
@media (min-width: 1100px) {
  .way-card__art { align-self: stretch; }
  .way-card { min-height: 428px; }   /* Figma card height */
  .believe__art { min-height: 737px; align-items: center; }   /* Figma image frame 590×737 */
  .way-card__art--photo img { width: 100%; height: 100%; max-height: none; border-radius: 0; }   /* full-bleed, card corners clip it */
}

/* ---------- Tablet 768–1099 ---------- */
@media (max-width: 1099px) {
  /* collage headline scales with the artwork so it doesn't run into the illustrations */
  .collage__center .t-h1 { font-size: clamp(34px, 4.6vw, 50px); }
  .collage__center .t-script { font-size: clamp(22px, 2.6vw, 28px); margin-top: 16px; }
  .collage__symbol { margin-bottom: 16px; }
  /* audience cards → swipe carousel with a peek of the next card */
  .audiences { padding-left: 0; padding-right: 0; }
  .audiences__track {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    max-width: none; margin: 0; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .audiences__track::-webkit-scrollbar { display: none; }
  .audience-card { flex: 0 0 min(420px, 44%); min-height: 0; scroll-snap-align: start; }
  .carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 24px 0 0; }
  .carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-maroon); opacity: .25; transition: opacity .2s; }
  .carousel-dots span.is-active { opacity: 1; background: var(--color-black); }
  .believe { grid-template-columns: 1fr; padding: 80px var(--gutter); }
  .believe__text { max-width: 560px; margin: 0; padding-right: 0; }
  .believe__body { margin-top: 32px; }
  .believe__art img { width: min(480px, 100%); }
  .two-ways__grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile < 768 ---------- */
@media (max-width: 767px) {

  .hero { padding: 32px 20px 40px; }   /* a bit more room between headline and video */
  .hero-video { padding: 0; }
  .hero-video__media { aspect-ratio: 16 / 9; border-radius: 0; }   /* full bleed, per updated mobile design */
  .intro { padding: 48px 20px; }   /* Figma mobile: 48 / 20 */
  .intro .intro__text { font-size: var(--fs-h5); line-height: var(--lh-h5); }   /* Mobile/H5 */

  /* audience cards → swipe carousel */
  .audiences { padding: 0; }
  .audiences__track { gap: 12px; padding: 0 20px; scroll-padding: 0 20px; }
  .audience-card { flex: 0 0 300px; padding: 24px; gap: 20px; border-radius: 16px; scroll-snap-align: start; }
  .audience-card--guests { grid-column: auto; }
  .audience-card__art { height: 90px; }
  .audience-card__art img { max-height: 90px; }
  .carousel-dots { padding: 20px 0 24px; }

  .believe { padding: 56px 20px 64px; gap: 32px; }
  .believe__symbol { margin: 0 0 20px; width: 23px; }
  .believe__body { margin: 24px 0 20px; }


  .collage { height: auto; aspect-ratio: 402 / 620; }
  .collage__center { width: calc(100% - 40px); }

  .two-ways { padding: 56px 20px 64px; }
  /* Figma mobile: full-bleed photo on top, then text (Mobile/H4, Mobile/Body in Gray-400) and button */
  .way-card { grid-template-columns: 1fr; padding: 0; gap: 0; border-radius: 16px; overflow: hidden; }
  .way-card__art { order: -1; justify-content: flex-start; }
  .way-card__art img { max-height: 120px; width: auto; }
  .way-card__art--photo img { width: 100%; height: 160px; max-height: none; border-radius: 0; object-fit: cover; }
  .way-card__text { padding: 24px; gap: 32px; }
  .way-card__eyebrow { margin-bottom: -16px; }   /* 16px eyebrow→headline, 32px elsewhere */

}

/* ---------- Wide > 1440 ---------- */
@media (min-width: 1441px) {
  .hero-video { padding-inline: var(--gutter); }
  .hero-video__media { border-radius: 0; }   /* square corners (was 40px) */
  .believe { padding-inline: calc((100% - 1440px) / 2 + 80px); }
  .collage__bg { left: 50%; right: auto; width: var(--page-max); transform: translateX(-50%); }
}

/* Hero video (live preview) */
.hero-video__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hero video frame — all sizes: sits inside the page gutter on the Yellow-100 band, with a pure-white
   border and rounded corners. Border/corners scale down on small screens (12/20 at 402 → 20/30 at 1440);
   the video's own corners follow (outer radius minus border). content-box keeps the video at true 16:9. */
.hero-video { padding-inline: var(--gutter); }
.hero-video__media {
  box-sizing: content-box;
  border: clamp(12px, 12px + 8 * var(--fluid), 20px) solid #fff;
  border-radius: clamp(20px, 20px + 10 * var(--fluid), 30px);
}

/* Mobile (<768): portrait 4:5 cut of the brand video (1080x1350) */
@media (max-width: 767px) {
  .hero-video__media { aspect-ratio: 4 / 5; }
}

/* Two ways: centred white headline above the cards (Figma Oct 2026: 80/128 padding, 80 gap desktop; mobile H2, 40 pad, 20 gap) */
.two-ways { padding: 80px var(--gutter) 128px; }
.two-ways__title { color: var(--color-white); text-align: left; margin: 0 auto 80px; max-width: var(--content-max); }   /* Desktop/H4, left */
@media (max-width: 767px) {
  .two-ways { padding: 20px 20px 64px; }
  .two-ways__title { text-align: center; padding: 40px; margin-bottom: 20px; }   /* Mobile/H4, centred */
}

/* ---------- 3-up on mobile: accordion (Figma: Homepage – Mobile "3-up accordion") ---------- */
.audience-card__toggle { display: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 767px) {
  .audiences { padding: 0 0 48px; }
  .audiences__track { display: flex; flex-direction: column; gap: 12px; overflow: visible; scroll-snap-type: none; padding: 0 20px; }
  .carousel-dots { display: none; }
  .audience-card {
    flex: none; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 0;
    padding: 24px 20px 20px; border-radius: 16px; min-height: 0; cursor: pointer;
  }
  .audience-card .t-label { grid-column: 1; grid-row: 1; color: var(--color-black); }
  .audience-card .t-h4 { grid-column: 1; grid-row: 2; margin-top: 16px; color: var(--color-black); font-size: var(--fs-h45); line-height: var(--lh-h45); }   /* Mobile/H4.5 */
  .audience-card__swap .t-h4 { margin-top: 16px; }
  .audience-card__toggle {
    display: block; grid-column: 2; grid-row: 1 / span 2; align-self: start;   /* top of the card, level with the eyebrow */
    width: 32px; height: 32px; --acc-toggle: var(--color-white);
  }
  .audience-card__toggle[aria-expanded="true"]::after { transform: rotate(0); }   /* + becomes − */
  /* open: body, then a bottom row with the illustration left and the button right (Figma "3-up accordion mobile") */
  .audience-card__art, .audience-card__text, .audience-card .audience-card__cta { display: none; }
  .audience-card__text { grid-column: 1 / -1; grid-row: 3; margin-top: 24px; color: var(--color-black); }
  .audience-card__art { grid-column: 1 / -1; grid-row: 4; justify-self: start; justify-content: flex-start; align-self: end; height: auto; margin-top: 24px; }
  .audience-card__art img { max-height: 80px; max-width: 180px; }
  .audience-card .audience-card__cta {
    grid-column: 1 / -1; grid-row: 4; justify-self: end; align-self: end; margin-top: 24px;
    background: var(--color-maroon); color: var(--color-off-white);
  }
  .audience-card.is-open .audience-card__art { display: flex; animation: acc-in .3s ease both; }
  .audience-card.is-open .audience-card__text { display: block; animation: acc-in .3s ease .05s both; }
  .audience-card.is-open .audience-card__cta { display: inline-flex; animation: acc-in .3s ease .1s both; }
}
@keyframes acc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .audience-card.is-open .audience-card__art, .audience-card.is-open .audience-card__text, .audience-card.is-open .audience-card__cta { animation: none !important; } }

/* ---------- Homepage Oct 2 (Figma): 3-up gets room below, companies moved up, believe centred on mobile ---------- */
@media (min-width: 1100px) {
  .audiences { padding-bottom: 80px; }
}
@media (min-width: 1100px) and (hover: hover) {
  .audience-card__caret { height: 50px; }   /* Figma caret frame 50 */
}
@media (max-width: 767px) {
  .rule--desktop { display: none; }
  .believe__text { align-items: center; text-align: center; margin: 0 auto; }
  .believe__symbol { margin-inline: auto; }
}

/* ---------- Hero side art (screens wider than 1440) ----------
   Two transparent illustrations (left 1227×1626, right 1431×1626), the video's height and top-aligned with it.
   Each keeps at least 50px between its inner edge and the 1440 frame; once the window is wide
   enough (about 2700px) they stop there and stick to the window's far edges instead.
   Backgrounds inside the media query, so narrower screens never download them. */
.hero-sides { display: none; }
@media (min-width: 1441px) {
  .hero-video { position: relative; }
  .hero-sides {
    --side-h: 737.5px;                            /* video box above 1440: 1240 × 9/16 + 2 × 20 border (Figma 737.5) */
    --side-wl: calc(var(--side-h) * 1227 / 1626);
    --side-wr: calc(var(--side-h) * 1431 / 1626);
    --side-inner: calc(50% - 720px - 50px);       /* 50px outside the frame */
    display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  }
  .hero-sides::before, .hero-sides::after {
    content: ""; position: absolute; top: 0; height: 100%;
    background: no-repeat center / contain;
  }
  .hero-sides::before { width: var(--side-wl); left: min(0px, calc(var(--side-inner) - var(--side-wl)));  background-image: url("../../assets/img/home-hero-side-left.webp"); }
  .hero-sides::after  { width: var(--side-wr); right: min(0px, calc(var(--side-inner) - var(--side-wr))); background-image: url("../../assets/img/home-hero-side-right.webp"); }
  .hero-video__media { position: relative; z-index: 1; }
}