/* Section: feature cards. */

/* Anchored to the Figma frame (1512 x 982), and sized to sit within one
   viewport on any screen while it can.

   Two ramps, deliberately split. Spacing stays on a dual clamp — the vw leg
   hits the design px at 1512 wide, the svh leg at 982 tall, min() takes the
   tighter axis — so a short screen buys its fit out of the rhythm. Type and
   the card geometry that carries it scale on width alone, so the design's
   sizes hold on any screen at least 1512 wide and only a narrower one steps
   them down. A short screen must never trade reading size for the fold: at
   1440 x 810 the old svh leg pulled body copy to 13px and the card title to
   26px, well under the 16 / 32 the design calls for.

   The fold is a minimum, not a lock. Where even the tightened rhythm can't
   seat the content, the section grows and screen-scroll walks it in equal
   steps (see SPILL in assets/js/screen-scroll.js) rather than clipping type. */

.section-bg:has(> .section-feature-cards),
.section-bg:has(> .services-retainers.is-grid-migrated) {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) {
    /* Frame rhythm. The sticky site header floats over this section and keeps a
       fixed height, so the top inset is pinned to it (94, matching the Figma
       frame) and only the bottom inset scales with the viewport.
       The bottom inset caps at 56, not the frame's 94: the second card's
       feature list wraps to five lines at every width, which the frame doesn't
       show, and 38px of dead space below the button is the cheapest place to
       find the room. Every gap the design does show stays at its design px. */
    --fc-nav: 5.875rem;                                             /* 94 */
    --fc-nav-bottom: clamp(1.5rem, min(6.22vw, 9.57svh), 3.5rem);   /* 56 */
    --fc-space: clamp(1.25rem, min(4.23vw, 6.52svh), 4rem);         /* 64 */
    --fc-space-40: clamp(0.6rem, min(2.65vw, 4.07svh), 2.5rem);     /* 40 */
    --fc-gap-24: clamp(0.6rem, min(1.59vw, 2.44svh), 1.5rem);       /* 24 */
    --fc-gap-16: clamp(0.4rem, min(1.06vw, 1.63svh), 1rem);         /* 16 */
    --fc-gap-12: clamp(0.3rem, min(0.79vw, 1.22svh), 0.75rem);      /* 12 */
    --fc-gap-8: clamp(0.15rem, min(0.53vw, 0.81svh), 0.5rem);       /* 8 */

    /* Card geometry. Width-only, because the rail has to stay wide enough to
       seat the card title at its design size. */
    --fc-media-w: clamp(9rem, 14.81vw, 14rem);                      /* 224 */
    --fc-art: clamp(5rem, 10.58vw, 10rem);                          /* 160 */
    --fc-pad-32: clamp(1rem, 2.12vw, 2rem);                         /* 32 */
    --fc-check: clamp(1.125rem, 1.59vw, 1.5rem);                    /* 24 */

    /* Type ramp. Width-only, so the design's sizes land at 1512 and hold on
       any screen that wide whatever its height. Body copy is pinned outright:
       16px is the design's reading size and there is nothing below it worth
       trading a scroll step for. */
    --fc-display: clamp(2.5rem, 5.29vw, 5rem);                      /* 80 / 88 */
    --fc-h2: clamp(1.75rem, 3.7vw, 3.5rem);                         /* 56 / 64 */
    --fc-lead: clamp(1.125rem, 1.59vw, 1.5rem);                     /* 24 / 32 */
    --fc-h4: clamp(1.5rem, 2.12vw, 2rem);                           /* 32 / 38 */
    --fc-body: 1rem;                                                /* 16 / 24 */
    --fc-btn: clamp(1rem, 1.32vw, 1.25rem);                         /* 20 / 32 */

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--fc-nav) 0 var(--fc-nav-bottom);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--color-light-purple);
    color: var(--color-dark-purple);
    isolation: isolate;
}

/* Background pattern — bottom centre, bleeding past the fold */
:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__pattern {
    position: absolute;
    top: 78.2svh;
    left: 50%;
    z-index: 0;
    width: min(34.52vw, 53.15svh);
    aspect-ratio: 1;
    translate: -50% 0;
    opacity: 0.35;
    pointer-events: none;
    background: url("../../../../../uploads/meowgical/images/shared/grid-brand.avif") top center / contain no-repeat;
}

/* Section Grid Container */
:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: var(--fc-space) var(--fc-gap-24);
    width: 100%;
    /* Content-sized: the section's flex centring does the vertical placing, so
       the grid no longer has to stretch to the fold and squeeze its rows. */
    height: auto;
    min-height: 0;
}

