/* ==========================================================================
   components/card.css — Unified card system
   Owns ALL card structure, layout variants, media framing, and interactions

   UPDATED (migration from utilities.css):
   - Buttons (.btn, .btn.primary, .btn.secondary, .btn.sm)
   - Audio Chip module (.audio-chip, .audio-chip-btn, cursor fix)

   UPDATED (Books + Features hub centering):
   - Center card-head (chips), title/desc/actions for cards inside .books-grid
   - Does NOT affect .card--surface (article surfaces) or tiles
   ========================================================================== */

/* ==========================================================================
   Catalogue Grid (Books / Features grids)
   - TRUE 3-up grid (fat columns, tight gutters)
   ========================================================================== */

.books-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(36px, 4vw, 48px);
  row-gap: 28px;
  align-items: start;
}

.books-grid > .section-card{
  width: 100%;
  max-width: none;
  justify-self: stretch;
  grid-column: auto;
}

/* 3 → 2 (tuned) */
@media (max-width: 900px){
  .books-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 22px;
  }
}

/* 2 → 1 only at 640px */
@media (max-width: 640px){
  .books-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;
  }
}


/* ==========================================================================
   Section Head (shared)
   ========================================================================== */

.section-head{
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.section-sub{
  margin: 0;
  max-width: none;
  color: rgba(170,180,195,.9);
}


/* ==========================================================================
   Catalogue Wrapper
   ========================================================================== */

.books-catalogue{
  padding: clamp(22px, 3vw, 34px) 0;
}


/* ==========================================================================
   Base Card Container
   ========================================================================== */

.section-card{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);

  background: linear-gradient(
    180deg,
    rgba(17,21,27,.96),
    rgba(15,19,25,.96)
  );

  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;

  transition:
    transform .12s ease,
    border-color .15s ease,
    background .15s ease;
}

.section-card:hover{
  transform: translateY(-2px);
  border-color: rgba(215,188,161,.35);
  background: rgba(215,188,161,.06);
}

.section-card:focus-visible{
  outline: none;
  border-color: rgba(215,188,161,.6);
}


/* ==========================================================================
   Surface wrapper modifier (global)
   ========================================================================== */

.section-card.card--surface{
  transform: none;
  padding: var(--pad);
}

.section-card.card--surface:hover{
  transform: none;
  border-color: var(--line);
  background: linear-gradient(
    180deg,
    rgba(17,21,27,.96),
    rgba(15,19,25,.96)
  );
}

.section-card.card--surface:hover .card-media img{
  transform: none;
}

.section-card.card--surface .section-head:last-child{
  margin-bottom: 0;
}


/* ==========================================================================
   IMPORTANT: Grids inside surfaces should span full width
   ========================================================================== */

