/* =============================================================================
   Better Cards Component  —  better-cards.css
   -----------------------------------------------------------------------------
   "Option 2 — Blue feature cards (solid, reversed)"

   Solid HCCC-blue panels with white text, the brand's link-list icons, and a
   yellow circular arrow badge. The boldest card treatment in the institutional
   library: it reads as a featured highlight block, echoing the solid blue
   section fills used elsewhere on hccc.edu.

   This component intentionally ships a SINGLE visual design (no theme switching).
   The custom properties below exist for fine-tuning (spacing, sizing), not for
   swapping color schemes.

   Location in CMS : /_resources/css/better-cards.css
   Methodology     : BEM (block__element--modifier)
   Approach        : Mobile-first, progressive enhancement, no JavaScript

   TABLE OF CONTENTS
     1.  Design tokens (CSS custom properties)
     2.  Block + layout (section, heading, intro, grid)
     3.  Card (the blue panel)
     4.  Icon
     5.  Title + text
     6.  Link + arrow badge
     7.  Responsive breakpoints
     8.  Accessibility (focus, reduced-motion, high-contrast, forced-colors)
     9.  Print
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   Scoped to the block (not :root) so the component never collides with other
   components or site-wide variables.
   -------------------------------------------------------------------------- */
.better-cards {
    /* Brand colors (matched to the Option 2 mock-up) */
    --bc-blue:            #2b3990;   /* card fill — HCCC secondary blue        */
    --bc-blue-hover:      #1d2974;   /* card fill on hover/focus               */
    --bc-yellow:          #fff200;   /* link text + arrow badge                */
    --bc-arrow-chevron:   var(--bc-blue); /* chevron drawn on the yellow badge */

    /* Text colors (reversed — light on dark) */
    --bc-title-color:     #ffffff;
    --bc-text-color:      rgba(255, 255, 255, 0.85);
    --bc-heading-color:   #1c1c1c;   /* section heading sits on the page, dark */

    /* Layout */
    --bc-gap:             18px;
    --bc-radius:          10px;
    --bc-card-padding:    28px 26px 26px;
    --bc-icon-size:       58px;
    --bc-arrow-size:      30px;
    --bc-section-margin:  40px;      /* breathing room below the whole block   */

    /* Typography (Montserrat is inherited from the site) */
    --bc-heading-size:    24px;
    --bc-title-size:      20px;
    --bc-text-size:       14px;
    --bc-link-size:       14px;

    /* Motion */
    --bc-transition:      0.3s ease;

    /* Accessibility */
    --bc-focus-color:     #00857a;   /* HCCC teal — visible on white + on blue */
    --bc-focus-width:     3px;

    /* Block resets */
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    display: block;
    margin: 0 0 var(--bc-section-margin);
    box-sizing: border-box;
}

.better-cards *,
.better-cards *::before,
.better-cards *::after {
    box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
   2. BLOCK + LAYOUT
   -------------------------------------------------------------------------- */

/* Optional section heading (dark text, sits on the page background) */
.better-cards__heading {
    font-size: var(--bc-heading-size);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--bc-heading-color);
    margin: 0 0 20px;
}

/* Optional intro / lede paragraph above the grid */
.better-cards__intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bc-heading-color);
    max-width: 760px;
    margin: 0 0 24px;
}

.better-cards__intro > :first-child { margin-top: 0; }
.better-cards__intro > :last-child  { margin-bottom: 0; }

/* The card grid — mobile-first single column.
   Grid items stretch to equal height by default (align-items: stretch),
   which is what lets every card in a row match the tallest card and keeps
   the link/arrow pinned to the bottom — no JavaScript required. */
.better-cards__grid {
    display: grid;
    gap: var(--bc-gap);
    grid-template-columns: 1fr;
}


/* -----------------------------------------------------------------------------
   3. CARD — the solid blue panel
   -------------------------------------------------------------------------- */
.better-cards__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bc-blue);
    color: var(--bc-title-color);
    border-radius: var(--bc-radius);
    padding: var(--bc-card-padding);
    text-decoration: none;
    transition: background var(--bc-transition), transform var(--bc-transition),
                box-shadow var(--bc-transition);
}

/* Linked cards react to hover + keyboard focus */
.better-cards__card:hover,
.better-cards__card:focus-visible {
    background: var(--bc-blue-hover);
    text-decoration: none;
}

/* Static (non-linked) cards should not look interactive */
.better-cards__card--static {
    cursor: default;
}


/* -----------------------------------------------------------------------------
   4. ICON  (inline SVG, image, or FontAwesome — all rendered white)
   -------------------------------------------------------------------------- */
.better-cards__icon {
    width: var(--bc-icon-size);
    height: var(--bc-icon-size);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--bc-title-color);   /* SVG currentColor → white */
}

