/* ==========================================================================
   home.css — Corporate Gift homepage sections.
   Four product-display treatments (flip cards, kinetic drag slider, spotlight
   + thumbnail rail, image accordion) plus brand interludes. Namespaced .cg-*.
   Colours come from the site tokens (navy dominant, steel support, amber CTA).
   ========================================================================== */
.cg-home{
  --cg-navy:var(--ng-navy); --cg-steel:var(--ng-navy-light); --cg-amber:var(--ng-gold);
  --cg-amber2:var(--ng-gold-light); --cg-line:var(--ng-line); --cg-grey:var(--ng-grey);
  --cg-cream:var(--ng-off-white); --cg-serif:var(--ng-serif);
  --cg-r:16px; --cg-r-lg:24px;
  --cg-shadow:0 18px 50px rgba(10,10,10,.14); --cg-shadow-sm:0 6px 22px rgba(10,10,10,.10);
}
.cg-sec{padding:clamp(48px,7vw,90px) 0;}
.cg-sec--tint{background:#fff;}
.cg-sec__head{max-width:var(--ng-maxw);margin:0 auto clamp(24px,4vw,40px);padding:0 5%;text-align:center;}
.cg-sec__eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cg-amber);background:rgba(217,182,72,.12);padding:6px 14px;border-radius:999px;margin-bottom:14px;}
.cg-sec__head h2{font-family:var(--cg-serif);font-size:clamp(1.8rem,3.6vw,2.7rem);margin:0 0 10px;}
.cg-sec__head p{color:var(--cg-grey);max-width:640px;margin:0 auto;font-size:1.05rem;}
.cg-wrap{max-width:var(--ng-maxw);margin:0 auto;padding:0 5%;}

/* ---- Hero -------------------------------------------------------------- */
.cg-hero{position:relative;overflow:hidden;background:
   radial-gradient(120% 130% at 82% -10%,var(--cg-steel) 0%,var(--cg-navy) 55%);color:#fff;
   padding:clamp(56px,10vw,120px) 0;}
.cg-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
   background:repeating-linear-gradient(45deg,rgba(217,182,72,.06) 0 2px,transparent 2px 28px);}
