/* ==========================================================================
   ALPACAS SECTION  —  /alpacas/
   --------------------------------------------------------------------------
   Load AFTER /style/style.css. Only adds what this section needs; tokens,
   header, nav, footer, and base type all come from style.css.

   Contents
     1. Topic grid        <- the hub: small cards + big "section" cards
     2. Breadcrumb
     3. Article layout
     4. Figures
     5. Fact table
     6. Next-topic footer
   ========================================================================== */


/* 1. TOPIC GRID
   --------------------------------------------------------------------------
   Two card types, one shared class:

     SMALL CARD   <a class="topic-card">      whole card is the link
                  single-article topics — icon, title, sentence, tags

     SECTION CARD <div class="topic-card">    spans 2 columns via .is-section
                  parent categories — photo strip, linked title, sentence,
                  and a row of sub-links to its children

   A card can't be one big <a> once it contains sub-links (links can't
   nest), which is why section cards are a <div> with links inside.
   Both carry the fleece thread on the left, set per-card via --thread.
   ========================================================================== */
.topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  grid-auto-flow:dense;     /* backfill gaps: big + small cards always tile */
  align-items:start;        /* natural heights — no shared baselines */
  gap:1.75rem 1.375rem;     /* roomy: cards must read as separate tiles */
  margin:0;
  padding:0;
  list-style:none;
}

/* Parent categories take two columns. On narrow screens the grid is a
   single column, so the span must be released or the card overflows. */
.topic-grid .is-section{ grid-column:span 2; }
@media (max-width:40rem){
  .topic-grid .is-section{ grid-column:auto; }
}

.topic-card{
  --thread:var(--fleece-silver);          /* fallback if a card sets none */
  position:relative;
  display:block;
  padding:1.375rem 1.375rem 1.25rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:none;                       /* the ::before thread replaces it */
  border-radius:0 var(--radius) var(--radius) 0;
  color:inherit;
  text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}

/* Bold mosaic. Cards are straight, but tops stair-step by up to ~2.75rem
   and some cards get visibly more room, so the grid reads as hand-set
   tiles rather than rows. Overlapping nth-child patterns keep it from
   striping; new cards pick up an offset automatically. Tune strength
   here — halve everything for subtle, delete the block for flush. */
.topic-grid li:nth-child(3n+2) .topic-card{ margin-top:1.5rem; }
.topic-grid li:nth-child(3n)   .topic-card{ margin-top:2.75rem; }
.topic-grid li:nth-child(4n)   .topic-card{ margin-top:.75rem; }
.topic-grid li:nth-child(3n+1) .topic-card{ padding-bottom:2.5rem; }
.topic-grid li:nth-child(5n)   .topic-card{ padding-bottom:3rem; }

/* Single column (phones): the stagger just makes uneven gaps, so reset. */
@media (max-width:40rem){
  .topic-grid .topic-card{ margin-top:0; }
}

/* Opt-in roomier tile: add class="is-roomy" to any card's <li> to give
   one more size step to the mix. */
.topic-grid .is-roomy .topic-card{ padding-top:1.75rem; padding-bottom:2.375rem; }

/* The thread. Draws in on load (staggered below), widens on hover. */
.topic-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--thread);
  transform-origin:left top;
  transition:transform .25s var(--ease);
  animation:thread-draw .5s var(--ease) backwards;
}
@keyframes thread-draw{
  from{ transform:scaleY(0); }
}
.topic-grid li:nth-child(1) .topic-card::before{ animation-delay:.05s; }
.topic-grid li:nth-child(2) .topic-card::before{ animation-delay:.13s; }
.topic-grid li:nth-child(3) .topic-card::before{ animation-delay:.21s; }
.topic-grid li:nth-child(4) .topic-card::before{ animation-delay:.29s; }
.topic-grid li:nth-child(5) .topic-card::before{ animation-delay:.37s; }
.topic-grid li:nth-child(6) .topic-card::before{ animation-delay:.45s; }
.topic-grid li:nth-child(7) .topic-card::before{ animation-delay:.53s; }
.topic-grid li:nth-child(8) .topic-card::before{ animation-delay:.61s; }
.topic-grid li:nth-child(9) .topic-card::before{ animation-delay:.69s; }

/* Any card: hovering widens its thread. */
.topic-card:hover::before{ transform:scaleX(2.5); }

/* Whole-link (small) cards additionally slide and lift their icon. */
a.topic-card:hover{
  transform:translateX(3px);
  box-shadow:var(--shadow-sm);
  color:inherit;
}
a.topic-card:hover .topic-icon{ transform:translateY(-3px); }

/* --- Photo strip (section cards) ---
   Bleeds to the card's top and side edges. Replace the .photo-todo div
   with <img src="..." alt="..."> when the image is ready. ~1200x400. */
.topic-photo{
  margin:-1.375rem -1.375rem 1.125rem;
  aspect-ratio:3/1;
  overflow:hidden;
  border-bottom:1px solid var(--fleece-beige);
  border-radius:0 var(--radius) 0 0;
}
.topic-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo-todo{
  display:grid;
  place-items:center;
  height:100%;
  background:var(--fleece-white);
  border:1px dashed var(--fleece-beige);
  color:var(--fleece-silver);
  font-size:.8125rem;
}

