.waic-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    text-align: center;
}

.waic-header {
    max-width: 700px;
    margin: 0 auto 40px;
}

.waic-heading {
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #005da5;
    margin: 0 0 16px;
}

.waic-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 20px;
}

.waic-divider .waic-line {
    width: 60px;
    height: 2px;
    background: #005da5;
    display: inline-block;
}

.waic-divider .waic-star {
    color: #005da5;
    line-height: 0;
    display: inline-flex;
    align-items: center;
}

.waic-divider .waic-star img.waic-divider-logo {
    width: 22px;
    height: 22px;
    display: block;
}

.waic-subtext {
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.waic-subtext strong {
    color: #b5121b;
}

.waic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.waic-card {
    position: relative;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    background-color: #111;
    transition: transform .2s ease, box-shadow .2s ease;
}

.waic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.waic-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.waic-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,10,20,.95) 0%, rgba(0,10,20,.8) 35%, rgba(0,10,20,.4) 65%, rgba(0,10,20,0) 92%);
}

.waic-card-content {
    position: relative;
    z-index: 1;
    padding: 24px;
    color: #fff;
}

.waic-card-title {
    /* Sized against Wounded Warrior Project's cards: their title cap-height
       runs about 1.85x the 18px body copy, which lands on 32px. Weight is
       bold rather than extra-bold, and the gap under it is wider than the
       10px we had. */
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.15;
    margin: 0 0 16px;
    text-transform: uppercase;
    /* Opt-in via title_lines="N" on the shortcode. Reserves N lines so the
       copy beneath starts level across a row. Resolves to 0 when unset. */
    min-height: calc(var(--waic-title-lines, 0) * 1.15em);
}

.waic-card-desc {
    /* Matched to Wounded Warrior Project's card copy: 18px Montserrat,
       #FFFFFF, ~1.4 line-height. One rule for every variant — the three
       near-identical copies this replaced were why card copy didn't look
       consistent between the dark, tint and light sections. */
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    margin: 0 0 16px;
    color: #ffffff;
}

.waic-card-arrow {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 1rem;
    transition: background .2s ease, color .2s ease, transform .1s ease;
}

.waic-card:hover .waic-card-arrow,
.waic-card:focus-visible .waic-card-arrow {
    background: #fff;
    color: #111;
}

.waic-card-dark:active .waic-card-arrow {
    background: #d9d9d9;
    color: #111;
    transform: translateY(1px);
}

.waic-card-dark:active {
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .waic-grid {
        grid-template-columns: 1fr;
    }
    .waic-card-dark,
    .waic-card-tint {
        min-height: 340px;
    }
    .waic-card-title {
        font-size: 26px;
    }
}

/* ==========================================================================
   LIGHT VARIANT (plain white cards, e.g. "Welcome to White Apple Institute")
   ========================================================================== */

.waic-section-light {
    background: #d7e6f5;
}

.waic-section-light .waic-heading {
    color: #1a2b4c;
    text-transform: none;
}

.waic-section-light .waic-subtext {
    color: #333;
}

.waic-card-light {
    background: #fff;
    border-radius: 6px;
    padding: 32px;
    box-shadow: none;
    min-height: 0;
    /* Same reasoning as the tint cards: column layout so headings align at
       the top and the "learn more" links align at the bottom. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.waic-card-light .waic-card-link {
    margin-top: auto;
}

.waic-card-light:hover {
    transform: none;
    box-shadow: none;
}

.waic-card-light .waic-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a2b4c;
    text-transform: none;
    margin: 0 0 16px;
}

.waic-card-light .waic-card-desc {
    /* Same 18px as the dark cards; only the colour differs, since white on a
       white card would be invisible. */
    color: #3a4a5c;
    margin: 0 0 24px;
}

.waic-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #2563eb;
    text-decoration: none;
    transition: opacity .2s ease, transform .1s ease;
}

.waic-card-link:hover,
.waic-card-link:focus-visible {
    text-decoration: underline;
}

.waic-card-link:active {
    opacity: .7;
    transform: translateY(1px);
}

/* ==========================================================================
   TINT VARIANT (duotone image + centered pill button, e.g. WWP style)
   ========================================================================== */

.waic-card-tint {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: #222;
    transition: transform .2s ease;
}

.waic-card-tint:hover {
    transform: translateY(-4px);
}

