/* ============================================================
   Product page — Figma 2026 / 02 Product (node 3016:26361)
   Conditionally enqueued in functions.php when the
   "Product Template" page template is in use.
   ============================================================ */

/* Hero — Figma node 3016:26363 (dark navy variant) */
section.hero-section.product-hero.product-hero-2026 {
    background: var(--Dark-Blue, #0D1146);
    padding: 170px 0 96px;
    color: var(--White, #FFF);
}
section.hero-section.product-hero.product-hero-2026 .hero-text { color: var(--White, #FFF); max-width: 600px; }
section.hero-section.product-hero.product-hero-2026 .hero-title {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: var(--h1-size, 52px);
    font-weight: var(--h1-weight, 400);
    line-height: var(--line-height-default, 1.3);
    color: var(--White, #FFF);
    margin: 0 0 24px;
    text-wrap: wrap;        /* cancel the global .hero-title balance */
    text-wrap-style: auto;  /* natural wrap (Figma = 3 lines), not balanced */
}
section.hero-section.product-hero.product-hero-2026 .hero-subtitle {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--body-lg-size, 20px);
    font-weight: 400;
    line-height: var(--line-height-default, 1.3);
    color: var(--White, #FFF);
    margin: 0 0 32px;
    max-width: 600px;
}
/* Hero 2026 button inherits the global .btn-demo green-gradient (style.css ~line 210). */
section.hero-section.product-hero.product-hero-2026 .btn-demo { padding: 12px 24px; }

/* Optimal Energy Production Management — Figma Component 13 (node 3236:20020) */
.product-oem-section {
    background: var(--White, #FFF);
    padding: 96px 0;
}
.product-oem-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}
.product-oem-title {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: var(--h2-size, 42px);
    font-weight: var(--h2-weight, 400);
    line-height: var(--line-height-default, 1.3);
    color: var(--Dark-Blue, #0D1146);
    text-align: center;
    margin: 0;
    max-width: 1100px;
}
/* QA Jun14 — title+subtitle grouped at Figma's 29px gap (Frame 2612348). */
.product-oem-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 29px;
}
/* QA Jun9 — OEM subtitle ("A fully automated compliance…"), Poppins 18/400 centered. */
.product-oem-subtitle {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--Dark-Blue, #0D1146);
    text-align: center;
    margin: 0; /* gap handled by .product-oem-head (29px) */
    max-width: 900px;
}
.product-oem-diagram {
    width: 100%;
    max-width: 1440px;
    display: flex;
    justify-content: center;
}
.product-oem-diagram img {
    width: 100%;
    height: auto;
    max-width: 1440px;
    display: block;
}
/* 4-paragraph row matches Figma Frame 1000014664 (3516:18250):
   1px border #CFCFDA, 24px radius, 40px padding, 40px gap between columns. */
.product-oem-paragraphs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;
    /* QA Jun24 — Alina: align product sections to the 1440px grid (was 1520 outlier). */
    max-width: 1440px;
    padding: 40px;
    border: 1px solid var(--grey-CF, #CFCFDA);
    border-radius: 24px;
    box-sizing: border-box;
}
.product-oem-paragraphs p {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--Dark-Blue, #0D1146);
    margin: 0;
}
/* QA Jun14 — 4-step flow: each column is a step (title + paragraph), 16px gap (Figma). */
.product-oem-step { display: flex; flex-direction: column; gap: 16px; }
.product-oem-step-title {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--Dark-Blue, #0D1146);
    margin: 0;
}

/* The Intelligence Layer for Energy Infrastructure — Figma Component 14 (3236:19424).
   Add explicit bottom gap so subtitle doesn't sit flush against the tab strip. */
.product-intelligence-layer .section-subtitle {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--body-lg-size, 20px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--Dark-Blue, #0D1146);
    text-align: center;
    margin: 16px auto 40px;
    max-width: 840px;
}

/* Value-Added Services — Figma Product 2026 / Frame 1000014595 (3311:52686).
   Layout: full-bleed image banner on top, lavender-bg tabs panel below.
   Each tab pane is a 2-col row: lead column (title + paragraph) + 4-box grid. */
.product-vas-section { padding: 0; background: transparent; }
.product-vas-banner { width: 100%; line-height: 0; }
.product-vas-banner img,
.product-vas-banner video { display: block; width: 100%; height: 540px; object-fit: cover; }
.product-vas-inner { background: var(--BG, #EFF1FE); padding: 80px 0; }
.product-vas-section .section-title { text-align: center; margin-bottom: 40px; }
/* Match title-to-tabs gap (.section-title margin-bottom = 40px). */
.product-vas-toggle-wrapper { display: flex; justify-content: center; margin-bottom: 40px; }
/* QA Jun9 — lighten the VAS tab labels (were 600). */
.product-vas-toggle .toggle-item { font-weight: 500; }
/* QA Jun9 — mobile: restore the scroll-viewport pattern the home toggle uses;
   the centered flex wrapper made the pill clip its overflowing tabs. */
@media (max-width: 882px) {
    .product-vas-toggle-wrapper {
        display: block;
        overflow-x: auto;
        margin: 0 -15px 20px;
        padding: 0 15px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .product-vas-toggle-wrapper::-webkit-scrollbar { display: none; }
}

/* Per design: Impact section + 2-card grid + FAQ are not part of the new
   2026 Product page. Hide on this template only (file is conditionally
   enqueued so these selectors are already scoped). */
.impact-section,
.impact-items,
.faq-section { display: none !important; }

/* Support block sits too close to its neighbours with the default 20px section
   padding — give it the page's standard vertical rhythm so the navy card has
   breathing room above (Value-Added Services) and below (bottom CTA).
   Specificity bumped to `section.support-section` to beat the global rule in
   style.css :6131 (inside @media max-width 991px). */
section.support-section { padding: 96px 0; }
@media (max-width: 991px) {
    section.support-section { padding: 64px 0; }
}
@media (max-width: 768px) {
    section.support-section { padding: 48px 0; }
}
/* QA Jun24 — Figma VAS pane (Frame 2613010) moved to the 1440px grid; +48 covers the 24px side padding so the pane renders 1440px. Boxes stay ~352px via the tighter 40px padding + 80px lead-gap below (no conflict with the earlier "wider boxes"). */
.product-vas-content { max-width: 1488px; margin: 0 auto; }
.product-vas-pane { display: none; }
/* Active tab pane = white "card" (Figma Frame 2613010 → Frame 4 row). Jun24 spec:
   1440px pane, 40px padding, 80px lead↔boxes gap (Figma + Alina's card comment). */
.product-vas-pane.active {
    display: grid;
    grid-template-columns: 560px 1fr; /* Figma lead column = 560 */
    gap: 80px;
    align-items: start;
    background: var(--White, #FFF);
    border-radius: 30px;
    padding: 56px 40px; /* Figma: 40 sides, 56 top/bottom */
}
.product-vas-pane-lead {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Figma lead inner gap (icon/title/intro) = 32 */
}
.product-vas-pane-icon {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: contain;
}
.product-vas-pane-title {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: var(--h3-size, 32px);
    font-weight: 600;
    line-height: 130%;
    /* Figma: title is Dark-Green, not Dark-Blue */
    color: var(--Dark-Green, #45AC4C);
    margin: 0;
}
.product-vas-pane-lead p {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--Dark-Blue, #0D1146);
    margin: 0;
}
.product-vas-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
/* Figma box fill: linear-gradient #E9F2DA (top, opaque) → #E9F2DA (bottom, alpha 0).
   Use --green-tint-5 token with explicit alpha stops. */
.product-vas-box {
    background:
        linear-gradient(
            to bottom,
            var(--green-tint-5, #E9F2DA) 0%,
            rgba(233, 242, 218, 0) 100%
        );
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-wrap: pretty;
    text-wrap-style: pretty;
}
.product-vas-box h4 {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 130%;
    color: var(--Dark-Blue, #0D1146);
    margin: 0;
}
.product-vas-box p {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--body-sm-size, 16px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--Dark-Blue, #0D1146);
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .product-oem-paragraphs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .product-vas-pane.active { grid-template-columns: 1fr; gap: 32px; padding: 40px; border-radius: 24px; }
    .product-vas-boxes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    /* Trim the heavy 170/96 desktop hero padding for mobile viewports. */
    section.hero-section.product-hero.product-hero-2026 { padding: 120px 0 56px; }
    section.hero-section.product-hero.product-hero-2026 .hero-title { font-size: 36px; }
    section.hero-section.product-hero.product-hero-2026 .hero-subtitle { font-size: 18px; }

    .product-oem-section { padding: 56px 0; }
    .product-oem-section .container { gap: 48px; }
    .product-oem-head { gap: 16px; } /* proportionate title↔subtitle gap on mobile */
    .product-oem-title { font-size: 32px; }
    .product-oem-paragraphs { grid-template-columns: 1fr; gap: 24px; }
    .product-oem-paragraphs p { font-size: 16px; }
    /* QA Jun14 — mobile 4-step flow: tighter title, proportionate step gap */
    .product-oem-step { gap: 8px; }
    .product-oem-step-title { font-size: 20px; }

    .product-intelligence-layer .section-subtitle { font-size: 16px; max-width: 100%; }

    .product-vas-inner { padding: 48px 0; }
    .product-vas-banner img,
    .product-vas-banner video { height: 220px; }
    /* QA Jun9 "fix the padding" — Figma mobile card (Frame 2613010): pad 32/16, r 30. */
    .product-vas-pane.active { padding: 32px 16px; border-radius: 30px; }
    .product-vas-content { padding: 0; }
    .product-vas-pane-icon { width: 96px; height: 96px; }
    .product-vas-pane-title { font-size: 26px; }
    .product-vas-pane-lead p { font-size: 16px; }
    .product-vas-boxes { grid-template-columns: 1fr; }
    .product-vas-box { padding: 24px; }
    .product-vas-box h4 { font-size: 20px; }
    /* Mobile OEM: 4-paragraph row stacks; soften border + padding */
    .product-oem-paragraphs { padding: 24px; border-radius: 16px; }
}

/* ============================================================
   PRODUCT TYPE PASS — 2026-06-07 · Figma 3016:26361 (desktop)
   / 3253:52675 (mobile). Live computed styles audited against
   Figma text nodes; every rule below corrects a measured diff.
   NOTE Figma keeps Broad Portfolio / Value-added / Support at
   38/600 while OEM + Intelligence titles are 42/400.
   ============================================================ */
section.hero-section.product-hero.product-hero-2026 .btn-demo {
    font-size: 20px;            /* Figma 20/600 — was 18 */
    line-height: 130%;
}
.product-intelligence-layer .section-title {
    font-size: 42px;            /* Figma 42/400 — was 38/600 */
    font-weight: 400;
    line-height: 130%;
}
.product-intelligence-layer .section-subtitle {
    font-size: 18px;            /* Figma 18/400 lh25 — was 20/lh150% */
    line-height: 140%;
}
.product-intelligence-layer .toggle-item {
    /* Figma DESKTOP tabs are DM Sans 20/600 (mobile keeps Poppins) */
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
}
.product-vas-section .toggle-item {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
}
.product-intelligence-layer .content-title {
    font-weight: 500;           /* Figma 32/500 — was 600 */
}
.product-intelligence-layer .content-body {
    font-size: 18px;            /* Figma 18/400 lh25 — was 20 */
    line-height: 140%;
}
.benefits-section .benefit-text {
    font-size: 20px;            /* Figma card body 20/400 lh26 */
    font-weight: 400;
    line-height: 130%;
}
.details-section .detail-title {
    font-weight: 500;           /* Figma 32/500 — was 600 */
}
.product-vas-pane-title {
    font-weight: 500;           /* Figma 32/500 — was 600 */
}
.product-vas-box h4 {
    font-family: 'DM Sans', sans-serif; /* Figma DM Sans 18/600 — was Poppins 22 */
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
}
.product-vas-box p,
.product-vas-pane-lead p {
    line-height: 140%;          /* Figma lh25/18 — was 150% */
}
@media (max-width: 768px) {
    section.hero-section.product-hero.product-hero-2026 .hero-title {
        font-size: 32px;        /* Figma MB 32/400 — was 36 */
    }
    section.hero-section.product-hero.product-hero-2026 .hero-subtitle {
        line-height: 140%;      /* Figma lh25/18 */
    }
    section.hero-section.product-hero.product-hero-2026 .btn-demo {
        font-size: 18px;        /* Figma MB 18/600 */
    }
    .product-oem-title {
        font-size: 26px;        /* Figma MB 26/500 — was 32 */
        font-weight: 500;
    }
    .product-oem-paragraphs p {
        font-size: 18px;        /* Figma MB 18/400 lh25 — was 16 */
        line-height: 140%;
    }
    .product-intelligence-layer .section-title {
        font-size: 26px;        /* Figma MB 26/500 — was 32/600 */
        font-weight: 500;
        text-align: center;     /* QA Jun15 — Alina: center this header on mobile */
    }
    .product-intelligence-layer .section-subtitle {
        font-size: 18px;        /* Figma MB 18/400 — was 16 */
        line-height: 140%;
    }
    .product-intelligence-layer .toggle-item,
    .product-vas-section .toggle-item {
        /* Figma MOBILE tabs: Poppins 18/600 */
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
    }
    .product-intelligence-layer .content-title {
        font-size: 24px;        /* Figma MB 24/500 — was 22/600 */
        font-weight: 500;
    }
    .product-intelligence-layer .content-body {
        font-size: 20px;        /* Figma MB 20/400 lh26 — was 15 */
        line-height: 130%;
    }
    .benefits-section .benefit-text {
        font-size: 18px;        /* Figma MB card body 18/400 */
        line-height: 140%;
    }
    .details-section .section-title {
        font-size: 28px;        /* Figma MB 28/400 */
        font-weight: 400;
    }
    .mobile-detail-toggle {
        font-family: 'Poppins', sans-serif;
        font-size: 20px;        /* Figma MB accordion 20/600 */
        font-weight: 600;
    }
    .details-section .detail-title {
        font-size: 22px;        /* Figma MB 22/600 */
        font-weight: 600;
    }
    .product-vas-section .section-title {
        font-size: 28px;        /* Figma MB 28/400 — was 32/600 */
        font-weight: 400;
    }
    .product-vas-pane-title {
        font-size: 32px;        /* Figma MB keeps 32/500 — was 26/600 */
        font-weight: 500;
    }
    .product-vas-box h4 {
        font-size: 18px;        /* Figma MB 18/600 DM Sans — was 20 */
    }
    .product-vas-box p,
    .product-vas-pane-lead p {
        font-size: 18px;        /* Figma MB 18/400 — was 16 */
        line-height: 140%;
    }
    .support-section .support-title {
        font-size: 28px;        /* Figma MB 28/400 — was 28/600 */
        font-weight: 400;
    }
}