/*
 * _cards.css
 * Card grid layouts and card component styles.
 * Rewritten for clean build — full grid system, all variants, BEM naming.
 *
 * Sections:
 *   1. Card Grid System
 *   2. Card Grid — Responsive Modifiers
 *   3. Base Card
 *   4. Card Variants
 *   5. Card Typography
 *   6. Card Icon / Badge
 *   7. Card Post (with image — for case studies, blog)
 *   8. Card Stat (impact / stat counters)
 *   9. Responsive
 */

/* ==========================================================
   1. CARD GRID SYSTEM
   Base: single column. Apply modifier for column count.
   ========================================================== */
.cards-grid {
    display: grid;
    gap: var(--grid-gutter, 1.5rem);
    width: 100%;
}

/* Fixed explicit column counts — mobile-first via media queries below */
.cards-grid-2 { --grid-cols: 2; }
.cards-grid-3 { --grid-cols: 3; }
.cards-grid-4 { --grid-cols: 4; }
.cards-grid-5 { --grid-cols: 5; }

/* Default: single column on mobile for all grids */
.cards-grid-2,
.cards-grid-3,
.cards-grid-4,
.cards-grid-5 {
    grid-template-columns: 1fr;
}

/* Auto-fit variants — cells size themselves, wrap freely */
.cards-grid-auto-sm  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cards-grid-auto-md  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards-grid-auto-lg  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Gap modifiers */
.cards-grid--gap-sm  { gap: 1rem; }
.cards-grid--gap-lg  { gap: 2rem; }
.cards-grid--gap-xl  { gap: 3rem; }


/* ==========================================================
   2. CARD GRID — RESPONSIVE MODIFIERS
   Control column count at specific breakpoints.
   Usage: <div class="cards-grid cards-grid-3 cards-grid--sm-2">
   ========================================================== */

/* sm: 2 columns from 640px */
@media (min-width: 640px) {
    .cards-grid--sm-2 { grid-template-columns: repeat(2, 1fr); }
}

/* md: columns from 768px */
@media (min-width: 768px) {
    .cards-grid-2          { grid-template-columns: repeat(2, 1fr); }
    .cards-grid--md-2      { grid-template-columns: repeat(2, 1fr); }
    .cards-grid--md-3      { grid-template-columns: repeat(3, 1fr); }
}

/* lg: columns from 1024px */
@media (min-width: 1024px) {
    .cards-grid-3          { grid-template-columns: repeat(3, 1fr); }
    .cards-grid-4          { grid-template-columns: repeat(4, 1fr); }
    .cards-grid--lg-2      { grid-template-columns: repeat(2, 1fr); }
    .cards-grid--lg-3      { grid-template-columns: repeat(3, 1fr); }
    .cards-grid--lg-4      { grid-template-columns: repeat(4, 1fr); }
}

/* xl: columns from 1280px */
@media (min-width: 1280px) {
    .cards-grid-5          { grid-template-columns: repeat(5, 1fr); }
    .cards-grid--xl-4      { grid-template-columns: repeat(4, 1fr); }
    .cards-grid--xl-5      { grid-template-columns: repeat(5, 1fr); }
}


/* ==========================================================
   3. BASE CARD
   ========================================================== */
.card {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* ==========================================================
   4. CARD VARIANTS
   ========================================================== */

/* Bordered — navy border, used on light sections */
.card-bordered {
    border: 2px solid var(--color-navy);
}

/* Shadow — used for floating cards */
.card-shadow {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -3px rgba(0, 0, 0, 0.08);
}
.card-shadow:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
}

/* Light border — white card with subtle gray border, lifts on hover */
.card-light-border {
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.06);
}
.card-light-border:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -6px rgba(3, 28, 72, 0.12);
    border-color: var(--color-gray-300);
}

/* Dark card — used on navy background sections */
.card-dark {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-white);
}
.card-dark:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
}

/* Flat — no border, no shadow, e.g. icon+text tiles */
.card-flat {
    padding: 1.5rem;
}

/* Centered — centers all content */
.card-centered {
    align-items: center;
    text-align: center;
}


/* ==========================================================
   5. CARD TYPOGRAPHY
   ========================================================== */
.card-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-brand-red);
    line-height: 1;
    letter-spacing: -0.03em;
}

.card-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.3;
}

.card-title-small {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.4;
}

.card-description {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-dark);
}

.card-description-small {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-gray);
}

/* Dark section overrides */
.card-dark .card-title,
.card-dark .card-title-small {
    color: var(--text-white);
}
.card-dark .card-description,
.card-dark .card-description-small {
    color: rgba(255, 255, 255, 0.75);
}


/* ==========================================================
   6. CARD ICON / BADGE
   ========================================================== */
.card-icon {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

.card-icon img,
.card-icon svg {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Colored circle badge — 56px icon container */
.card-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.card-icon-badge--red   { background-color: var(--color-brand-red); }
.card-icon-badge--light { background-color: var(--color-gray-100); }
.card-icon-badge--navy  { background-color: var(--color-navy); }

.card-icon-badge svg,
.card-icon-badge img {
    width: 28px;
    height: 28px;
    fill: white;
    color: white;
}


/* ==========================================================
   7. CARD POST — For case studies, blog posts, insights
   ========================================================== */
.card-post {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--bg-white);
    border: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -8px rgba(3, 28, 72, 0.15);
}

.card-post__image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-gray-100);
}
.card-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.card-post:hover .card-post__image img {
    transform: scale(1.04);
}

.card-post__body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.card-post__tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand-red);
}

.card-post__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.4;
}

.card-post__meta {
    font-size: 0.8125rem;
    color: var(--text-gray);
    margin-top: auto;
    padding-top: 0.75rem;
}

.card-post__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-red);
    text-decoration: none;
    margin-top: auto;
    padding-top: 0.5rem;
}
.card-post__link:hover { text-decoration: underline; }


/* ==========================================================
   8. CARD STAT — Impact/stats sections (icon + number + label)
   ========================================================== */
.card-stat {
    text-align: center;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.card-stat__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
    color: var(--color-brand-red);
}

.card-stat__number {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--color-brand-red);
    line-height: 1;
    letter-spacing: -0.04em;
}

.card-stat__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.3;
}

.card-stat__description {
    font-size: 0.9375rem;
    color: var(--text-gray);
    max-width: 20rem;
    line-height: 1.55;
}

/* On dark sections */
.section-dark .card-stat__label {
    color: var(--text-white);
}
.section-dark .card-stat__description {
    color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================
   9. RESPONSIVE — Ensure no overflow at small sizes
   ========================================================== */
@media (max-width: 639px) {
    .card { padding: 1.5rem; }
    .card-post__body { padding: 1.25rem; }
    .card-stat { padding: 1.5rem 1rem; }
}