/* ==========================================================================
   Line Express — /stories/ (o hub dos Web Stories)
   Grade de pôsteres 3:4, como a vitrine: cada capa é um link para o story
   (que é uma página AMP à parte, sem este CSS). Mesma paleta do site; a
   página é escrita inteira por ferramentas/stories/gerar.py.
   ========================================================================== */

.storieshero{
  padding:clamp(120px,17vh,190px) var(--pad) clamp(30px,5vh,56px);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,194,71,.07),transparent 62%),
    var(--black);
}
.storieshero .kicker{ margin:0 0 14px; }
.storieshero h1{
  margin:0;
  font-size:clamp(34px,6.4vw,68px);
  font-weight:700; line-height:1.04; letter-spacing:-.035em;
}
.storieshero .lede{ margin:clamp(16px,2.4vh,26px) 0 0; max-width:60ch; }

/* --------------------------------------------------------------- grade --- */
.stories{
  padding:clamp(26px,4vh,50px) var(--pad) clamp(70px,10vh,120px);
}
.stories__grade{
  text-align:left;                 /* o .wrap centraliza; o card é lido à esquerda */
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2.4vw,26px);
}
@media (min-width:640px){
  .stories__grade{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:980px){
  .stories__grade{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.story{
  display:block; color:inherit; text-decoration:none;
}
.story__capa{
  position:relative;
  aspect-ratio:3/4; overflow:hidden;
  border-radius:18px;
  background:#101013;
  border:1px solid var(--line-soft);
  transition:transform .35s ease, border-color .35s ease;
}
.story__capa img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.story:hover .story__capa{ border-color:var(--line); transform:translateY(-3px); }
.story:hover .story__capa img{ transform:scale(1.03); }
.story__tag{
  position:absolute; top:12px; left:12px;
  padding:5px 10px; border-radius:999px;
  background:rgba(10,10,12,.72); backdrop-filter:blur(8px);
  color:var(--accent-b); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.story__tit{
  margin:14px 0 4px;
  font-size:clamp(16px,1.6vw,19px); font-weight:600;
  line-height:1.22; letter-spacing:-.02em;
}
.story__meta{
  margin:0; color:var(--text-dim); font-size:13px;
}
.story__desc{
  margin:8px 0 0; color:var(--text-mid);
  font-size:14.5px; line-height:1.5;
}
@media (max-width:639px){
  .story__desc{ display:none; }   /* em duas colunas o pôster e o título bastam */
}