/* ============================================================
   Wedding Hub Showcase — drifting, drag-to-scrub glass carousel
   A single-viewport LIGHT band (matches the cream site); frosted
   glass module cards fan toward the centre (coverflow), drift, loop
   and can be dragged like the photography details reel.
   Scoped to .v8 (public marketing site).
   ============================================================ */

.v8 .hubx{
  position:relative;
  overflow:hidden;
  padding:clamp(48px,4.6vw,74px) 0 clamp(44px,4.4vw,68px);
  /* seamless: inherit the page/section background above (no band) */
  background:transparent;
  isolation:isolate;
}
/* whisper-soft green + gold washes so the frosted glass has colour to catch,
   while the section still reads light. No hard edges. */
.v8 .hubx-atmos{
  position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 46% at 14% 26%, rgba(0,96,58,.06) 0%, transparent 70%),
    radial-gradient(40% 48% at 88% 74%, rgba(208,165,74,.07) 0%, transparent 72%);
}

.v8 .hubx > *:not(.hubx-atmos){position:relative; z-index:1}

/* ---- header ---- */
.v8 .hubx-head{max-width:700px; margin:0 auto clamp(22px,2.4vw,34px); padding:0 24px; text-align:center}
.v8 .hubx-head .eyebrow{color:var(--gold-deep); margin-bottom:13px}
.v8 .hubx-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,3.5vw,2.95rem); line-height:1.05; color:var(--green);
  margin-bottom:12px;
}
.v8 .hubx-head h2 .script{color:var(--gold-deep); font-size:1.12em; display:inline}
.v8 .hubx-sub{
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.7;
  color:var(--grey); max-width:56ch; margin:0 auto;
}

/* ---- reel viewport ---- */
.v8 .hubx-reel{
  position:relative;
  perspective:1450px;
  padding:22px 0 26px;
  cursor:grab;
  touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.v8 .hubx-reel.dragging{cursor:grabbing}
.v8 .hubx-track{
  display:flex; gap:22px; width:-moz-max-content; width:max-content;
  transform-style:preserve-3d;
  will-change:transform;
}

/* ---- glass card (light) ---- */
.v8 .hubx-card{
  flex:0 0 auto;
  width:clamp(272px,22vw,312px);
  height:clamp(336px,29vw,368px);
  padding:20px 21px 18px;
  border-radius:22px;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  /* frosted glass tuned for the light band */
  background:linear-gradient(158deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:
    0 32px 60px -30px rgba(0,96,58,.30),
    0 10px 26px rgba(20,20,20,.06),
    inset 1px 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(0,96,58,.05);
}
.v8 .hubx-card img{pointer-events:none}
.v8 .hubx-card-label{
  font-family:var(--font-label); text-transform:uppercase;
  letter-spacing:.16em; font-size:.62rem; color:var(--gold-deep);
  margin-bottom:14px;
}
.v8 .hc-body{display:flex; flex-direction:column; flex:1; min-height:0}
.v8 .hc-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.v8 .hc-title{font-family:var(--font-display); font-size:var(--fs-lead); color:var(--green); line-height:1.1}

/* pill — the glass design standard (used for every state) */
.v8 .hc-pill{
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.04em;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  line-height:1; flex:0 0 auto;
  padding:5px 11px; border-radius:100px; white-space:nowrap;
  color:var(--gold-deep);
  background:linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,250,241,.4));
  border:1px solid rgba(208,165,74,.45);
  backdrop-filter:blur(8px) saturate(1.4);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px -4px rgba(168,132,47,.4);
}
.v8 .hc-pill.ok{color:var(--green); border-color:rgba(0,96,58,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 3px 8px -4px rgba(0,96,58,.3)}
.v8 .hc-pill.live{position:relative; padding-left:20px}
.v8 .hc-pill.live::before{
  content:""; position:absolute; left:9px; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--gold-deep); box-shadow:0 0 0 0 rgba(168,132,47,.6);
  animation:hcPulse 2.2s ease-out infinite;
}
@keyframes hcPulse{0%{box-shadow:0 0 0 0 rgba(168,132,47,.5)}70%{box-shadow:0 0 0 7px rgba(168,132,47,0)}100%{box-shadow:0 0 0 0 rgba(168,132,47,0)}}

.v8 .hc-foot{
  margin-top:auto; padding-top:14px;
  font-family:var(--font-body); font-size:.82rem; line-height:1.45;
  color:var(--grey);
}