.section-card.card--surface .books-grid{
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  margin-top: 18px;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

@media (max-width: 640px){
  .section-card.card--surface .books-grid{
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
}


/* ==========================================================================
   Layout Variants
   ========================================================================== */

.card--stack{
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.card--horizontal{
  grid-template-columns: minmax(120px, 38%) 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
}

@media (max-width: 720px){
  .card--horizontal{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}


/* ==========================================================================
   Media Container
   ========================================================================== */

.card-media{
  width: 100%;
  overflow: hidden;
}


/* ==========================================================================
   Aspect Ratio Variants
   ========================================================================== */

.card--portrait .card-media{
  aspect-ratio: 2 / 3;
  max-height: 300px;
}

.card--landscape .card-media{
  aspect-ratio: 16 / 9;
}

.card--square .card-media{
  aspect-ratio: 1 / 1;
}


/* ==========================================================================
   Image Behavior
   ========================================================================== */

.card-media img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  transition: transform .18s ease;
}

.section-card:hover .card-media img{
  transform: scale(1.05);
}


/* ==========================================================================
   Contain Variant
   ========================================================================== */

.card--contain .card-media img{
  object-fit: contain;
  background: rgba(0,0,0,.25);
  transform: none;
}


/* ==========================================================================
   Card Body
   ========================================================================== */

.card-body{
  padding: 18px var(--pad) 22px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
}


/* ======================================================================
   Section Text (long-form copy under section headers)
   Use for multi-paragraph intro/essay text inside .section-card surfaces.
   ====================================================================== */

.section-text{
  margin: 0;
  max-width: none;
  width: 100%;
  color: rgba(170,180,195,.9);
  line-height: 1.6;
}

/* paragraph rhythm */
.section-text p{ margin: 0; }
.section-text p + p{ margin-top: 14px; }


/* ==========================================================================
   Card Header / Meta
   ========================================================================== */

.card-head{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.card-title{
  margin: 0;
  margin-bottom: 16px;
  font-size: 16px;
  letter-spacing: .01em;
  color: var(--text);
  text-align: center;
}

.card-desc{
  margin: 0;
  color: rgba(170,180,195,.92);
  line-height: 1.5;
}


/* ==========================================================================
   Card Actions
   ========================================================================== */

.card-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}


/* ==========================================================================
   HUB CARDS: center Books + Features cards (cards in .books-grid)
   - Tight scope: only cards rendered in hub grids under main.topics
   - Won’t affect story/article surfaces (.card--surface) or tiles
   ========================================================================== */

main.topics .books-grid > .section-card:not(.card--surface) .card-body{
  text-align: center;
  justify-items: center; /* stop “full-width” grid children reading left */
}

main.topics .books-grid > .section-card:not(.card--surface) .card-head{
  justify-content: center; /* chips row */
}

main.topics .books-grid > .section-card:not(.card--surface) .card-desc{
  text-align: center;
}

main.topics .books-grid > .section-card:not(.card--surface) .card-actions{
  justify-content: center; /* buttons row */
}

main.topics .books-grid > .section-card:not(.card--surface) .card-question{
  text-align: center;
}


/* ==========================================================================
   Question Copy (Hub cards)
   - Rendered when JSON provides story.question
   - Italic callout, NO "Q:" prefix
   ========================================================================== */

.card-question{
  margin: 0;
  line-height: 1.55;

  /* brighter + more “callout” than desc */
  color: rgba(215,188,161,.95);

  /* emphasis via italics (not a "Q" label) */
  font-style: italic;

  /* a touch of weight so italics don’t get too wispy */
  font-weight: 400;

  letter-spacing: .01em;
}

/* REMOVE the Q marker entirely */
/* .card-question::before{ ... }  <-- intentionally gone */


/* ==========================================================================
   Shared Utilities (used by pages/cards)
   ========================================================================== */

.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}


/* ==========================================================================
   Tile Card (Reusable)
   ========================================================================== */

.tile-card{
  display: grid;
  grid-template-rows: auto 1fr;

  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;

  text-decoration: none;
  color: inherit;

  background: rgba(10,12,16,.45);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}

.tile-card:hover{
  transform: translateY(-2px);
  border-color: rgba(215,188,161,.35);
  background: rgba(215,188,161,.06);
}

.tile-media{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tile-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .18s ease;
}

.tile-card:hover .tile-media img{
  transform: scale(1.05);
}

.tile-body{
  padding: 16px 16px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.tile-title{
  margin: 0;
  font-size: 16px;
  letter-spacing: .01em;
  color: var(--text);
}

.tile-desc{
  margin: 0;
  color: rgba(170,180,195,.92);
  line-height: 1.5;
}

.tile-body .btn{
  justify-self: start;
}

/* Back-compat (plain CSS safe) */
.cat-tile{
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: rgba(10,12,16,.45);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}

.cat-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(215,188,161,.35);
  background: rgba(215,188,161,.06);
}

.cat-media{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.cat-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .18s ease;
}

.cat-tile:hover .cat-media img{
  transform: scale(1.05);
}

.cat-body{
  padding:16px 16px 18px;
  display:grid;
  gap:10px;
  align-content:start;
}

.cat-title{
  margin:0;
  font-size:16px;
  letter-spacing:.01em;
  color:var(--text);
  text-align: center;
}

.cat-desc{
  margin:0;
  color:rgba(170,180,195,.92);
  line-height:1.5;
  text-align: center;
}

.cat-body .btn{
  justify-self:center;
}


/* ==========================================================================
   Divider (shared visual language)
   ========================================================================== */

.divider{
  margin: clamp(40px, 6vw, 70px) 0;
  border-top: 1px solid var(--line);
  position: relative;
}

.divider::after{
  content:"";
  position:absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(215,188,161,.9),
    transparent
  );
  opacity: .75;
}

/* ======================================================================
   Divider Modifier: end-cap (no extra bottom spacing)
   Use when a divider is the last element before footer / end of section.
   ====================================================================== */

.divider.divider--end{
  margin-bottom: 0;
}

/* ======================================================================
   Terminal Card Modifier
   - Use when a card is followed immediately by a divider or footer
   - Prevents vertical spacing from leaking past the card boundary
   ====================================================================== */

.section-card.card--flush-after{
  margin-bottom: 0;
}

.section-card.card--flush-after .card-body{
  padding-bottom: 0;
}

/* Safety: if any child introduces margin-bottom, neutralize it */
.section-card.card--flush-after .card-body > *:last-child{
  margin-bottom: 0;
}


/* ==========================================================================
   Buttons (MOVED FROM utilities.css)
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);

  color: rgba(232,237,245,.94);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;

  cursor: pointer;
  user-select: none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn.primary{
  border-color: rgba(215,188,161,.40);
  background: rgba(215,188,161,.12);
}

.btn.primary:hover{
  border-color: rgba(215,188,161,.70);
  background: rgba(215,188,161,.18);
}

.btn.secondary{
  border-color: rgba(161,187,215,.35);
  background: rgba(161,187,215,.10);
}

.btn.secondary:hover{
  border-color: rgba(161,187,215,.65);
  background: rgba(161,187,215,.16);
}

.btn.sm{
  padding: 9px 14px;
  font-size: 13px;
}


/* ==========================================================================
   Audio Chip (MOVED FROM utilities.css)
   ========================================================================== */

.audio-chip{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap: 4px;
  flex-wrap: nowrap;

  width: fit-content;
  max-width: 100%;

  margin-top: 8px;
  padding: 4px 8px;

  border-radius: 999px;
  border: 1px solid rgba(215,188,161,.35);
  background: rgba(215,188,161,.10);
  color:  #FFB13A; /*  rgba(215,188,161,.95); */


  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.card-body .audio-chip{
  margin-left: auto;
  margin-right: auto;
}

.audio-chip-label{
  white-space: nowrap;
  line-height: 1;
}

.audio-chip-actions{
  display:flex;
  gap: 6px;
  flex-wrap: nowrap;

  letter-spacing: normal;
  text-transform: none;
  margin-left: 2px;
}

.audio-chip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 4px 8px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,245,.92);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  text-decoration: none;

  cursor: pointer; /* always hand */
}

