/* ============================================================
   THREE-CARD GRID MODULE v1.6
   A 3 x 3 card grid, rebuilt from the old Houdini Window
   Bootstrap layout (col-12 col-lg-4 cards) without Bootstrap.
   Architecture: eggshell section | 1280px container |
   3 columns on desktop | below 992px, a full-width hero card
   with two columns beneath (BBC style).

   Each card: 16:9 image, a caption heading and a short
   description. The whole card is clickable through the
   caption's link.

   Hover and keyboard focus: a soft phosphor glow around the card,
   fading in over a quarter of a second. The glow colour comes
   from --card-glow, so each site can set its own in site.css.

   v1.0: Built for houdiniwindow.com, ready to harvest into the
         kit as an optional module.
   v1.1: Cards simplified to image and caption only. The caption
         is the link, and it stretches over the whole card. Old
         description and button styles removed.
   v1.2: Caption heading reduced to 20px. Short description text
         re-introduced beneath it.
   v1.3: Hover glow tightened and softened: a fine green edge with
         a short, faint halo.
   v1.4: BBC-style layout below 992px: the first card becomes a
         full-width hero, the rest sit in two columns. On phones the
         type is scaled down and the small cards' descriptions are
         trimmed to two lines, so the caption area stays shallow.
   v1.5: Hover sequence reversed: the fine green outline appears
         first, then the glow lights up, so the card reads as
         switching on and ready to click.
   v1.6: Longer pause between outline and glow. Caption colour
         lightens on hover (--card-title-hover), timed to light up
         with the glow.
   ============================================================ */

:root {
    --card-glow: #20c20e;
    --card-title-colour: #116ce7;
    --card-title-hover: #116ce7;
    --card-text-colour: #333333;
}

/* --- 1. THE SECTION --- */
.card-grid-section {
    background-color: var(--stone-bg, #f5f5ef);
    padding: 40px 0 80px 0;
}

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

/* --- 2. THE CARD --- */
.grid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px #0000000d;
    transition: box-shadow 0.25s ease-in-out;
}

.grid-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.grid-card-caption {
    padding: 16px 20px;
}

.grid-card-caption h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 6px 0;
}

.grid-card-caption p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--card-text-colour);
    margin: 0;
}

/* --- 3. THE CAPTION LINK --- */
/* The caption is the link; it stretches over the whole card */
.grid-card-caption a {
    color: var(--card-title-colour);
    text-decoration: none;
    transition: color 0.3s ease-out;
}

/* The caption lights up with the glow, after the outline */
.grid-card:hover .grid-card-caption a,
.grid-card:focus-within .grid-card-caption a {
    color: var(--card-title-hover);
    transition-delay: 0.45s;
}

.grid-card-caption a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* --- 4. HOVER AND KEYBOARD FOCUS: THE PHOSPHOR GLOW --- */
.grid-card:hover,
.grid-card:focus-within {
    box-shadow: 0 4px 15px #0000000d, 0 0 0 1px var(--card-glow), 0 0 6px #20c20e59;
    animation: card-light-up 0.9s ease-out;
}

/* Outline first, then the glow: the card switches on */
@keyframes card-light-up {
    0% {
        box-shadow: 0 4px 15px #0000000d, 0 0 0 1px var(--card-glow), 0 0 0 #20c20e00;
    }
    50% {
        box-shadow: 0 4px 15px #0000000d, 0 0 0 1px var(--card-glow), 0 0 0 #20c20e00;
    }
    100% {
        box-shadow: 0 4px 15px #0000000d, 0 0 0 1px var(--card-glow), 0 0 6px #20c20e59;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grid-card:hover,
    .grid-card:focus-within {
        animation: none;
    }

    .grid-card:hover .grid-card-caption a,
    .grid-card:focus-within .grid-card-caption a {
        transition-delay: 0s;
    }
}

.grid-card-caption a:focus-visible {
    outline: 2px solid var(--card-glow);
    outline-offset: 2px;
}

/* --- 5. RESPONSIVE: BBC-STYLE HERO AND TWO COLUMNS --- */

/* Tablets and phones: first card full width, the rest in two columns */
@media (max-width: 991px) {
    .card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .card-grid-3 .grid-card:first-child {
        grid-column: span 2;
    }
}

/* Phones: smaller type and shallower captions */
@media (max-width: 600px) {
    .card-grid-section {
        padding: 20px 0 40px 0;
    }

    .card-grid-3 {
        gap: 12px;
    }

    .grid-card-caption {
        padding: 10px 12px 12px 12px;
    }

    .grid-card-caption h2 {
        font-size: 15px;
        margin: 0 0 4px 0;
    }

    .grid-card-caption p {
        font-size: 13px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    /* The hero card keeps a larger caption and its full description */
    .card-grid-3 .grid-card:first-child .grid-card-caption {
        padding: 14px 16px 16px 16px;
    }

    .card-grid-3 .grid-card:first-child h2 {
        font-size: 20px;
    }

    .card-grid-3 .grid-card:first-child p {
        font-size: 14px;
        display: block;
        overflow: visible;
    }
}