/* Header. The child-combinator form outranks the legacy
   `.services-retainers > .container.grid > …` rules in services.css, which
   otherwise still claim grid-column here and on the footer. */
:is(.section-feature-cards, .services-retainers.is-grid-migrated) > .container.grid > .services-retainers__header {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    min-height: 0;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__title {
    display: flex;
    flex-direction: column;
    gap: var(--fc-gap-8);
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__title em {
    font-size: var(--fc-display);
    font-style: italic;
    line-height: 1.1;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__title span {
    font-size: var(--fc-h2);
    line-height: 1.1429;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__intro {
    width: max-content;
    max-width: 100%;
    margin: var(--fc-space-40) auto 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--fc-lead);
    font-weight: var(--fw-regular);
    line-height: 1.3334;
    letter-spacing: -0.03125em;
}

/* Cards */
:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card {
    grid-column: span 6;
    grid-row: 2;
    display: grid;
    grid-template-columns: var(--fc-media-w) minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--color-secondary);
    border-radius: 12px;
    background: var(--color-white);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fc-gap-24);
    padding: var(--fc-pad-32);
    border-right: 1px solid var(--color-secondary);
    text-align: center;
    min-width: 0;
    min-height: 0;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card--purple .services-retainer-card__media {
    background: var(--color-primary);
    color: var(--color-white);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card--pink .services-retainer-card__media {
    background: var(--color-accent-02);
    color: var(--color-dark-purple);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card--light .services-retainer-card__media {
    background: var(--color-secondary);
    color: var(--color-dark-purple);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__image {
    width: var(--fc-art);
    height: var(--fc-art);
    object-fit: contain;
    flex: 0 0 auto;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__title {
    margin: 0;
    color: currentColor;
    font-family: var(--font-display);
    font-size: var(--fc-h4);
    font-weight: var(--fw-bold);
    line-height: 1.1875;
    letter-spacing: -0.03125em;
    text-align: center;
    text-wrap: balance;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__intro {
    margin: 0;
    padding: var(--fc-gap-24);
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--fc-body);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    /* Figma holds this copy to 273px so it breaks onto two lines. */
    max-width: calc(var(--fc-body) * 17.0625 + var(--fc-gap-24) * 2);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__features {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--fc-gap-12);
    margin: 0;
    padding: var(--fc-gap-16) var(--fc-pad-32) var(--fc-gap-24);
    list-style: none;
    min-height: 0;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__features li {
    position: relative;
    padding-left: calc(var(--fc-check) + 0.3125rem);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--fc-body);
    font-weight: var(--fw-regular);
    line-height: 1.5;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--fc-check);
    height: calc(var(--fc-body) * 1.5);
    /* Reset the legacy rotated-border tick in services.css. */
    border: 0;
    transform: none;
    background: var(--color-accent-03);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9 17.5 4 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9 17.5 4 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__link {
    display: flex;
    align-items: center;
    gap: var(--fc-gap-8);
    padding: var(--fc-gap-16) var(--fc-pad-32);
    border-top: 1px solid var(--color-secondary);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--fc-body);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    text-decoration: none;
    filter: drop-shadow(0 1px 1px rgba(198, 228, 246, 0.05));
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__link:hover,
:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__link:focus-visible {
    color: var(--color-dark-purple);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__arrow {
    flex: 0 0 auto;
    width: calc(var(--fc-body) * 1.25);
    height: calc(var(--fc-body) * 1.25);
    color: var(--color-accent-03);
    transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__link:hover .services-retainer-card__arrow,
:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__link:focus-visible .services-retainer-card__arrow {
    translate: 0.25rem 0;
}

@media (prefers-reduced-motion: reduce) {
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__arrow {
        transition: none;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__link:hover .services-retainer-card__arrow,
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__link:focus-visible .services-retainer-card__arrow {
        translate: none;
    }
}

/* Footer */
:is(.section-feature-cards, .services-retainers.is-grid-migrated) > .container.grid > .services-retainers__footer {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fc-gap-16);
    text-align: center;
    flex-shrink: 0;
    min-height: 0;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__footer p {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--fc-lead);
    font-weight: var(--fw-regular);
    line-height: 1.3334;
    letter-spacing: -0.03125em;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__footer p > * {
    margin: 0;
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__footer :is(strong, b) {
    font-weight: var(--fw-bold);
}

:is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--fc-gap-16) * 0.625) var(--fc-gap-24);
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    box-shadow: 0 1px 2px rgba(198, 228, 246, 0.05);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--fc-btn);
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    letter-spacing: -0.025em;
    text-decoration: none;
}

/* Tablet: keep the two-up row, tighten the media rail. The floor is 8rem, not
   5, because the rail still has to hold "Technical Retainer" at --fc-h4. */
@media (max-width: 1024px) {
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) {
        --fc-nav-bottom: clamp(1rem, 8svh, 5rem);
        --fc-media-w: clamp(8rem, 20vw, 11rem);
        --fc-space: clamp(1rem, 3.5svh, 2.5rem);
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__intro {
        max-width: none;
    }
}

/* The header pill drops to 88px from here down. */
@media (max-width: 900px) {
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) {
        --fc-nav: 5.5rem;
    }
}

/* Phone: the section stops pretending to be one screen.
   A phone hasn't the width the type ramp needs — at 390 the display leg lands
   on its 40px floor — so the ramp goes to the shared tokens instead, the fold
   minimum comes off entirely, and the coloured rail becomes a strip across the
   top of each card so the content column gets the full measure.
   screen-scroll walks a section that outruns the viewport in equal steps (see
   SPILL in assets/js/screen-scroll.js), so growing past one screen costs the
   stepping nothing. */
@media (max-width: 767px) {
    .section-bg:has(> .section-feature-cards),
    .section-bg:has(> .services-retainers.is-grid-migrated) {
        min-height: 0;
        overflow: visible;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) {
        --fc-space: 2.25rem;
        --fc-space-40: 1.25rem;
        --fc-gap-24: 1rem;
        --fc-gap-16: 0.75rem;
        --fc-gap-12: 0.625rem;
        --fc-gap-8: 0.5rem;
        --fc-art: 4rem;
        --fc-pad-32: 1.25rem;
        --fc-check: 1.125rem;

        --fc-display: var(--text-title2);
        --fc-h2: var(--text-title4);
        --fc-lead: var(--text-body);
        --fc-h4: var(--text-title5);
        --fc-body: var(--text-body);
        --fc-btn: var(--text-body);

        min-height: 0;
        padding: var(--fc-nav) 0 3.5rem;
        overflow: visible;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-rows: auto;
        align-content: start;
        row-gap: var(--fc-space);
    }

    /* Source order is header, card, card, footer, so auto placement is the
       running order once every child owns the single column. */
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) > .container.grid > :is(.services-retainers__header, .services-retainers__footer),
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__intro {
        width: auto;
    }

    /* Rail to strip: the art and the label sit side by side across the top,
       which costs a fraction of the height a stacked rail would. */
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__media {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        padding: 0.875rem var(--fc-pad-32);
        border-right: 0;
        border-bottom: 1px solid var(--color-secondary);
        text-align: left;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__title {
        text-align: left;
        text-wrap: pretty;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__content {
        grid-template-rows: auto auto auto;
        overflow: visible;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card__intro {
        padding: var(--fc-gap-16) var(--fc-pad-32);
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__pattern {
        top: auto;
        bottom: -4rem;
        width: min(60vw, 15rem);
    }
}

/* Short laptop viewports — anything under the 982 frame height, which is most
   laptops once browser chrome is off the top. The type ramp no longer gives
   any height back, so the whole rhythm does: the bottom inset comes in first
   (it is dead space), then the row gaps, then the padding inside the cards.
   The top inset can't move, since it is pinned to the floating header.
   At 1440 x 810 this seats the full section with room to spare. */
@media (min-width: 768px) and (max-height: 981px) {
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) {
        --fc-nav-bottom: clamp(1rem, 4svh, 2.5rem);
        --fc-space: clamp(1rem, 2.6svh, 1.75rem);
        --fc-space-40: clamp(0.5rem, 1.8svh, 1.25rem);
        --fc-gap-24: clamp(0.75rem, 2svh, 1.25rem);
        --fc-gap-16: clamp(0.5rem, 1.4svh, 0.875rem);
        --fc-gap-12: clamp(0.375rem, 1svh, 0.625rem);
    }
}

/* Very short screens (landscape phones / small laptops) */
@media (max-height: 600px) {
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) {
        --fc-nav-bottom: clamp(0.75rem, 4svh, 2rem);
        --fc-space: 0.5rem;
    }
}

/* Landscape on a wide-enough screen: back to the two-up row, since the height
   is the scarce axis there and the phone block above only owns widths under
   768 now. */
@media (min-width: 768px) and (max-height: 520px) {
    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto auto !important;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainer-card {
        grid-column: span 6 !important;
        grid-row: 2 !important;
    }

    :is(.section-feature-cards, .services-retainers.is-grid-migrated) .services-retainers__intro {
        display: none;
    }
}