/**
 * @file
 * Numbered Card Grid Component
 *
 * A responsive grid of shadow-only cards, each with an oversized outline
 * numeral, title, description, and an optional italic element list.
 * Perfect for frameworks, step lists, block explanations.
 *
 * Widths are set per card via `.numbered-card--span-{n}` (n = 3, 4, 6, 8, 12
 * columns on desktop). Default is span-4 (three per row).
 *
 * USAGE:
 *   <ul class="numbered-card-grid">
 *     <li class="numbered-card">
 *       <span class="numbered-card__num">01</span>
 *       <h3 class="numbered-card__title">Brand Vision</h3>
 *       <p class="numbered-card__body">Question or description.</p>
 *       <p class="numbered-card__elements">Mission · Purpose · Vision</p>
 *     </li>
 *     …
 *     <li class="numbered-card numbered-card--wide numbered-card--span-8">…</li>
 *   </ul>
 */

.numbered-card-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(12, 1fr);
}

/* Card */
.numbered-card {
    grid-column: span 4;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-surface-base);
    border-radius: var(--radius-lg, 1rem);
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: var(--card-shadow-base);
    transition: var(--card-transition);
    text-align: center;
}

/* Top gradient accent bar — a hint of the brand's Smaragd–Aquamarin */
.numbered-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-primary-deep) 20%,
        var(--color-primary) 50%,
        var(--color-primary-deep) 80%,
        transparent 100%
    );
}

.numbered-card:hover {
    transform: translateY(var(--card-lift-y, -4px));
    box-shadow: var(--card-shadow-hover);
}

/* Oversized outline numeral in brand teal */
.numbered-card__num {
    display: block;
    font-family: var(--font-family-heading, inherit);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    -webkit-text-stroke: 1.5px var(--color-primary);
    color: transparent;
    margin: 0 0 0.5rem;
    transition: color 0.3s ease;
}

.numbered-card:hover .numbered-card__num {
    color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.numbered-card__title {
    font-family: var(--font-family-heading, inherit);
    font-size: 1.375rem;
    line-height: 1.25;
    color: var(--color-ink);
    margin: 0 0 0.625rem;
}

.numbered-card__body {
    font-family: var(--font-family-base, inherit);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text);
    margin: 0 0 0.875rem;
}

.numbered-card__elements {
    font-family: var(--font-family-base, inherit);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0;
    padding-top: 1rem;
}

/* Wide variant — soft primary tint to signal a "summary/meta" card */
.numbered-card--wide {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-base)) 0%,
        var(--color-surface-base) 100%
    );
}

/* Column-span modifiers (desktop) */
.numbered-card--span-3  { grid-column: span 3;  }
.numbered-card--span-4  { grid-column: span 4;  }
.numbered-card--span-6  { grid-column: span 6;  }
.numbered-card--span-8  { grid-column: span 8;  }
.numbered-card--span-12 { grid-column: span 12; }

/* Tablet */
@media (max-width: 900px) {
    .numbered-card,
    .numbered-card--span-3,
    .numbered-card--span-4 { grid-column: span 6; }
    .numbered-card--span-6,
    .numbered-card--span-8 { grid-column: span 12; }
}

/* Mobile */
@media (max-width: 560px) {
    .numbered-card,
    .numbered-card--span-3,
    .numbered-card--span-4,
    .numbered-card--span-6,
    .numbered-card--span-8 { grid-column: span 12; }
}