/* shot list */
.v8 .hc-checks{list-style:none; display:grid; gap:11px}
.v8 .hc-checks li{
  display:flex; align-items:flex-start; gap:10px;
  font-family:var(--font-body); font-size:.9rem; color:var(--dark); line-height:1.3;
}
.v8 .hc-tick{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--green); position:relative;
}
.v8 .hc-tick::after{
  content:""; position:absolute; left:5px; top:4px; width:5px; height:8px;
  border:2px solid var(--cream); border-top:0; border-left:0; transform:rotate(42deg);
}

/* chat */
.v8 .hc-chat{display:flex; flex-direction:column; gap:9px}
.v8 .hc-msg{
  max-width:86%; padding:9px 12px; border-radius:14px;
  font-family:var(--font-body); font-size:.82rem; line-height:1.38;
}
.v8 .hc-msg.them{align-self:flex-start; background:rgba(0,96,58,.07); color:var(--dark); border-bottom-left-radius:5px}
.v8 .hc-msg.you{align-self:flex-end; background:rgba(208,165,74,.18); color:var(--green-deep); border-bottom-right-radius:5px}
.v8 .hc-who{display:block; font-family:var(--font-label); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:2px}

/* timeline */
.v8 .hc-time{list-style:none; display:grid; gap:13px}
.v8 .hc-time li{
  display:grid; grid-template-columns:52px 16px 1fr; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:var(--fs-body); color:var(--dark);
}
.v8 .hc-time b{font-family:var(--font-display); color:var(--gold-deep); font-weight:400; font-size:var(--fs-body)}
.v8 .hc-tdot{width:9px; height:9px; border-radius:50%; background:transparent; border:2px solid var(--green); justify-self:center}

/* mood board */
.v8 .hc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.v8 .hc-thumb{aspect-ratio:1; border-radius:9px; background-size:cover; background-position:center 30%; box-shadow:inset 0 0 0 1px rgba(20,20,20,.06), 0 2px 6px rgba(20,20,20,.08)}

/* booking */
.v8 .hc-rows{display:grid; gap:11px}
.v8 .hc-line{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-body); font-size:.9rem; color:var(--grey)}
.v8 .hc-line b{font-family:var(--font-display); font-weight:400; color:var(--green)}
.v8 .hc-line b.hc-ok{color:var(--gold-deep)}
.v8 .hc-progress{margin-top:14px; height:5px; border-radius:100px; background:rgba(0,96,58,.12); overflow:hidden}
.v8 .hc-progress span{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}

/* gallery */
.v8 .hc-gal{display:grid; grid-template-columns:1.6fr 1fr; gap:8px}
.v8 .hc-play{position:relative; border-radius:11px; aspect-ratio:1; background-size:cover; background-position:center 30%; box-shadow:inset 0 0 0 1px rgba(20,20,20,.06)}
.v8 .hc-play i{
  position:absolute; inset:0; margin:auto; width:40px; height:40px; border-radius:50%;
  background:rgba(20,20,20,.4); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.7);
}
.v8 .hc-play i::after{
  content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%);
  border-left:11px solid var(--cream); border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.v8 .hc-galside{display:grid; grid-template-rows:1fr 1fr; gap:8px}
.v8 .hc-galside .hc-thumb{aspect-ratio:auto; height:100%}