.cg-hero__inner{position:relative;max-width:var(--ng-maxw);margin:0 auto;padding:0 5%;}
.cg-hero__eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cg-amber2);margin-bottom:16px;}
.cg-hero h1{font-family:var(--cg-serif);color:#fff;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.03;margin:0 0 18px;max-width:14ch;}
.cg-hero p{color:#d7e2ee;font-size:clamp(1.05rem,1.7vw,1.3rem);max-width:620px;margin:0 0 28px;}
.cg-hero__cta{display:flex;flex-wrap:wrap;gap:14px;}
.cg-hero .btn--primary{background:var(--cg-amber);color:var(--cg-navy);}
.cg-hero .btn--primary:hover{background:var(--cg-amber2);color:var(--cg-navy);}
.cg-hero .btn--ghost{border:2px solid rgba(255,255,255,.6);color:#fff;}
.cg-hero .btn--ghost:hover{background:#fff;color:var(--cg-navy);}

/* ---- Brand interludes -------------------------------------------------- */
.cg-interlude{padding:clamp(40px,6vw,72px) 0;}
.cg-interlude__inner{max-width:900px;margin:0 auto;padding:0 5%;text-align:center;}
.cg-interlude h2{font-family:var(--cg-serif);font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 14px;color:var(--cg-navy);}
.cg-interlude p{color:var(--cg-grey);font-size:1.12rem;line-height:1.7;margin:0;}
.cg-interlude--navy{background:var(--cg-navy);}
.cg-interlude--navy h2{color:#fff;} .cg-interlude--navy p{color:#c9d6e2;}
.cg-interlude--navy:before{content:"";display:block;width:54px;height:3px;background:var(--cg-amber);margin:0 auto 22px;border-radius:3px;}

/* ---- 1 · Flip cards ---------------------------------------------------- */
.cg-flip__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px, 100%),1fr));gap:22px;}
.cg-flip__card{perspective:1200px;height:340px;cursor:pointer;}
.cg-flip__inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.5,0,.2,1);transform-style:preserve-3d;}
.cg-flip__card.is-flipped .cg-flip__inner,.cg-flip__card:hover .cg-flip__inner{transform:rotateY(180deg);}
.cg-flip__face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--cg-r);overflow:hidden;box-shadow:var(--cg-shadow-sm);}
.cg-flip__front img{width:100%;height:100%;object-fit:cover;}
.cg-flip__front .tag{position:absolute;top:14px;left:14px;background:var(--cg-amber);color:var(--cg-navy);padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:700;}
.cg-flip__back{transform:rotateY(180deg);background:linear-gradient(155deg,var(--cg-navy),var(--cg-steel));color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.cg-flip__back h3{font-family:var(--cg-serif);color:#fff;margin:0 0 8px;}
.cg-flip__back p{color:#dbe6f0;font-size:.9rem;margin:0 0 16px;}
.cg-flip__back .price{font-size:1.3rem;color:var(--cg-amber2);font-weight:700;margin-bottom:16px;}

/* ---- 2 · Kinetic drag slider ------------------------------------------ */
.cg-drag__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 22px;cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--cg-amber) transparent;}
.cg-drag__track.is-drag{cursor:grabbing;scroll-snap-type:none;}
.cg-drag__track::-webkit-scrollbar{height:8px;}
.cg-drag__track::-webkit-scrollbar-thumb{background:var(--cg-amber);border-radius:999px;}
.cg-drag__card{scroll-snap-align:center;flex:none;width:min(78vw,330px);border-radius:var(--cg-r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--cg-shadow-sm);user-select:none;}
.cg-drag__card img{width:100%;aspect-ratio:5/4;object-fit:cover;pointer-events:none;}
.cg-drag__card .m{padding:16px 20px;}
.cg-drag__card .m b{font-family:var(--cg-serif);font-size:1.15rem;display:block;}
.cg-drag__card .m span{color:var(--cg-grey);font-size:.88rem;}
.cg-drag__card .m .price{color:var(--cg-amber);font-weight:700;}
.cg-drag__hint{color:var(--cg-grey);font-size:.82rem;margin:2px 5% 0;text-align:center;}
.cg-drag__hint i{color:var(--cg-amber);}

/* ---- 3 · Spotlight + thumbnail rail ----------------------------------- */
.cg-spot{display:grid;grid-template-columns:92px 1fr 320px;gap:22px;}
.cg-spot__rail{display:flex;flex-direction:column;gap:12px;max-height:460px;overflow:auto;scrollbar-width:none;}
.cg-spot__rail::-webkit-scrollbar{display:none;}
.cg-spot__thumb{border:none;padding:0;background:none;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:1;
  outline:2px solid transparent;outline-offset:2px;transition:.2s;opacity:.55;}
.cg-spot__thumb img{width:100%;height:100%;object-fit:cover;}
.cg-spot__thumb.is-on{opacity:1;outline-color:var(--cg-amber);}
.cg-spot__stage{position:relative;border-radius:var(--cg-r-lg);overflow:hidden;box-shadow:var(--cg-shadow);min-height:420px;background:var(--cg-navy);}
.cg-spot__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform .8s;transform:scale(1.05);}
.cg-spot__stage img.is-on{opacity:1;transform:scale(1);}
.cg-spot__info{align-self:center;}
.cg-spot__info h3{font-family:var(--cg-serif);font-size:2rem;margin:0 0 6px;}
.cg-spot__info p{color:var(--cg-grey);margin:0 0 14px;}
.cg-spot__info .price{font-size:1.6rem;display:block;margin-bottom:18px;color:var(--cg-amber);font-weight:700;}
@media(max-width:900px){.cg-spot{grid-template-columns:1fr;}.cg-spot__rail{flex-direction:row;max-height:none;}.cg-spot__thumb{width:72px;flex:none;}}

/* ---- 4 · Image accordion ---------------------------------------------- */
.cg-acc{display:flex;gap:12px;height:440px;}
.cg-acc__panel{position:relative;flex:1;border-radius:20px;overflow:hidden;cursor:pointer;transition:flex .6s cubic-bezier(.5,0,.2,1);
  min-width:56px;box-shadow:var(--cg-shadow-sm);}
.cg-acc__panel.is-open{flex:6;}
.cg-acc__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cg-acc__panel:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,10,10,.82));}
.cg-acc__panel .lbl{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;writing-mode:vertical-rl;
  transform:rotate(180deg);margin:0 auto;font-family:var(--cg-serif);font-size:1.1rem;text-shadow:0 2px 8px rgba(0,0,0,.6);transition:.3s;}
