/* ==========================================================================
   pages/features.css — Features page
   Uses: tokens.css + base.css + layout.css + components/nav.css + hero.css + card.css
   Depends on card.css structure:
   .section-card + (.card-media img) + .card-body
   ========================================================================== */

.features{
  padding-bottom: 72px;
}

/* Keep hero spacing consistent with Topics 
.features .topics-hero{
  margin-bottom: 0;
}
*/
/* ==========================================================================
   Child-page hero reduction (−25%)
   (Topics hero uses max-height: 640px; reduce to 480px)
   ========================================================================== */


/* Topics sets a fixed height on small screens (330px). Reduce ~25% */
@media (max-width: 640px){
  .features .topics-hero-media{
    height: 250px;
  }
}


.features .topics-cats-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
  margin-top: 14px; /* move inline style into CSS */
}

/* 3-up by default */
.features .topics-cats-grid > .section-card{
  grid-column: span 4;
}

/* 2-up */
@media (max-width: 980px){
  .features .topics-cats-grid > .section-card{
    grid-column: span 6;
  }
}

/* 1-up */
@media (max-width: 640px){
  .features .topics-cats-grid > .section-card{
    grid-column: span 12;
  }
}

/* ==========================================================================
   Landscape card geometry + media
   ========================================================================== */

/* Ensure landscape cards stack as image over body */
.features .section-card.card--landscape{
  grid-template-rows: auto 1fr;
}

/* Media area: landscape ratio */
.features .section-card.card--landscape .card-media{
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Image treatment (subtle) */
.features .section-card.card--landscape .card-media img{
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05) brightness(.92);
}

/* ==========================================================================
   Card body typography + meta row
   ========================================================================== */

.features .section-card .card-body{
  padding: 16px var(--pad) 18px;
  gap: 10px;
}

.features .section-card .card-head{
  gap: 8px;
}

/* Scoped pill styling (safe even if you also define .pill elsewhere) */
.features .section-card .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,245,.92);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.features .section-card .card-title{
  margin: 0;
  font-size: 17px;
  letter-spacing: .01em;
}

.features .section-card .card-desc{
  margin: 0;
  color: rgba(170,180,195,.92);
  line-height: 1.55;
  max-width: 70ch;
}

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

/* Buttons are spans in your markup; ensure they feel clickable */
.features .section-card .card-actions .btn{
  cursor: pointer;
}