/* ============================================================
   10-HOMEPAGE – Card Tiles & Update Banner (CSS)
   ============================================================
   Purpose:  Homepage card grid + MEM rebuild banner
   Depends:  01-Tokens (--clr-*, --radius-*, --max-content-width,
             --anim-*, --z-*)
   Updated:  2026-03-18
   Cleaned:  Removed duplicate header gradient animation
             (owned by 04-HEADER)
   Priority: 10

   CLASS PREFIX:  gprs-home-
   Scoped to homepage only — avoids collisions with Elementor,
   Astra, or future card/banner components on other pages.

   DARK MODE:
   Uses html.gprs-dark (matching 01-Tokens, 02-Base, 04-HEADER,
   Footer, Quicklinks). Light/dark swap uses CSS variables on
   each component so overrides live in one place.

   TABLE OF CONTENTS:
   1.  Homepage Gap Fix (Astra wrapper chain)
   2.  Card Grid Layout
   3.  Individual Card (light + dark via variables)
   4.  Card Icon
   5.  Card Title
   6.  Card Body Text
   7.  Card CTA (arrow via ::after)
   8.  Update Banner (light + dark via variables)
   9.  Responsive
   ============================================================ */


/* ============================================================
   1. HOMEPAGE GAP FIX (ASTRA WRAPPER CHAIN)
   ============================================================
   Astra wraps content in:
     #page (flex column, min-height:100vh)
       → .site-content / div#content
         → .ast-container
           → #primary / .content-area
             → main.site-main

   02-Base also sets main { min-height: 100vh }.

   On the homepage the <main> is empty (hero injects before
   it, cards inject via footer after it). The flex layout +
   min-height causes a full-viewport empty block.

   Fix: collapse the entire chain on homepage only.
============================================================ */

body.home #page {
  display: block;
  min-height: 0;
}

body.home .site-content,
body.home div#content.site-content,
body.home div#content {
  flex-grow: 0;
  flex: none;
}

body.home main,
body.home .site-main,
body.home main.site-main,
body.home #primary,
body.home .content-area,
body.home .ast-container,
body.home .entry-content,
body.home .page-content,
body.home article.page {
  min-height: 0;
  padding: 0;
  margin: 0;
}


/* ============================================================
   2. CARD GRID LAYOUT
============================================================ */

.gprs-home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: var(--max-content-width, 1400px);
  margin: 3rem auto;
  padding: 0 1.5rem;
}


/* ============================================================
   3. INDIVIDUAL CARD — LIGHT DEFAULT + DARK VIA VARIABLES
   ============================================================
   All visual properties route through --home-card-* vars.
   Dark mode overrides only change the variables.
============================================================ */

.gprs-home-card {
  --home-card-bg:       #ffffff;
  --home-card-border:   rgba(0, 102, 204, 0.12);
  --home-card-shadow:   0 2px 12px rgba(0, 0, 0, 0.06);
  --home-card-shadow-hover:
      0 12px 32px rgba(0, 102, 204, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.08);
  --home-card-blur:     none;

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--home-card-bg);
  border: 1px solid var(--home-card-border);
  border-radius: var(--radius-md, 14px);
  padding: 2rem 1.75rem;
  box-shadow: var(--home-card-shadow);
  backdrop-filter: var(--home-card-blur);
  -webkit-backdrop-filter: var(--home-card-blur);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform    var(--anim-medium, 0.3s ease),
    box-shadow   var(--anim-medium, 0.3s ease),
    border-color var(--anim-medium, 0.3s ease);
}

.gprs-home-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--home-card-shadow-hover);
}