/* ---- footer ---- */
.v8 .hubx-foot{text-align:center; margin-top:clamp(18px,2vw,28px); padding:0 24px}
.v8 .hubx-hint{
  display:block; width:-moz-fit-content; width:fit-content; margin:0 auto 16px;
  font-family:var(--font-label); text-transform:uppercase;
  letter-spacing:.24em; font-size:.6rem; color:var(--grey);
  position:relative; padding-left:22px;
}
.v8 .hubx-hint::before{
  content:""; position:absolute; left:0; top:50%; width:16px; height:1px; margin-top:-.5px;
  background:rgba(84,89,95,.5);
  animation:hcHint 2.6s ease-in-out infinite;
}
@keyframes hcHint{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.v8 .hubx-foot .btn-outline{display:inline-flex}
/* Wedding Hub sits on the light cream band, so its CTA uses the
   deeper gold that reads against light backgrounds. */
.v8 .hubx-foot .btn-outline-primary{
  color:var(--gold-deep);
}
.v8 .hubx-foot .btn-outline-primary::after{
  background:var(--gold-deep);
}
.v8 .hubx-foot .btn-outline-primary::before{
  border-color:var(--gold-deep);
}
.v8 .hubx-foot .btn-outline-primary .btn-glass{
  background:linear-gradient(180deg,rgba(168,132,47,.22),rgba(168,132,47,.10));
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(168,132,47,.18) inset,
    0 18px 40px -18px rgba(0,0,0,.55);
}
.v8 .hubx-foot .btn-outline-primary:hover,
.v8 .hubx-foot .btn-outline-primary:focus-visible{
  color:var(--green-deep);
}

/* ---- reveal ---- */
.v8 .hubx .reveal{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
.v8 .hubx .reveal.in{opacity:1; transform:none}

/* ---- responsive ---- */
@media(max-width:640px){
  .v8 .hubx-track{padding:0 24px; gap:16px}
  /* height grows with the content (the Messages card ran past 340px and cut
     its footnote); the row stretches every card to the tallest, so they stay even */
  .v8 .hubx-card{width:clamp(250px,80vw,290px); height:auto; min-height:clamp(340px,86vw,380px)}
  .v8 .hubx-reel{-webkit-mask-image:none; mask-image:none}
}

/* ---- reduced motion: plain scroller, no drift/tilt ---- */
@media(prefers-reduced-motion:reduce){
  .v8 .hubx-reel{overflow-x:auto; perspective:none; -webkit-mask-image:none; mask-image:none}
  .v8 .hubx-track{transform:none !important; padding:0 24px}
  .v8 .hubx-card{transform:none !important; opacity:1 !important}
  .v8 .hubx-hint::before{animation:none}
}

/* ============================================================
   DARK VARIANT — same carousel, cinematic dark band.
   Used on the Films page (<WeddingHubShowcase dark />).
   ============================================================ */
.v8 .hubx--dark{
  background:radial-gradient(130% 110% at 50% -6%, #123024 0%, #0c211a 54%, #09150f 100%);
}
.v8 .hubx--dark .hubx-atmos{
  background:
    radial-gradient(42% 50% at 14% 18%, rgba(0,96,58,.5) 0%, transparent 66%),
    radial-gradient(40% 52% at 88% 82%, rgba(208,165,74,.18) 0%, transparent 64%);
}
/* header */
.v8 .hubx--dark .hubx-head .eyebrow{color:var(--gold-light)}
.v8 .hubx--dark .hubx-head h2{color:var(--cream)}
.v8 .hubx--dark .hubx-head h2 .script{color:var(--gold-light)}
.v8 .hubx--dark .hubx-sub{color:rgba(255,250,241,.7)}
/* glass card on dark */
.v8 .hubx--dark .hubx-card{
  background:linear-gradient(158deg, rgba(255,250,241,.14), rgba(255,250,241,.05));
  border:1px solid rgba(255,250,241,.22);
  box-shadow:
    0 34px 70px -26px rgba(0,0,0,.6),
    inset 1px 1px 0 rgba(255,255,255,.28),
    inset -1px -1px 0 rgba(255,255,255,.05);
}
.v8 .hubx--dark .hubx-card-label{color:var(--gold-light)}
.v8 .hubx--dark .hc-title{color:var(--cream)}
/* pill */
.v8 .hubx--dark .hc-pill{
  color:var(--gold-light);
  background:linear-gradient(160deg, rgba(255,250,241,.16), rgba(255,250,241,.06));
  border:1px solid rgba(233,200,126,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px -4px rgba(0,0,0,.4);
}
.v8 .hubx--dark .hc-pill.ok{color:var(--gold-light); border-color:rgba(233,200,126,.4)}
.v8 .hubx--dark .hc-pill.live::before{background:var(--gold-light); box-shadow:0 0 0 0 rgba(233,200,126,.6)}
.v8 .hubx--dark .hc-foot{color:rgba(255,250,241,.62)}
/* shot list */
.v8 .hubx--dark .hc-checks li{color:rgba(255,250,241,.9)}
.v8 .hubx--dark .hc-tick{background:var(--gold-light)}
.v8 .hubx--dark .hc-tick::after{border-color:#0c211a}
/* chat */
.v8 .hubx--dark .hc-msg.them{background:rgba(255,250,241,.12); color:rgba(255,250,241,.92)}
.v8 .hubx--dark .hc-msg.you{background:rgba(233,200,126,.2); color:var(--cream)}
.v8 .hubx--dark .hc-who{color:var(--gold-light)}
/* timeline */
.v8 .hubx--dark .hc-time li{color:rgba(255,250,241,.9)}
.v8 .hubx--dark .hc-time b{color:var(--gold-light)}
.v8 .hubx--dark .hc-tdot{border-color:var(--gold-light)}
/* mood board / gallery thumbs */
.v8 .hubx--dark .hc-thumb{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.v8 .hubx--dark .hc-play{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* booking */
.v8 .hubx--dark .hc-line{color:rgba(255,250,241,.82)}
.v8 .hubx--dark .hc-line b{color:var(--cream)}
.v8 .hubx--dark .hc-line b.hc-ok{color:var(--gold-light)}
.v8 .hubx--dark .hc-progress{background:rgba(255,250,241,.14)}
/* footer */
.v8 .hubx--dark .hubx-hint{color:rgba(255,250,241,.5)}
.v8 .hubx--dark .hubx-hint::before{background:rgba(255,250,241,.4)}

/* ============================================================
   BIGGER CARDS (15 Oct 2026). The Wedding Hub is a stand-out part of
   what RMG offers and the section was being missed, so the cards and
   their text are larger and the band has more room. Text uses the
   site's own type tokens. Overrides the sizes above.
   ============================================================ */
.v8 .hubx{padding:clamp(72px,7vw,120px) 0 clamp(64px,6vw,104px)}
.v8 .hubx-track{gap:28px}
.v8 .hubx-card{
  width:clamp(320px,27vw,392px);
  height:clamp(410px,34vw,468px);
  padding:28px 28px 24px;
  border-radius:26px;
}
.v8 .hubx-card-label{font-size:var(--fs-label); margin-bottom:18px}
.v8 .hc-head{margin-bottom:18px}
.v8 .hc-title{font-size:1.45rem}
.v8 .hc-pill{font-size:var(--fs-label); padding:6px 12px}
.v8 .hc-checks{gap:14px}
.v8 .hc-checks li,
.v8 .hc-time li,
.v8 .hc-time b,
.v8 .hc-msg,
.v8 .hc-line{font-size:var(--fs-body)}
.v8 .hc-who{font-size:var(--fs-label)}
.v8 .hc-foot{font-size:var(--fs-meta); padding-top:18px}
@media(max-width:640px){
  .v8 .hubx{padding:64px 0 56px}
  .v8 .hubx-track{gap:18px}
  .v8 .hubx-card{width:clamp(280px,84vw,330px); height:auto; min-height:clamp(400px,104vw,450px); padding:24px 22px 20px}
  .v8 .hc-title{font-size:1.3rem}
}

/* invitation card (a small email preview) + unticked checklist items */
.v8 .hc-invite{display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:16px;
  background:rgba(0,96,58,.06); border:1px solid rgba(0,96,58,.12)}
.v8 .hc-invite-subj{font-family:var(--font-display); font-weight:400; font-size:var(--fs-lead); color:var(--green); line-height:1.2}
.v8 .hc-invite-btn{align-self:flex-start; margin-top:6px; padding:9px 16px; border-radius:100px;
  font-family:var(--font-label); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep); border:1px solid rgba(208,165,74,.55); background:rgba(208,165,74,.12)}
.v8 .hc-invite-note{font-family:var(--font-body); font-size:var(--fs-meta); color:var(--grey)}
.v8 .hc-tick.todo{background:transparent; box-shadow:inset 0 0 0 2px rgba(0,96,58,.35)}
.v8 .hc-tick.todo::after{display:none}
.v8 .hubx--dark .hc-invite{background:rgba(255,250,241,.07); border-color:rgba(255,250,241,.16)}
.v8 .hubx--dark .hc-invite-subj{color:var(--cream)}
.v8 .hubx--dark .hc-invite-btn{color:var(--gold-light); border-color:rgba(233,200,126,.5); background:rgba(233,200,126,.14)}
.v8 .hubx--dark .hc-invite-note{color:rgba(255,250,241,.62)}
.v8 .hubx--dark .hc-tick.todo{background:transparent; box-shadow:inset 0 0 0 2px rgba(233,200,126,.55)}
.v8 .hubx-head h2 .script{white-space:nowrap}
/* fit the Hub section on one screen: spacing and card height follow the screen height */
.v8 .hubx{padding:clamp(40px,7svh,120px) 0 clamp(36px,6svh,104px)}
@media(min-width:641px){.v8 .hubx-card{height:clamp(360px,calc(100svh - 400px),468px);height:clamp(340px,calc(100svh - 420px),468px)}}
/* shorter laptop screens: the same text, less space inside each card so nothing is cut off */
@media(max-height:920px) and (min-width:641px){
  .v8 .hubx-card{padding:20px 22px 16px}
  .v8 .hubx-card-label{margin-bottom:10px}
  .v8 .hc-head{margin-bottom:10px}
  .v8 .hc-checks{gap:9px}
  .v8 .hc-chat{gap:6px}
  .v8 .hc-msg{padding:7px 11px;line-height:1.3}
  .v8 .hc-invite{padding:12px;gap:5px}
  .v8 .hc-invite-btn{margin-top:2px}
  .v8 .hc-grid{gap:6px}
  .v8 .hc-foot{padding-top:10px;line-height:1.35}
}
@media(min-width:641px){.v8 .hubx-card{height:clamp(356px,calc(100svh - 420px),468px)}}