/* ============================================================
   Tech & Platforms hub - page-level CSS (T6)
   Figma: desktop 1331:136702, mobile 1331:137070 (no tablet frame, so
   768 to 1024 follows the mobile frame and the section classes' own
   tablet rules).

   The section classes carry their own look and gutters; this file holds
   the hero's per-page curve and the page's vertical rhythm (the
   neighbouring-background rule: --space-section when the neighbour's
   background matches, --space-section-alt when it differs).
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────────
   The Tech frame (1331:136702) is a taller hub hero than the Ancillary one
   the hub variant is built to: 721 high, the eyebrow at y151, and the curve
   centred at 68.19% of the width (982 of 1440) over a photo layer at y-59.
   Desktop only: tablet and mobile follow the hub variant's own rules. */
@media (min-width: 1025px) {
    .tech .page-hero--hub {
        min-height: 721px;
        padding-top: 151px;
    }
    .tech .page-hero--hub .page-hero__bg {
        top: -59px;
        clip-path: ellipse(100% 720px at 68.19% 38px);
    }
    /* The frame's box is 750 wide, but Futura breaks the heading after "Built To";
       the web font sets it a little narrower, so cap the line at 720 to match */
    .tech .page-hero--hub .page-hero__heading { max-width: 720px; }
    /* The lead is Body in Text, 20 above the buttons. The frame breaks it after
       "claims" (a hard break in the text), so the line is capped at 680 */
    .tech .page-hero--hub .page-hero__lead {
        max-width: 680px;
        margin-bottom: 20px;
        color: var(--color-text);
    }
}

/* Mobile (1331:137070): a 627 hero, the circle's centre at 78.4% of the width
   and its bottom at 627, over a 782 photo layer starting at y-132 (the same
   mobile hero as the Claims hub). Tablet keeps the hub variant's own tablet
   rules (there is no Tech tablet frame). */
@media (max-width: 767px) {
    .tech .page-hero--hub { min-height: 627px; }
    .tech .page-hero--hub .page-hero__bg {
        top: -132px;
        height: 782px;
        clip-path: ellipse(183.2% 720px at 78.4% 39px);
    }
}

/* A platform block that keeps its photo on mobile (Reporting & MI, 1962:64628)
   shows it first: inside the gutters, 240 high, rounded all round, 24 above
   the eyebrow. The class's own mobile layout puts it last, bled to the edge */
@media (max-width: 767px) {
    .tech__section--media-first .feature-overview__media {
        grid-column: content-start / content-end;
        grid-row: 1;
        margin: 0 0 24px;   /* the mobile grid has no row gap */
    }
    .tech__section--media-first .feature-overview__image {
        height: 240px;
        aspect-ratio: auto;
        border-radius: 16px;
    }
    .tech__section--media-first .feature-overview__head { grid-row: 2; }
    .tech__section--media-first .feature-overview__features,
    .tech__section--media-first .feature-overview__more { grid-row: 3; }
}

/* ── Section spacing ──────────────────────────────────────── */
/* "Why partners choose Coplus" and the "Trusted by" strip are one white band:
   40 above, 40 between the cards and the logos, 80 below */
.tech__section--why { padding-top: var(--space-section); padding-bottom: 0; }
.tech__section--logos { padding-top: var(--space-section); padding-bottom: var(--space-section-alt); }
/* Every band after that differs from its neighbours (navy, cream, white, tint,
   white, tint), so 80 above and below (48 on tablet and mobile) */
.tech__section--platform,
.tech__section--models,
.tech__section--cases,
.tech__section--also {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}
/* Two cream platform blocks in a row (YourSpace, then Reporting & MI) share a
   background, so the same-background spacing between them. The frame keeps
   80 + 80 there (1962:25273); the house rule wins (logged, D84) */
.tech__section--platform.feature-overview--cream:has(+ .tech__section--platform.feature-overview--cream) { padding-bottom: var(--space-section); }
.tech__section--platform.feature-overview--cream + .tech__section--platform.feature-overview--cream { padding-top: var(--space-section); }
/* The persona band: the gallery class reserves the photos' pop-out space above
   and below its cards (423 tall for a 377 card), so the frame's 80 comes to 59 */
.tech__section--personas { padding-top: 59px; padding-bottom: 59px; }
@media (max-width: 1024px) {
    .tech__section--personas { padding-top: var(--space-section-alt); padding-bottom: var(--space-section-alt); }
}
/* Full-bleed: the AI panel pads itself */
.tech__section--ai { padding: 0; }