/* --- Card innards --- */
.topic-icon{
  display:block;
  width:2rem;
  height:2rem;
  margin-bottom:.875rem;
  color:var(--thread);
  transition:transform .25s var(--ease);
}

.topic-title{
  display:block;
  margin:0 0 .35rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 40;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--fleece-bay);
}
/* On section cards the title itself is the link to the overview page. */
.topic-title a{
  color:inherit;
  text-decoration:none;
}
.topic-title a:hover{ color:var(--indigo); }

.topic-desc{
  display:block;
  margin:0;
  font-size:.875rem;
  line-height:1.5;
  color:var(--fleece-brown);
}

/* Keyword row on small cards — the quick-grep pass. */
.topic-tags{
  display:block;
  margin-top:.875rem;
  font-size:.6563rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}

/* Sub-link row on section cards. These start as #anchors into the
   overview article; when a child becomes its own subgroup, only the
   href changes. */
.topic-sublinks{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.25rem;
  margin-top:1rem;
  padding-top:.875rem;
  border-top:1px solid var(--fleece-beige);
  font-size:.8125rem;
  font-weight:500;
}
.topic-sublinks a{
  color:var(--indigo);
  text-decoration:none;
  white-space:nowrap;
}
.topic-sublinks a:hover{ text-decoration:underline; }
.topic-sublinks a::after{ content:" →"; }


/* 2. BREADCRUMB
   ========================================================================== */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0 0 1.5rem;
  padding:0;
  list-style:none;
  font-size:.8125rem;
  font-weight:500;
}
.crumbs a{
  color:var(--fleece-brown);
  text-decoration:none;
}
.crumbs a:hover{ color:var(--indigo); text-decoration:underline; }
.crumbs li + li::before{
  content:"/";
  margin-right:.5rem;
  color:var(--fleece-silver);
}
.crumbs [aria-current]{ color:var(--fleece-silver); }


/* 3. ARTICLE LAYOUT
   ========================================================================== */
.article{ max-width:42rem; }

.article .lede{ margin-bottom:2rem; }

.article h2{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--fleece-beige);
}
.article h2:first-of-type{
  margin-top:2.5rem;
}

.article p{ color:var(--fleece-brown); }


/* 4. FIGURES
   ========================================================================== */
.article figure{
  margin:2rem 0;
}
.article figure img{
  border-radius:var(--radius);
  border:1px solid var(--fleece-beige);
}
.article figcaption{
  margin-top:.6rem;
  font-size:.8125rem;
  color:var(--fleece-silver);
}

.figure-todo{
  display:grid;
  place-items:center;
  aspect-ratio:3/2;
  background:var(--fleece-card);
  border:1px dashed var(--fleece-beige);
  border-radius:var(--radius);
  color:var(--fleece-silver);
  font-size:.875rem;
}


/* 5. FACT TABLE
   ========================================================================== */
.fact-table{
  width:100%;
  margin:1.5rem 0 2rem;
  border-collapse:collapse;
  font-size:.9375rem;
}
.fact-table th,
.fact-table td{
  padding:.7rem .25rem;
  border-bottom:1px solid var(--fleece-beige);
  text-align:left;
  vertical-align:top;
}
.fact-table thead th{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.0625rem;
  font-weight:600;
  border-bottom:2px solid var(--fleece-bay);
}
.fact-table tbody th{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}
.fact-table td{ color:var(--fleece-brown); }

.table-scroll{ overflow-x:auto; }


/* 6. NEXT-TOPIC FOOTER
   ========================================================================== */
.next-topic{
  max-width:42rem;
  margin-top:3.5rem;
}
.next-topic a{
  display:block;
  padding:1.125rem 1.25rem;
  background:var(--fleece-card);
  border:1px solid var(--fleece-beige);
  border-left:3px solid var(--fleece-silver);
  border-radius:0 var(--radius) var(--radius) 0;
  text-decoration:none;
  transition:border-left-color .2s var(--ease),
             transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.next-topic a:hover{
  border-left-color:var(--indigo);
  transform:translateX(2px);
  box-shadow:var(--shadow-sm);
}
.next-topic .kicker{
  display:block;
  margin-bottom:.2rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}
.next-topic .dest{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 40;
  font-size:1.125rem;
  font-weight:600;
  color:var(--fleece-bay);
}


/* Add to /alpacas/style/alpacas.css */
.comparison-chart{
  margin-top:4.5rem;
  padding-top:3.5rem;
  border-top:1px solid var(--fleece-beige);
}
.comparison-chart > div{ max-width:42rem; }
.comparison-chart h2{ margin:0 0 1rem; }
.comparison-chart p{ color:var(--fleece-brown); }
.comparison-chart figure{ margin:2rem 0 0; }
.comparison-chart img{
  width:100%;
  border:1px solid var(--fleece-beige);
  border-radius:var(--radius);
}
@media (max-width:52rem){
  .comparison-chart{ margin-top:3.5rem; padding-top:2.5rem; }
}