.cg-acc__panel.is-open .lbl{writing-mode:horizontal-tb;transform:none;bottom:22px;left:22px;right:auto;text-align:left;font-size:1.5rem;}
.cg-acc__panel .meta{position:absolute;left:22px;bottom:60px;color:#e6eef6;opacity:0;transition:.3s .1s;max-width:70%;}
.cg-acc__panel .meta .price{color:var(--cg-amber2);font-weight:700;}
.cg-acc__panel.is-open .meta{opacity:1;}
@media(max-width:760px){.cg-acc{height:auto;flex-direction:column;}.cg-acc__panel{height:70px;}.cg-acc__panel.is-open{height:300px;flex:none;}
  .cg-acc__panel .lbl{writing-mode:horizontal-tb;transform:none;bottom:14px;left:18px;right:auto;text-align:left;}}

/* ---- closing CTA ------------------------------------------------------- */
.cg-cta{background:var(--cg-navy);color:#fff;text-align:center;padding:clamp(48px,7vw,88px) 5%;}
.cg-cta h2{font-family:var(--cg-serif);color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 12px;}
.cg-cta p{color:#c9d6e2;max-width:560px;margin:0 auto 24px;}
.cg-cta .btn--primary{background:var(--cg-amber);color:var(--cg-navy);}
.cg-cta .btn--primary:hover{background:var(--cg-amber2);color:var(--cg-navy);}

/* ==========================================================================
   MOBILE DENSITY
   --------------------------------------------------------------------------
   Audited at 390px: the homepage ran to 9,912px — roughly twelve phone
   screens — because every treatment stacked one full-size card per row and
   each section carried desktop-scale padding. The page said the same things,
   it just took a very long scroll and a lot of empty space to say them.
   These rules bring it to a length a thumb will actually reach the end of,
   without dropping a single section or product.
   ========================================================================== */
@media (max-width: 700px) {

  /* Sections and interludes: desktop breathing room reads as dead space on a
     phone, especially four interludes of pure text at ~390px each. */
  .cg-sec { padding: 34px 0; }
  .cg-interlude { padding: 30px 0; }
  .cg-interlude p { font-size: 1rem; line-height: 1.6; }
  .cg-sec__head { margin-bottom: 20px; }
  .cg-sec__head p { font-size: .98rem; }
  .cg-hero { padding: 44px 0; }
  .cg-hero h1 { max-width: none; }
  .cg-hero p { margin-bottom: 20px; }
  .cg-hero__cta .btn { flex: 1 1 100%; }

  /* 1 · Flip cards — two per row instead of one. Eight cards drop from
     ~2,900px to ~800px, and the grid still reads as a considered display
     rather than a list. Cards stay tall enough for the back face to hold its
     title, price and button. */
  .cg-flip__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cg-flip__card { height: 232px; }
  .cg-flip__back { padding: 14px; }
  .cg-flip__back h3 { font-size: 1rem; }
  .cg-flip__back p { font-size: .78rem; margin-bottom: 10px;
                     display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cg-flip__back .price { font-size: 1.05rem; margin-bottom: 10px; }
  .cg-flip__back .btn { padding: 8px 14px; font-size: .8rem; }
  .cg-flip__front .tag { top: 8px; left: 8px; padding: 4px 9px; font-size: .68rem; }

  /* 2 · Drag slider — narrower cards mean more than one is visible at a time,
     which is the whole point of a swipe rail. */
  .cg-drag__card { width: 240px; }
  .cg-drag__track { gap: 12px; }

  /* 3 · Spotlight — 1,020px for one image and a thumbnail rail was the worst
     space-to-content ratio on the page.
     NOTE: min-height must be released before aspect-ratio can apply. The base
     rule sets min-height:420px, and 420px at 4:3 implies a 560px MINIMUM width,
     which the grid then honours — pushing the page sideways. Clearing the
     min-height lets the width lead and the height follow. */
  .cg-spot { gap: 14px; }
  .cg-spot > * { min-width: 0; }
  .cg-spot__stage { min-height: 0; aspect-ratio: 4 / 3; }
  .cg-spot__rail { gap: 8px; overflow-x: auto; }
  .cg-spot__thumb { width: 60px; }

  /* 4 · Accordion — a taller open panel so the product is actually visible,
     and slimmer closed bars so the whole set fits on one screen. */
  .cg-acc { gap: 8px; }
  .cg-acc__panel { height: 58px; }
  .cg-acc__panel.is-open { height: 260px; }

  .cg-cta { padding: 40px 5%; }
  .cg-cta .btn { width: 100%; }
}

/* Very narrow phones (SE class) — keep two flip cards but shorten them. */
@media (max-width: 380px) {
  .cg-flip__card { height: 210px; }
  .cg-drag__card { width: 210px; }
}

/* Hover-only reveals: on touch the flip is driven by the click handler in
   home.js, and leaving the :hover rule active makes a tapped card stick
   half-flipped when the browser keeps the hover state. */
@media (hover: none) {
  .cg-flip__card:hover .cg-flip__inner { transform: none; }
  .cg-flip__card.is-flipped .cg-flip__inner { transform: rotateY(180deg); }
}