/* Experiential Gifting — Figma node 15795-10310. Scoped to .eg so it can't touch other pages.
   Traps handled: theme.css sets h1..h6{display:inline} → headings forced back to block below;
   pages-shared.css forces Poppins !important on h-tags → serif accents live in <em>, not headings. */

.eg { color: #000; font-family: 'Poppins', sans-serif; }
.eg .eg-serif { font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 500; }

/* shared gold button (square, per Figma) */
.eg-btn { display: inline-block; background: #f7b82a; color: #000; font-weight: 600; font-size: 15px; line-height: 1.4; padding: 11px 20px; text-decoration: none; border: 0; cursor: pointer; }
.eg-btn:hover { background: #eaa90f; color: #000; }

/* section heading: Poppins Medium 40, serif accent 46 (per Figma) */
.eg-sec-heading { display: block; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; margin: 0; }
.eg-sec-heading .eg-serif { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.2; }
.eg-accent--orange { color: #f96815; }
.eg-accent--gold { color: #ffb900; }
.eg-accent--blue { color: #005eb8; }

/* ---------- HERO ---------- */
.eg-hero { position: relative; margin-top: 70px; min-height: 560px; display: flex; align-items: center; background-color: #d8c0a1; overflow: hidden; }
.eg-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.eg-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #d8c0a1 24%, rgba(216,192,161,.65) 46%, rgba(216,192,161,0) 66%); }
.eg-hero__inner { position: relative; z-index: 2; max-width: 860px; width: 100%; padding: 60px clamp(20px, 6.94vw, 100px); }
.eg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: #000; margin-bottom: 22px; font-size: 14px; }
.eg-breadcrumb__link, .eg-breadcrumb__current, .eg-breadcrumb__seg { color: #000; opacity: .78; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; white-space: nowrap; }
.eg-breadcrumb .do-breadcrumb-sep { white-space: nowrap; }
.eg-breadcrumb__current { opacity: 1; }
.eg-breadcrumb__home { width: 14px; height: 14px; filter: brightness(0); } /* icon asset is white (built for dark banners); force black on this light hero */
.eg-hero__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(34px, 4vw, 56px); line-height: 1.1; color: #000; margin: 0 0 20px; }
.eg-hero__title .eg-serif { font-size: inherit; }
.eg-hero__l1 { white-space: nowrap; } /* keep "Every gift has a story." on one line at desktop; wraps on mobile (below) */
.eg-hero__sub { font-size: 18px; line-height: 1.5; color: #000; max-width: 552px; margin: 0 0 24px; }

/* ---------- WE CRAFT ---------- */
.eg-craft { background: #fff; padding: 90px clamp(20px, 6.94vw, 100px); }
/* Cap to the Figma content width (1240 @ 1440) and LEFT-align it (no auto margins), so the heading
   stays flush with the hero's left margin (x=100) on monitors wider than 1440 — same margin as every
   other section — while the middle gutter still holds the design's ~270px (space-between within the
   capped 1240) instead of sprawling. Any extra width on >1440 falls to the right, not the gutter. */
.eg-craft__grid { display: grid; grid-template-columns: minmax(0, 361px) minmax(0, 610px); gap: clamp(40px, 8vw, 120px); justify-content: space-between; align-items: start; max-width: 1240px; }
.eg-craft__heading { }
.eg-craft__body { display: flex; flex-direction: column; gap: 24px; }
.eg-craft__body p { font-size: 18px; line-height: 27px; color: #000; margin: 0; }
.eg-craft__body .eg-btn { align-self: flex-start; margin-top: 8px; }

/* ---------- CO-CREATED CONCEPTS (dark) ---------- */
.eg-concepts { background: #000; padding: 90px clamp(20px, 6.94vw, 100px); }
.eg-concepts__heading { color: #fff; max-width: 700px; margin-bottom: 42px; }
.eg-concepts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.eg-concept { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.eg-concept__frame { position: relative; background: #272a2e; height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color .4s ease; }
.eg-concept__img { width: 335px; max-width: 92%; height: auto; display: block; transition: transform .4s ease; }
/* Hover = Figma component variant "Property 1=Variant2" (node 15618:3716) vs "Default" (15618:3714):
   the product image scales ~1.078 (image box 335x306 -> 361x330) AND the frame background drops to
   50% opacity (#272a2e -> rgba(39,42,46,.5)). Transition timing follows the site convention
   (the Figma variant does not specify a duration). */
.eg-concept { cursor: pointer; }
.eg-concept:hover .eg-concept__frame { background: rgba(39, 42, 46, 0.5); }
.eg-concept:hover .eg-concept__img { transform: scale(1.078); }
.eg-concept__watermark { position: absolute; left: 24px; bottom: 22px; color: rgba(255,255,255,.12); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.eg-concept__label { text-align: center; color: #fff; font-weight: 500; font-size: 22px; line-height: 1.4; }

/* ---------- FEATURE CARDS ---------- */
.eg-features { background: #fff; display: flex; gap: 20px; padding: 90px clamp(20px, 6.94vw, 100px); }
.eg-feature { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.eg-feature--blue { background: #d4ecf2; }
.eg-feature--pink { background: #feede9; }
.eg-feature--green { background: #d3fad3; }
.eg-feature__icon { width: 42px; height: 42px; }
.eg-feature__title { display: block; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 22px; line-height: 1.4; color: #000; margin: 0; }
.eg-feature__text { font-size: 18px; line-height: 1.5; color: #000; margin: 0; }

/* ---------- WHAT ARE YOU LOOKING FOR (scroll-driven pin; 3 synced options) ---------- */
.eg-look { position: relative; background: #fff; min-height: 220vh; } /* extra height = scroll room to scrub the 3 options */
.eg-look__pin { position: sticky; top: 70px; min-height: calc(100vh - 70px); display: flex; padding: 56px clamp(20px, 6.94vw, 100px); }
.eg-look__inner { display: flex; flex-direction: column; width: 100%; }
.eg-look__heading { margin-bottom: 0; }
/* Image column flexes to fill the container so it reaches the right content edge — kills the
   empty band Pritesh flagged (was a fixed 505px column that left a growing gap on the right). */
.eg-look__cols { flex: 1; display: grid; grid-template-columns: minmax(0, 610px) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.eg-look__acc { display: flex; flex-direction: column; gap: 24px; }
.eg-look__opt { border-bottom: 2px solid rgba(0,0,0,.73); padding-bottom: 12px; opacity: .4; transition: opacity .35s ease, border-color .35s ease; }
.eg-look__opt.is-active { opacity: 1; border-bottom-color: #005eb8; }
.eg-look__optbtn { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 28px; line-height: 1.2; color: #000; }
.eg-look__opt.is-active .eg-look__optbtn { font-weight: 600; }
.eg-look__optbtn:focus-visible { outline: 2px solid #005eb8; outline-offset: 3px; }
.eg-look__optbody { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; font-size: 18px; line-height: 27px; color: rgba(0,0,0,.76); transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease; }
.eg-look__optbody p { margin: 0; }
.eg-look__opt.is-active .eg-look__optbody { max-height: 260px; opacity: 1; margin-top: 12px; }
.eg-look__media { position: relative; height: 615px; }
.eg-look__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.eg-look__img.is-active { opacity: 1; }

/* ---------- CTA BAND (site "Shapes fall" Lottie; pages-shared.js sizes the section to the SVG height) ---------- */
.eg-cta.cta-section { position: relative; background: #000; padding: 0; overflow: hidden; text-align: center; min-height: 420px; }
.eg-cta .lottie-shapes-container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; margin: 0; padding: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.eg-cta__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 72px 20px; }
.eg-cta__heading { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.15; color: #fff; margin: 0 0 26px; }
.eg-cta__heading .eg-serif { color: #efe2cf; font-weight: 500; }
.eg-cta__line2 { color: #fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .eg-hero__l1 { white-space: normal; } /* narrow column — allow natural wrap (3 lines is fine here per Pritesh) */
    .eg-craft__grid { grid-template-columns: 1fr; gap: 32px; }
    .eg-concepts__grid { grid-template-columns: 1fr; gap: 32px; }
    .eg-concept__frame { height: 320px; }
    .eg-features { flex-direction: column; }
    /* un-pin the scroll section on mobile — stack, and let the timer cycle the options */
    .eg-look { min-height: 0; }
    .eg-look__pin { position: static; min-height: 0; padding: 56px clamp(20px, 6.94vw, 100px); }
    /* Un-pinned on mobile the heading collapses straight onto the first row (desktop keeps a big
       gap via the sticky/centred flex). Restore breathing room below the heading — mobile only. */
    .eg-look__heading { margin-bottom: 32px; }
    .eg-look__cols { grid-template-columns: 1fr; gap: 40px; }
    .eg-look__media { height: 420px; }
    .eg-hero { min-height: 460px; }
    .eg-hero__inner { max-width: none; }
    .eg-hero::before { background: linear-gradient(90deg, #d8c0a1 40%, rgba(216,192,161,.4) 100%); }
}
@media (max-width: 575px) {
    .eg-craft, .eg-concepts, .eg-features, .eg-cta { padding-top: 56px; padding-bottom: 56px; }
    .eg-look__pin { padding-top: 56px; padding-bottom: 56px; }
    .eg-look__optbtn { font-size: 22px; }
    .eg-look__acc { gap: 24px; }
}