.waic-card-tint .waic-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.waic-card-tint-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Flat colour at low opacity with no blend mode, matching Wounded Warrior
       Project's .overlay-layer { opacity: .4 }. mix-blend-mode: multiply was
       compounding the tint with the photograph's own darkness, which is why
       these read muddy where theirs stay vivid. Tunable per render with
       overlay_opacity="N" on the shortcode. */
    opacity: var(--waic-tint-opacity, .4);
}

/* The content block fills the card and becomes its own column, so the title
   sits at the top of every card regardless of how long the copy is, and the
   pill is pushed to the bottom by the auto margin below. Previously the whole
   block was bottom-anchored, which aligned the buttons but left the titles
   starting at three different heights. */
.waic-card-tint-content {
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    color: #fff;
    /* Carries the legibility now the overlays are this light — contrast sits
       right behind the glyphs instead of across the whole photograph. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.waic-card-tint-content .waic-card-desc {
    margin-bottom: 24px;
}

.waic-card-tint-content .waic-card-pill {
    margin-top: auto;
}

/* Top-aligned copy can land over a bright part of the photo, so the tint
   card gets a full-height scrim under the text as well as the colour tint. */
.waic-card-tint::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Now that the tint no longer multiplies, this is the only thing holding
       the copy — these cards carry a title, a paragraph and a button, where
       WWP's carry a button alone and need no scrim at all. Weighted to the
       top and bottom where the text sits; the middle stays open. */
    background: linear-gradient(to bottom, rgba(6, 10, 16, .30) 0%, rgba(6, 10, 16, .12) 42%, rgba(6, 10, 16, .42) 100%);
}

.waic-card-tint-content .waic-card-title {
    /* Colour only. Size, weight, spacing and margin all come from the base
       .waic-card-title rule so tint cards can't drift from dark ones again. */
    color: #fff;
}

.waic-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .1s ease, backdrop-filter .2s ease;
}

/* Hover lightens rather than darkens — a translucent white wash over
   whatever photo is behind, so the button reads as lifting toward you along
   with the card. Going darker made it recede while the card came forward. */
.waic-card-tint:hover .waic-card-pill,
.waic-card-tint:focus-visible .waic-card-pill {
    background: rgba(255,255,255,.22);
    border-color: #fff;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Pressed: more white still, and a 1px drop so the click has somewhere to
   land. Without it there was nothing between hover and navigation. */
.waic-card-tint:active .waic-card-pill {
    background: rgba(255,255,255,.34);
    border-color: #fff;
    transform: translateY(1px);
}

.waic-card-tint:active {
    transform: translateY(-1px);
}

/* Keyboard focus. :focus-visible only fires for keyboard users, so mouse
   clicks don't get a ring. */
.waic-card-tint:focus-visible,
.waic-card-dark:focus-visible,
.waic-card-light .waic-card-link:focus-visible {
    outline: 3px solid #005da5;
    outline-offset: 3px;
}

/* ==========================================================================
   PLAY ICON — added automatically when a card links to YouTube

   The pill keeps its original outlined treatment; the icon is the only
   change, sitting to the left of the label and inheriting its colour.
   ========================================================================== */

.waic-play-icon {
    width: 12px;
    height: 14px;
    flex: 0 0 auto;
    display: block;
}

.waic-card-link-youtube {
    align-items: center;
    gap: 8px;
}

.waic-card-link-youtube .waic-play-icon {
    width: 11px;
    height: 13px;
}

/* ==========================================================================
   STORY GROUP ONLY — Option B readability upgrade
   Adds a strong dark scrim behind the text (on top of the color tint) plus a
   text-shadow, so copy stays readable over busy photos. Scoped to
   .waic-group-story so the DONATE / FUNDRAISE / SHARE cards are untouched.
   ========================================================================== */
.waic-group-story .waic-card-tint-content,
.waic-group-story .waic-card-content {
    padding-top: 66px;
    background: linear-gradient(
        to top,
        rgba(6, 10, 16, .94) 0%,
        rgba(6, 10, 16, .86) 38%,
        rgba(6, 10, 16, .45) 68%,
        rgba(6, 10, 16, 0) 100%
    );
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.waic-group-story .waic-card-tint-content .waic-card-desc,
.waic-group-story .waic-card-content .waic-card-desc {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .waic-card,
    .waic-card:hover,
    .waic-card:active,
    .waic-card-pill,
    .waic-card-arrow,
    .waic-card-link {
        transition: none;
        transform: none;
    }
}