/* Case study card tweaks layered on top of style.css */

/* Bigger metric — design's 1.5rem reads small at this size of card */
.case-grid .case-card__metric-value {
    font-size: 2.5rem;
    line-height: 1;
}
.case-grid .case-card__metric-label {
    font-size: 1rem;
}

/* Coral-tinted tags */
.case-grid .case-card__tag {
    background: var(--coral, #f6ab93);
    color: var(--dark-blue, #003845);
}

/* Extra breathing room between the metric line and the Read More pill */
.case-grid .case-card__body {
    padding-bottom: 43px;
}

/* Trim the section's top padding above the filter bar */
#case-grid.section {
    padding-top: 48px;
}

/* Bigger client logos on the cards (roughly 2x the design default) */
.case-grid .case-card__logo img {
    max-height: 88px;
    max-width: 400px;
}

/* Slightly larger titles + excerpts on tiles */
.case-grid .case-card__title {
    font-size: 1.4rem;
}
.case-grid .case-card__excerpt {
    font-size: 1.1875rem;
}
.case-grid .case-card__date {
    font-size: 0.9375rem;
    color: var(--text-light);
    margin: -8px 0 12px;
}

/* Talk-to-Us pill over the dark case-study/insight hero — flip to white
   pill with brand-green text. Reverts to default coral pill once the user
   has scrolled past the hero (same `scrolled-past-green-header` toggle
   that flips the logo + menu colours). Scoped to case-studies.css so
   internal green pages still get their default coral CTA. */
.nav__cta {
    /* Slow colour fade for the scroll-past-green-header flip; standard 0.3s
       cubic-bezier for transform + shadow so hover lift matches other buttons
       (.btn base uses `transition: all var(--transition)` = 0.3s, but our
       longer-property list above would otherwise replace that and leave the
       hover lift unanimated/instant). */
    transition: background 0.45s ease,
                color 0.45s ease,
                border-color 0.45s ease,
                transform var(--transition),
                box-shadow var(--transition);
}
body.body--green-header:not(.scrolled-past-green-header) .nav__cta {
    background: #ffffff;
    color: var(--primary);
    border-color: #ffffff;
}
body.body--green-header:not(.scrolled-past-green-header) .nav__cta:hover {
    background: var(--coral);
    color: var(--dark-blue, #003845);
    border-color: var(--coral);
}

/* =====================================================================
   Case Study HERO — image background + green-to-coral tint, dot animation
   on top, optional summary tile overhanging the bottom-right.
   ===================================================================== */

.case-study-hero {
    position: relative;
    /* Override internal-hero--green's solid dark-green bg so the image
       shows through. The bg colour is still the fallback when no image. */
    background: var(--primary-dark);
}

/* Image bg layer — sits behind the dot animation. */
.case-study-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.case-study-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Green → primary → coral diagonal gradient — matches the .case-card__overlay--blend
   tint used on the case-study listing cards so the case study page header
   feels like an enlarged version of its listing card.
   Layered over an extra horizontal dark vignette that adds opacity on the
   LEFT specifically, so the title + subheading stay legible against a busy
   underlying image without dimming the right side (where the summary tile
   sits on case studies). */
.case-study-hero__tint {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 24, 20, 0.45) 0%,
            rgba(0, 24, 20, 0.22) 45%,
            rgba(0, 24, 20, 0) 75%),
        linear-gradient(
            135deg,
            rgba(2, 61, 54, 0.78) 0%,
            rgba(3, 88, 78, 0.6) 50%,
            rgba(246, 171, 147, 0.5) 100%);
}

/* Dot animation canvas + top fade sit above the image. */
.case-study-hero .hero__bg {
    z-index: 1;
}

/* Container content sits above the dots. */
.case-study-hero > .container {
    position: relative;
    z-index: 2;
}

/* 2-column layout — title/left content left, optional summary tile right.
   Tile uses align-items: end so it anchors to the bottom of the hero
   (with a negative margin pulling it past the section edge). */
.case-study-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: end;
}
/* When a summary tile is present, reserve the right column even though
   the tile itself lives in the green section below — its top portion
   overhangs UP into this space. Title gets the left 2/3 only so it
   doesn't run under the tile. */
.case-study-hero--has-tile .case-study-hero__inner {
    grid-template-columns: 2fr 1fr;
}

.case-study-hero__left {
    /* Title + left-content sit at the top of the hero (the section's own
       padding pushes them down beneath the nav). */
    align-self: start;
    color: #ffffff;
}
.case-study-hero__left h1 {
    color: #ffffff;
    /* Drop the warm-bg drop-shadow halo that internal-header.css applies
       — we want crisp white on the tinted image, not glow. */
    filter: none;
    margin: 0 0 20px;
}
/* Green section directly below the hero — hosts the leftContent RTE on
   the left and provides the green strip the summary tile overhangs into. */
.case-study-body--green {
    background: var(--primary);
    padding: 80px 0;
    color: #ffffff;
}
.case-study-body__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
.case-study-body--with-tile .case-study-body__grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
}

/* leftContent typography — mirrors Content Grid Section RTE styling
   (heading sizes, coral bullets, paragraph rhythm). Duplicated here
   instead of reusing the `.content-grid` class because that container
   forces a 12-col grid layout that breaks a single RTE child. */