.audio-chip-btn:hover{
  border-color: rgba(215,188,161,.55);
  background: rgba(215,188,161,.10);
}

.audio-chip-btn:disabled,
.audio-chip-btn[aria-disabled="true"]{
  cursor: default;
}

.audio-chip[aria-disabled="true"] .audio-chip-btn{
  cursor: default;
}


/* ======================================================================
   Transcript chip — CLONE audio chip (same surface + same font)
   Only difference: label color uses --cta-gold-2
   ====================================================================== */

.transcript-chip{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap: 4px;
  flex-wrap: nowrap;

  width: fit-content;
  max-width: 100%;

  margin-top: 8px;
  padding: 4px 8px;

  border-radius: 999px;

background: rgba(150,165,185,.12);
border: 1px solid rgba(150,165,185,.38);
  /* EXACTLY match audio chip surface 
  border: 1px solid rgba(215,188,161,.35);
  background: rgba(215,188,161,.10);
*/
  /* match audio chip typography */
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* If transcript chip appears in centered card bodies, keep parity */
.card-body .transcript-chip{
  margin-left: auto;
  margin-right: auto;
}

.transcript-chip-label{
  white-space: nowrap;
  line-height: 1;

  /* your request */
  color: var(--cta-gold-2);
}

.transcript-chip-actions{
  display:flex;
  gap: 6px;
  flex-wrap: nowrap;

  /* match audio chip: actions are not spaced-out caps */
  letter-spacing: normal;
  text-transform: none;
  margin-left: 2px;
}

.transcript-chip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 4px 8px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,245,.92);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  text-decoration: none;

  cursor: pointer; /* always hand */
}

.transcript-chip-btn:hover{
  border-color: rgba(215,188,161,.55);
  background: rgba(215,188,161,.10);
}

.transcript-chip-btn:disabled,
.transcript-chip-btn[aria-disabled="true"]{
  cursor: default;
}

.transcript-chip[aria-disabled="true"] .transcript-chip-btn{
  cursor: default;
}