.better-cards__icon img,
.better-cards__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Inline SVGs inherit the white text color where they use currentColor */
.better-cards__icon svg {
    fill: currentColor;
}

/* FontAwesome fallback */
.better-cards__icon i {
    font-size: 42px;
    line-height: 1;
}


/* -----------------------------------------------------------------------------
   5. TITLE + TEXT
   -------------------------------------------------------------------------- */
.better-cards__title {
    font-size: var(--bc-title-size);
    font-weight: 800;
    line-height: 1.2;
    color: var(--bc-title-color);
    margin: 0 0 10px;
}

.better-cards__text {
    font-size: var(--bc-text-size);
    line-height: 1.5;
    color: var(--bc-text-color);
    margin: 0 0 24px;
}

.better-cards__text > :first-child { margin-top: 0; }
.better-cards__text > :last-child  { margin-bottom: 0; }


/* -----------------------------------------------------------------------------
   6. LINK + ARROW BADGE
   The link is pushed to the bottom of the card with margin-top:auto so every
   card's call-to-action lines up regardless of body length.
   -------------------------------------------------------------------------- */
.better-cards__link {
    margin-top: auto;            /* pin to card bottom */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--bc-yellow);
    font-size: var(--bc-link-size);
    font-weight: 800;
    line-height: 1.2;
}

/* Optional external-link glyph that appears before the arrow on target=_blank */
.better-cards__external {
    font-size: 12px;
    opacity: 0.9;
}

/* Circular yellow badge */
.better-cards__arrow {
    width: var(--bc-arrow-size);
    height: var(--bc-arrow-size);
    border-radius: 50%;
    background: var(--bc-yellow);
    position: relative;
    flex: 0 0 auto;
    transition: transform var(--bc-transition);
}

/* The chevron inside the badge (a rotated corner) */
.better-cards__arrow::after {
    content: "";
    position: absolute;
    left: 42%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2.5px solid var(--bc-arrow-chevron);
    border-right: 2.5px solid var(--bc-arrow-chevron);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Nudge the badge on hover/focus for an interactive feel */
.better-cards__card:hover .better-cards__arrow,
.better-cards__card:focus-visible .better-cards__arrow {
    transform: translateX(4px);
}


/* -----------------------------------------------------------------------------
   7. RESPONSIVE BREAKPOINTS  (mobile-first)
   Mobile  (<768px) : 1 column   (the token default above)
   Tablet  (768px+) : 2 columns
   Desktop (1024px+): per-layout (grid-2 stays 2, grid-3 → 3, grid-4 → 4)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .better-cards__grid--grid-2,
    .better-cards__grid--grid-3,
    .better-cards__grid--grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .better-cards__grid--grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .better-cards__grid--grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    /* grid-2 deliberately remains two columns at all sizes */
}


/* -----------------------------------------------------------------------------
   8. ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Visible keyboard focus ring (separate from the hover color change) */
.better-cards__card:focus-visible {
    outline: var(--bc-focus-width) solid var(--bc-focus-color);
    outline-offset: var(--bc-focus-width);
}

/* Older browsers without :focus-visible — fall back to :focus */
.better-cards__card:focus {
    outline: var(--bc-focus-width) solid var(--bc-focus-color);
    outline-offset: var(--bc-focus-width);
}
.better-cards__card:focus:not(:focus-visible) {
    outline: none;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .better-cards__card,
    .better-cards__arrow {
        transition: none;
    }
    .better-cards__card:hover .better-cards__arrow,
    .better-cards__card:focus-visible .better-cards__arrow {
        transform: none;
    }
}

/* High-contrast preference — add a defined edge to each card */
@media (prefers-contrast: more) {
    .better-cards__card {
        border: 2px solid #ffffff;
    }
}

/* Windows High Contrast / forced-colors mode.
   System colors replace the brand palette; keep structure legible. */
@media (forced-colors: active) {
    .better-cards__card {
        border: 2px solid CanvasText;
    }
    .better-cards__arrow {
        background: Highlight;
        forced-color-adjust: none;
    }
    .better-cards__arrow::after {
        border-color: Canvas;
    }
}


/* -----------------------------------------------------------------------------
   9. PRINT  —  flatten to ink-friendly outlined cards
   -------------------------------------------------------------------------- */
@media print {
    .better-cards__card {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000;
    }
    .better-cards__title,
    .better-cards__text,
    .better-cards__icon {
        color: #000000 !important;
    }
    .better-cards__link {
        color: #000000 !important;
    }
    .better-cards__arrow {
        background: #000000 !important;
    }
    .better-cards__arrow::after {
        border-color: #ffffff !important;
    }
}