.case-study-body__left .rte-content {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.3125rem;
    line-height: 1.55;
}
.case-study-body__left .rte-content > *:first-child { margin-top: 0; }
.case-study-body__left .rte-content > *:last-child { margin-bottom: 0; }

.case-study-body__left .rte-content h2 {
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: #ffffff;
    line-height: 1.2;
}
.case-study-body__left .rte-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 24px 0 12px;
    color: #ffffff;
    line-height: 1.25;
}
.case-study-body__left .rte-content h4 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 20px 0 10px;
    color: #ffffff;
    line-height: 1.3;
}
.case-study-body__left .rte-content p {
    margin: 0 0 16px;
}

/* Bullet lists with the coral bullet dot from Content Grid Section. */
.case-study-body__left .rte-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.case-study-body__left .rte-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 3px;
    line-height: 1.55;
}
.case-study-body__left .rte-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--coral);
}
.case-study-body__left .rte-content ol {
    list-style: decimal;
    padding-left: 24px;
    margin: 0 0 16px;
}
.case-study-body__left .rte-content ol li {
    margin-bottom: 3px;
    line-height: 1.55;
}
.case-study-body__left .rte-content ol li::marker {
    color: var(--coral);
    font-weight: 700;
}

/* =====================================================================
   Back-to-Case-Studies pill
   Sits on the boundary between the last content section and whatever
   follows (CTA / footer). Zero-height wrapper keeps the next section
   flush with the boundary; the pill itself translates -50% so its centre
   lands exactly on that line, giving a 50% overlap into the next section.
   Matches .about-jump size + radius so it visually rhymes with the jump
   links used in Internal Page Headers.
   ===================================================================== */
.case-study-back {
    position: relative;
    height: 0;
    z-index: 5;
}
.case-study-back .container {
    /* Anchor the pill to the LEFT of the container (matches the jump-link
       position at the left of an internal header). */
    display: flex;
    justify-content: flex-start;
}
.case-study-back__pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 40px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 32px;
    border-radius: 60px;
    background: var(--coral, #f6ab93);
    color: var(--dark-blue, #003845);
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(246, 171, 147, 0.35);
    transform: translateY(-50%);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.case-study-back__pill:hover {
    /* Preserve the -50% positioning while adding a small lift. */
    transform: translateY(calc(-50% - 3px));
    box-shadow: 0 14px 32px rgba(246, 171, 147, 0.5);
    background: var(--coral-dark, #e8987f);
}
.case-study-back__arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Mobile: collapse the two-column hero + green section to a single
   stacked column, and drop the tile's negative top margin so it sits
   cleanly below the title rather than awkwardly overlapping a stacked
   layout. */
@media (max-width: 900px) {
    .case-study-hero--has-tile .case-study-hero__inner {
        grid-template-columns: 1fr;
    }
    .case-study-body--with-tile .case-study-body__grid {
        grid-template-columns: 1fr;
    }
    .case-study-hero__tile {
        margin-top: 0;
    }
}

/* Summary tile — white panel that lives in the green section but
   overhangs UP into the hero by 80px (matches the contact form pattern).
   The section's `padding-top: 80px` would otherwise just consume an 80px
   negative margin, so we use -160px (-80 to cancel that padding + -80
   to actually spill into the hero). */
.case-study-hero__tile {
    background: var(--bg-white, #ffffff);
    color: var(--text-body);
    border-radius: var(--radius, 16px);
    padding: 36px 40px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
    margin-top: -160px;
    position: relative;
    z-index: 5;
}
/* Tile text — brand dark green throughout. The parent `.case-study-body--green`
   sets the section's color to #fff which would otherwise cascade into the
   white tile (white-on-white), so we re-state the colour here. */
.case-study-hero__tile,
.case-study-hero__tile .rte-content,
.case-study-hero__tile .rte-content p,
.case-study-hero__tile .rte-content li,
.case-study-hero__tile .rte-content a {
    color: var(--primary, #03584E);
}
.case-study-hero__tile .rte-content h2,
.case-study-hero__tile .rte-content h3,
.case-study-hero__tile .rte-content h4 {
    color: var(--primary, #03584E);
}
.case-study-hero__tile .rte-content {
    font-size: 1.25rem;
    line-height: 1.55;
}
.case-study-hero__tile .rte-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.2;
}
.case-study-hero__tile .rte-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 18px 0 10px;
}
.case-study-hero__tile .rte-content p {
    margin: 0 0 12px;
}
.case-study-hero__tile .rte-content p:last-child {
    margin-bottom: 0;
}

/* Mobile: the earlier @media block at the top of this file ALSO tries
   to reset .case-study-hero__tile margin-top to 0, but it sits BEFORE
   the base rule above (which sets margin-top:-160px). Same specificity
   → source order wins → the -160px takes precedence even on mobile,
   pulling the tile up over the end of the left content paragraph.
   Re-declaring the mobile override here (after the base) ensures the
   cascade lands the right way. */
@media (max-width: 900px) {
    .case-study-hero__tile {
        margin-top: 0;
    }
}