.gprs-home-card:focus-visible {
  outline: 3px solid var(--clr-accent, #0066CC);
  outline-offset: 3px;
}

/* ── Dark mode variable swap ── */
html.gprs-dark .gprs-home-card {
  --home-card-bg:       rgba(255, 255, 255, 0.08);
  --home-card-border:   rgba(255, 255, 255, 0.15);
  --home-card-shadow:   0 2px 12px rgba(0, 0, 0, 0.25);
  --home-card-shadow-hover:
      0 12px 32px rgba(0, 102, 204, 0.25),
      0 2px 8px rgba(0, 0, 0, 0.30);
  --home-card-blur:     blur(12px);
}

html.gprs-dark .gprs-home-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
}


/* ============================================================
   4. CARD ICON
============================================================ */

.gprs-home-card__icon {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}


/* ============================================================
   5. CARD TITLE
============================================================ */

.gprs-home-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #003366;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

html.gprs-dark .gprs-home-card__title {
  color: var(--clr-accent, #0066CC);
}


/* ============================================================
   6. CARD BODY TEXT
============================================================ */

.gprs-home-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clr-text-body, #111827);
  margin: 0 0 1.25rem 0;
  flex: 1;
}

/* Dark text color handled globally by 02-Base:
   html.gprs-dark p/div/span { color: #ffffff }
   No override needed here. */


/* ============================================================
   7. CARD CTA (arrow added via ::after)
============================================================ */

.gprs-home-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-accent, #0066CC);
  text-decoration: none;
  transition: gap var(--anim-fast, 0.18s ease);
}

.gprs-home-card__cta::after {
  content: "\2192";
  font-size: 1.1em;
  transition: transform var(--anim-fast, 0.18s ease);
}

.gprs-home-card:hover .gprs-home-card__cta {
  gap: 0.65rem;
}

.gprs-home-card:hover .gprs-home-card__cta::after {
  transform: translateX(3px);
}


/* ============================================================
   8. UPDATE BANNER — LIGHT DEFAULT + DARK VIA VARIABLES
============================================================ */

.gprs-home-update-banner {
  max-width: var(--max-content-width, 1400px);
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
}

.gprs-home-update-banner__inner {
  --home-banner-bg:       #fffaf0;
  --home-banner-border:   rgba(230, 126, 34, 0.2);
  --home-banner-shadow:   0 2px 12px rgba(0, 0, 0, 0.04);
  --home-banner-blur:     none;

  display: flex;
  align-items: center;
  gap: 1.75rem;
  background: var(--home-banner-bg);
  border: 1px solid var(--home-banner-border);
  border-left: 4px solid #e67e22;
  border-radius: var(--radius-md, 14px);
  padding: 1.75rem 2rem;
  box-shadow: var(--home-banner-shadow);
  backdrop-filter: var(--home-banner-blur);
  -webkit-backdrop-filter: var(--home-banner-blur);
}

/* ── Dark mode variable swap ── */
html.gprs-dark .gprs-home-update-banner__inner {
  --home-banner-bg:       rgba(255, 255, 255, 0.06);
  --home-banner-border:   rgba(255, 165, 0, 0.2);
  --home-banner-shadow:   none;
  --home-banner-blur:     blur(12px);
}

.gprs-home-update-banner__img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  flex-shrink: 0;
}

.gprs-home-update-banner__content {
  flex: 1;
}

.gprs-home-update-banner__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e67e22;
  margin: 0 0 0.35rem 0;
}

html.gprs-dark .gprs-home-update-banner__title {
  color: #f0a050;
}

.gprs-home-update-banner__text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clr-text-body, #111827);
  margin: 0 0 0.75rem 0;
}

/* Dark text color handled by 02-Base global rule */

.gprs-home-update-banner__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-accent, #0066CC);
  text-decoration: none;
}

.gprs-home-update-banner__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gprs-home-update-banner__link:focus-visible {
  outline: 3px solid var(--clr-accent, #0066CC);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ============================================================
   9. RESPONSIVE
============================================================ */

@media (max-width: 600px) {
  .gprs-home-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
  }

  .gprs-home-update-banner__inner {
    flex-direction: column;
    text-align: center;
  }

  .gprs-home-update-banner__img {
    width: 100%;
    height: 180px;
  }
}