/* Vertical Scroll Lock Section — overrides for the default .approach styling.
   .approach's baked-in background is var(--primary-dark). When the editor
   picks a different background from the dropdown we override here. */

/* Trim a little off the scroll-area height to reduce empty space below the
   final tile (default is 600vh, which leaves a tail of unused scroll). */
.approach .approach__scroll-area {
    height: 500vh;
}

.approach.section--white { background: var(--bg-white); }
.approach.section--warm  { background: var(--bg-warm); }
.approach.section--deep  { background: var(--primary-dark); } /* same as default — explicit for consistency */

/* Light-bg variants need text colour adjustments because .approach__tile-* has light defaults */
.approach.section--white .approach__header h2,
.approach.section--warm  .approach__header h2,
.approach.section--white .approach__tile-desc,
.approach.section--warm  .approach__tile-desc {
    color: var(--text-body);
}
.approach.section--white .approach__header .label,
.approach.section--warm  .approach__header .label {
    color: var(--primary);
}
/* Progress dots — the base inactive colour is translucent white, which
   disappears on grey/white section backgrounds. Swap to translucent
   dark-blue so the inactive dots stay visible. Scoped to :not(.active)
   so style.css's `.approach__dot.active { background: var(--coral) }`
   still wins on the active dot (without :not, this selector is 0,3,0 vs
   the active rule's 0,2,0 and would override it). */
.approach.section--white .approach__dot:not(.active),
.approach.section--warm  .approach__dot:not(.active) {
    background: rgba(0, 56, 69, 0.25);
}
/* Note: badge text colour is NOT overridden per-bg variant — the base rule
   in style.css sets it to var(--dark-blue), which reads correctly against
   the coral pill on every section background (white, warm, deep). An
   earlier override forced it to var(--primary) on light backgrounds, which
   came out green-on-coral and lost the brand blue-grey. */

/* Tiles always have a white background regardless of section bg, so tile
   text must always be dark — override the section-level white-text rules
   that .section--deep applies globally. */
.approach .approach__tile-desc {
    color: var(--text-heading);
}
.approach .approach__tile-desc .accent {
    /* The .accent gradient text styling is set in style.css; keep it. */
    color: transparent;
}

/* Force the green → coral diagonal tint over every vertical-scroll-lock
   image, matching the case-study hero / content-grid image-block tint so
   the brand language carries through the site. The ::after is centred on
   the visual container and sized to the same 88%/82% the img uses, so it
   overlays the image exactly (the coral side accent at right:16px sits
   outside this overlay and stays visible). z-index:2 puts it above the
   img (z-index:1); the accent is auto and renders after, so it lands on
   top of both as intended. */
.approach__tile-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* The img's 88%/82% resolve against the flex content box (visual
       width minus 64px horizontal padding / minus 64px vertical padding).
       The ::after's % resolve against the visual's padding box (= the
       full visual width, since no border). Subtract the padding here so
       the overlay matches the img's actual size. */
    width: calc((100% - 64px) * 0.88);
    height: calc((100% - 64px) * 0.82);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg,
        rgba(2, 61, 54, 0.78) 0%,
        rgba(3, 88, 78, 0.6) 50%,
        rgba(246, 171, 147, 0.5) 100%);
    pointer-events: none;
    z-index: 2;
}