/* ════════════════════════════════════════════════════════════════════════
   MODULE: Value Cards   [value-cards]
   ════════════════════════════════════════════════════════════════════════
   Edge-to-edge row of color-alternating cards with centered icon, title,
   and description. The section breaks out of any wrapping container so
   it spans the full viewport width.

   Drop-in CSS — no dependency on sections.css. Tokens fall back to
   sensible defaults if --navy / --gold aren't defined.
   ════════════════════════════════════════════════════════════════════════ */

.module-value-cards {
    --vc-cream: #f5efe6;
    --vc-beige: #f5f0e6;
    --vc-navy:  #0B1D3A;
    --vc-red:   #E5594D;
    --vc-gold:  #E8A317;
    --vc-text-dark:  #0B1D3A;
    --vc-text-mid:   #475569;
    --vc-text-light: #ffffff;
    --vc-text-light-muted: rgba(255, 255, 255, 0.85);

    /* Break out of any wrapping container — full viewport width */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;   /* clip any decoration bleeding past the edge */
}

/* Optional header above the row of cards */
.module-vc-header {
    text-align: center;
    padding: 56px 24px 28px;
    max-width: 980px;
    margin: 0 auto;
}
.module-vc-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--vc-gold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.module-vc-heading {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 700;
    color: var(--vc-text-dark);
    margin: 0 0 12px;
    line-height: 1.2;
}
.module-vc-subtitle {
    color: var(--vc-text-mid);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
/* ROUND 59 — DEFENSIVE FIX for desktop layout collapse:
   On some sites, the grid was rendering as block-stacked (cards
   one-on-top-of-another) instead of in a row. The cause was either
   a parent CSS rule somewhere overriding `display: grid`, or a
   browser-cached old stylesheet. To make sure this NEVER happens
   again, we:
     1. Use higher specificity (.module-value-cards > .module-vc-grid)
        instead of the bare class — beats any rule with shorter
        selectors that might be loaded later.
     2. Use !important on the layout properties (display + columns)
        so even an inline style or a third-party plugin can't
        override them.
     3. Add a fallback flexbox layout that kicks in if the browser
        somehow refuses to apply grid. */
.module-value-cards > .module-vc-grid,
.module-vc-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--vc-cols, 4), 1fr) !important;
    width: 100%;
    box-sizing: border-box;
}

/* Specificity-boosted selectors so the column count beats any later
   loaded CSS. Both class orderings work because we use the parent
   class as well. */
.module-value-cards.module-vc-cols-2 > .module-vc-grid,
.module-vc-cols-2 .module-vc-grid              { --vc-cols: 2; }
.module-value-cards.module-vc-cols-3 > .module-vc-grid,
.module-vc-cols-3 .module-vc-grid              { --vc-cols: 3; }
.module-value-cards.module-vc-cols-4 > .module-vc-grid,
.module-vc-cols-4 .module-vc-grid              { --vc-cols: 4; }
.module-value-cards.module-vc-cols-5 > .module-vc-grid,
.module-vc-cols-5 .module-vc-grid              { --vc-cols: 5; }

/* Defensive: if grid totally fails to apply (very old browser,
   broken CSS layer, etc.), fall back to flexbox so cards still
   line up horizontally instead of stacking. The @supports rule
   is only honored when grid IS supported, so this acts as a
   no-grid fallback for ancient browsers. */
@supports not (display: grid) {
    .module-vc-grid {
        display: flex !important;
        flex-wrap: wrap;
    }
    .module-vc-grid > .module-vc-card {
        flex: 1 1 calc(100% / var(--vc-cols, 4));
        min-width: 0;
    }
}

