/* =========================================================
   File: css/components/cards.css
   Title: Token-Driven Cards (Canonical Component)
   Version: 2025-11-21
   Author: Invent City

   PURPOSE
   • Neutral, currentColor-based cards that adapt to .area-light
     and .area-dark contexts.
   • Works with fixed grid containers (cards-2-fixed, etc.).
   • Supports popup triggers and minimal variants.
========================================================= */


/* ---------------------------------------------------------
   1) CORE CARD STRUCTURE
--------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  color: currentColor;
  border: 0px solid currentColor;
  border-radius: var(--card-border);
  box-shadow: none;
  overflow: hidden; /* ensures image & body connect flush */
}

/* Flat outline variant */
.card--flat {
  box-shadow: none;
  border: 1px solid currentColor;
}

/* No-outline variant */
.card--flat.card--no-outline,
.card--no-outline {
  border: none !important;
}


/* ---------------------------------------------------------
   2) MEDIA CONTAINER
--------------------------------------------------------- */
.card .media img,
.card .card-img img,
.card .card-media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 1px solid currentColor; /* ties into section color */
  vertical-align: middle;
  object-fit: contain;
}

/* Optional override for dense 4-up grids */
.cards-4-fixed .card img {
  border: none !important;
}


/* ---------------------------------------------------------
   3) BODY
--------------------------------------------------------- */
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--card-body-padding, 0.5rem);
  margin-top: 0;
}


/* ---------------------------------------------------------
   4) TITLES & TEXT
--------------------------------------------------------- */
.card-title {
  font-family: var(--card-title-font);
  font-size: var(--card-title-fs);
  font-weight: var(--card-title-fw);
  line-height: var(--card-title-lh);
  letter-spacing: var(--card-title-ls);
  color: currentColor;
  margin: 0.5rem 0 0.5rem 0;
  display: inline-block;
}

.card-title .bracketed {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  opacity: 0.8;
  margin-top: 0.15em;
  color: currentColor;
}

.card-text {
  font-family: var(--font-base);
  font-size: var(--copy-sm-fs);
  line-height: var(--copy-sm-lh);
  font-weight: var(--copy-sm-body-w);
  margin: 0;
}


/* ---------------------------------------------------------
   5) FIXED GRID LAYOUT VARIANTS
   ---------------------------------------------------------
   • cards-2-fixed / cards-3-fixed / cards-4-fixed
   • Provide locked column counts on desktop.
--------------------------------------------------------- */
.cards-2-fixed,
.cards-3-fixed,
.cards-4-fixed {
  display: grid;
  gap: var(--card-gap, 2rem);
  align-items: stretch;
  width: 100%;
}

/* Fixed column counts */
.cards-2-fixed { grid-template-columns: repeat(2, 1fr); }
.cards-3-fixed { grid-template-columns: repeat(3, 1fr); }
.cards-4-fixed { grid-template-columns: repeat(4, 1fr); }

/* Optional horizontal scroll behaviour (mobile) */
.cards-2-fixed,
.cards-3-fixed,
.cards-4-fixed {
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  scrollbar-width: none;
}

.cards-2-fixed::-webkit-scrollbar,
.cards-3-fixed::-webkit-scrollbar,
.cards-4-fixed::-webkit-scrollbar {
  display: none;
}

.cards-2-fixed > *,
.cards-3-fixed > *,
.cards-4-fixed > * {
  min-width: min(280px, 30%);
  max-width: 400px;
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Center orphan cards in 3-up layout */
.cards-3-fixed {
  justify-items: center;
}

.cards-3-fixed > * {
  width: 100%;
}

.cards-3-fixed > :nth-last-child(1):nth-child(3n+1),
.cards-3-fixed > :nth-last-child(2):nth-child(3n+1) {
  grid-column: span 3;
  display: flex;
  justify-content: center;
}


/* ---------------------------------------------------------
   6) “2+1 CENTERED” LAYOUT (cards-2-1-centered)
--------------------------------------------------------- */
.cards-2-1-centered {
  display: grid;
  gap: var(--card-gap, 2rem);
  align-items: stretch;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.cards-2-1-centered .card:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(45%, 50%, 55%);
}


/* ---------------------------------------------------------
   7) POPUP VARIANT
--------------------------------------------------------- */
.card--popup {
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease;
  border: 1px solid currentColor;
}

.card--popup:hover,
.card--popup:focus {
  transform: scale(1.02);
}

/* Hidden content for popup body (accessibility) */
.card--popup .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ---------------------------------------------------------
   8) CARD & BUTTON ALIGNMENT UTILITIES
--------------------------------------------------------- */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--card-gap);
}

.card-container .card {
  flex: 1 1 50%;
  max-width: 50%;
}

.no-border {
  border: none !important;
}

/* Button inside card body stays left + auto width */
.card-body button {
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Card button-style title */
.card-btn-title {
  font-family: var(--card-title-font);
  font-size: var(--card-title-fs);
  font-weight: var(--card-title-fw);
  line-height: var(--card-title-lh);
  letter-spacing: var(--card-title-ls);
  color: currentColor;
  margin: 0.5rem 0 0.5rem 0;

  display: inline-block !important;
  width: auto !important;
  padding: 0.1em 0.25em;
  background: #ffffff;
  border: 1px solid currentColor;
}


/* ---------------------------------------------------------
   9) MINIMAL IMAGE-ONLY CARD
--------------------------------------------------------- */
.minimal-card {
  cursor: pointer;
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.minimal-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   REMOVE IMAGE BORDERS FOR COMPLEMENT / UTILITY CARDS
   ---------------------------------------------------------
   Triggered by `.no-border` on the card.
   Works for both popup cards and static cards.
========================================================= */

.card.no-border .media img,
.card.card--flat.no-border .media img,
.card.card--popup.no-border .media img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   10) FLUID GAP LOGIC VIA CLAMP
--------------------------------------------------------- */
:root {
  --card-gap: clamp(0.75rem, 2vw + 0.5rem, 2rem);
}

@media (max-width: 599.98px) {
  :root { --card-gap: 0.75rem; }
}

@media (min-width: 600px) and (max-width: 767.98px) {
  :root { --card-gap: 1rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  :root { --card-gap: 1.5rem; }
}

@media (min-width: 992px) {
  :root { --card-gap: 2rem; }
}

@media (max-width: 599.98px) {
  :root {
    --card-gap: 0.35rem !important;
  }
}

/* =========================================================
   END OF FILE — css/components/cards.css
========================================================= */