/* Gap variants */
.module-vc-gap-edge   .module-vc-grid { gap: 0; }
.module-vc-gap-tight  .module-vc-grid { gap: 4px;  background: #f1f5f9; padding: 4px;  }
.module-vc-gap-normal .module-vc-grid { gap: 16px; padding: 0 24px; }
.module-vc-gap-wide   .module-vc-grid { gap: 32px; padding: 0 32px; }

/* Each card MUST be a grid item taking exactly one column. Defensive
   rule: in case any descendant CSS sets `grid-column: 1/-1` on cards,
   we explicitly say each card takes one column. */
.module-vc-grid > .module-vc-card {
    grid-column: span 1;
    min-width: 0;        /* prevent grid blowout from long words */
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.module-vc-card {
    padding: 56px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    color: var(--vc-text-dark);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
/* Linkified card */
a.module-vc-card-link {
    text-decoration: none;
    color: inherit;
}
a.module-vc-card-link:hover { transform: translateY(-2px); }

/* ── Icon ─────────────────────────────────────────────────────────────── */
.module-vc-icon {
    color: var(--vc-gold);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.module-vc-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.module-vc-icon-emoji {
    font-size: 2.2rem;
    line-height: 1;
    color: var(--vc-gold);
}

/* ── Title + description ─────────────────────────────────────────────── */
.module-vc-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: inherit;   /* dark on light cards, white on dark cards */
}
.module-vc-card-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--vc-text-mid);
    max-width: 360px;
    margin: 0 auto;
}
.module-vc-card-desc p { margin: 0 0 10px; }
.module-vc-card-desc p:last-child { margin: 0; }
.module-vc-card-desc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Background variants ─────────────────────────────────────────────── */
.module-vc-bg-cream  { background: var(--vc-cream); color: var(--vc-text-dark); }
.module-vc-bg-beige  { background: var(--vc-beige); color: var(--vc-text-dark); }
.module-vc-bg-navy   { background: var(--vc-navy);  color: var(--vc-text-light); }
.module-vc-bg-red    { background: var(--vc-red);   color: var(--vc-text-light); }
.module-vc-bg-gold   { background: var(--vc-gold);  color: var(--vc-text-dark);  }
.module-vc-bg-white  { background: #ffffff;         color: var(--vc-text-dark);  }
.module-vc-bg-light  { background: #f8fafc;         color: var(--vc-text-dark);  }
.module-vc-bg-gray   { background: #64748b;         color: var(--vc-text-light); }
.module-vc-bg-green  { background: #43A047;         color: var(--vc-text-light); }
.module-vc-bg-blue   { background: #1565C0;         color: var(--vc-text-light); }

/* ── Round 53: AUTO-CONTRAST helper classes ────────────────────────────
   Applied alongside the card's bg class. The PHP renderer measures
   the background's perceived brightness and adds either:
      .module-vc-is-dark   (text becomes white)
      .module-vc-is-light  (text stays dark)
   This is what makes CUSTOM HEX backgrounds get the right text
   color even when there's no per-color CSS class for them.
   The rules below DON'T fire when the user has set an explicit
   text-color via inline style — that wins because of CSS specificity
   (inline style beats class). */
.module-vc-is-dark              { color: #ffffff; }
.module-vc-is-dark .module-vc-card-title { color: #ffffff; }
.module-vc-is-dark .module-vc-card-desc  { color: rgba(255, 255, 255, 0.85); }

.module-vc-is-light             { color: var(--vc-text-dark); }
.module-vc-is-light .module-vc-card-title { color: var(--vc-text-dark); }
.module-vc-is-light .module-vc-card-desc  { color: var(--vc-text-mid); }

/* On dark cards (whether named-class or auto-contrast), description
   text uses the muted-light variant for readability. */
.module-vc-bg-navy  .module-vc-card-desc,
.module-vc-bg-red   .module-vc-card-desc,
.module-vc-bg-gray  .module-vc-card-desc,
.module-vc-bg-green .module-vc-card-desc,
.module-vc-bg-blue  .module-vc-card-desc {
    color: var(--vc-text-light-muted);
}

/* When the card has an explicit inline `color:` style (text_color
   override), the inline rule already wins — but for the description
   block (which reassigns its own color), we make sure it inherits
   from the card. CSS specificity: inline style > class, but `inherit`
   propagates from the inline-styled parent down to the desc. */
.module-vc-card[style*="color"] .module-vc-card-title,
.module-vc-card[style*="color"] .module-vc-card-desc {
    color: inherit;
}

/* On dark cards, the title is white (override .card-title color: inherit
   doesn't need an override — inherit from the card's color above which
   is already white on those backgrounds — kept here for clarity). */

/* Hover effect — subtle lift on linked cards */
a.module-vc-card-link:hover .module-vc-icon {
    transform: scale(1.06);
    transition: transform .25s ease;
}

/* ── Responsive collapse ─────────────────────────────────────────────── */
/* Tablet: collapse 4-col / 5-col → 2-col.
   These selectors match the high-specificity ones at the top of this
   file so they reliably override the desktop column count. */
@media (max-width: 960px) {
    .module-value-cards.module-vc-cols-4 > .module-vc-grid,
    .module-vc-cols-4 .module-vc-grid,
    .module-value-cards.module-vc-cols-5 > .module-vc-grid,
    .module-vc-cols-5 .module-vc-grid {
        --vc-cols: 2;
    }
    .module-value-cards.module-vc-cols-3 > .module-vc-grid,
    .module-vc-cols-3 .module-vc-grid {
        --vc-cols: 2;
    }
    .module-vc-card { padding: 44px 24px; }
}

/* Phone: stack to single column */
@media (max-width: 600px) {
    .module-value-cards.module-vc-cols-2 > .module-vc-grid,
    .module-vc-cols-2 .module-vc-grid,
    .module-value-cards.module-vc-cols-3 > .module-vc-grid,
    .module-vc-cols-3 .module-vc-grid,
    .module-value-cards.module-vc-cols-4 > .module-vc-grid,
    .module-vc-cols-4 .module-vc-grid,
    .module-value-cards.module-vc-cols-5 > .module-vc-grid,
    .module-vc-cols-5 .module-vc-grid {
        --vc-cols: 1;
    }
    .module-vc-card { padding: 36px 20px; gap: 14px; }
    .module-vc-icon { width: 40px; height: 40px; }
    .module-vc-card-title { font-size: 1.05rem; }
    .module-vc-card-desc  { font-size: 0.9rem; }
    .module-vc-header { padding: 36px 20px 20px; }
}