/* =====================================================================
   FLORIPA WALKS · style/historia.css
   Seção "Nossa história" montada por blocos (includes/historia.php).
   Dois formatos, escolhidos no painel:
     .story--lateral  texto à esquerda + foto/carrossel à direita
     .story--centro   sem foto lateral: texto centralizado, estilo revista
   Carregado depois do style.css (que tem a base .story-*).
   ===================================================================== */

/* ---------- blocos de texto (valem nos dois formatos) ---------- */
.story-txt p{color:var(--muted);margin-bottom:18px}
.story-txt p:last-child{margin-bottom:18px}
.story-txt b,.story-txt strong{color:var(--ink);font-weight:600}
.story-txt a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.story-txt ul,.story-txt ol{color:var(--muted);margin:0 0 18px 1.2em}

/* ---------- imagens entre os parágrafos ---------- */
.story-fig{margin:30px 0 34px}
.story-fig-grade{display:grid;gap:14px}
.story-fig-foto{position:relative;overflow:hidden;border-radius:16px;background:var(--paper-2);
  box-shadow:0 18px 44px rgba(10,46,87,.12)}
.story-fig-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease,cubic-bezier(.22,1,.36,1))}
.story-fig-foto:hover img{transform:scale(1.03)}

/* 1 foto: deitada */
.story-fig--n1 .story-fig-foto{aspect-ratio:16/10}
/* 2 fotos: lado a lado, em pé */
.story-fig--n2 .story-fig-grade{grid-template-columns:1fr 1fr}
.story-fig--n2 .story-fig-foto{aspect-ratio:4/5}
/* 3 fotos: mosaico (uma grande + duas menores) */
.story-fig--n3 .story-fig-grade{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/10}
.story-fig--n3 .story-fig-foto:first-child{grid-row:1 / span 2}

.story-fig figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5;
  display:flex;gap:10px;align-items:baseline}
.story-fig figcaption::before{content:"";flex:none;width:18px;height:2px;background:var(--yellow);transform:translateY(-4px)}

/* =====================================================================
   FORMATO 1 — COM FOTO LATERAL
   ===================================================================== */
.story--lateral .story-copy .story-quote{margin:28px 0 26px}
.story--lateral .story-copy > :last-child{margin-bottom:0}

/* foto da direita com várias fotos = carrossel */
.story-img .carrossel{position:absolute;inset:0}
.story-img.tem-carrossel{background:var(--navy-deep)}

/* texto comprido (ou com fotos no meio): a foto da direita acompanha a rolagem */
.story-grid--longo{align-items:start}
.story-grid--longo .story-img{position:sticky;top:110px;min-height:0;height:min(76vh,600px)}

/* =====================================================================
   FORMATO 2 — SEM FOTO LATERAL (texto centralizado)
   ===================================================================== */
.story-centro{max-width:760px;margin:0 auto}
.story-cab{text-align:center;margin-bottom:38px}
.story-cab .eyebrow{margin-left:auto;margin-right:auto}
.story-cab h2{font-size:clamp(2.1rem,4vw,3rem);text-wrap:balance}
.story-cab h2::after{content:"";display:block;width:46px;height:3px;border-radius:3px;background:var(--yellow);margin:26px auto 0}

.story--centro .story-txt p{font-size:18px;line-height:1.75}
/* primeiro parágrafo em destaque, como a abertura de uma reportagem */
.story--centro .story-lead p:first-child{font-size:clamp(1.2rem,2vw,1.38rem);line-height:1.6;color:var(--ink)}
.story--centro .story-lead p:first-child::first-letter{
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:3.3em;line-height:.8;
  float:left;margin:8px 12px 0 0;color:var(--yellow-d)}

/* imagem "larga": sai da coluna de texto e ocupa a largura do site */
.story--centro .story-fig{margin:44px 0 46px}
.story--centro .story-fig--larga{
  --larg:min(1180px, calc(100vw - 64px));
  width:var(--larg);
  margin-left:calc((100% - var(--larg)) / 2);
  margin-right:calc((100% - var(--larg)) / 2);
}
.story--centro .story-fig--larga.story-fig--n1 .story-fig-foto{aspect-ratio:21/9}
.story--centro .story-fig--larga.story-fig--n2 .story-fig-foto{aspect-ratio:3/2}
.story--centro .story-fig--larga.story-fig--n3 .story-fig-grade{aspect-ratio:21/9}
.story--centro .story-fig figcaption{display:block;text-align:center}
.story--centro .story-fig figcaption::before{display:none}

/* citação centralizada, maior */
.story--centro .story-quote{
  border-left:0;text-align:center;padding:34px 10px 6px;margin:40px auto 34px;max-width:640px;
  font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.4;position:relative;text-wrap:balance}
.story--centro .story-quote::before{
  content:"";position:absolute;top:0;left:50%;width:56px;height:3px;margin-left:-28px;border-radius:3px;background:var(--yellow)}

/* ---------- faixa de números: se adapta à quantidade ---------- */
.story-stats-strip.story-stats-1{grid-template-columns:1fr}
.story-stats-strip.story-stats-2{grid-template-columns:repeat(2,1fr)}
.story-stats-strip.story-stats-3{grid-template-columns:repeat(3,1fr)}
.story--centro .story-stats-strip{margin-top:70px}

/* ---------- celular / tablet ---------- */
@media (max-width:980px){
  .story-grid--longo{align-items:stretch}
  .story-grid--longo .story-img{position:relative;top:auto;height:auto;min-height:420px}
  .story-img.tem-carrossel{min-height:420px}
  .story-stats-strip.story-stats-3{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .story-fig-grade{gap:10px}
  .story-fig--n2 .story-fig-foto{aspect-ratio:3/4}
  .story-fig--n3 .story-fig-grade{aspect-ratio:4/5;grid-template-columns:1fr 1fr;grid-template-rows:1.4fr 1fr}
  .story-fig--n3 .story-fig-foto:first-child{grid-row:auto;grid-column:1 / span 2}
  .story--centro .story-fig--larga{--larg:calc(100vw - 32px)}
  .story--centro .story-fig--larga.story-fig--n1 .story-fig-foto{aspect-ratio:4/3}
  .story--centro .story-fig--larga.story-fig--n2 .story-fig-foto{aspect-ratio:3/4}
  .story--centro .story-fig--larga.story-fig--n3 .story-fig-grade{aspect-ratio:4/5}
  .story--centro .story-txt p{font-size:17px}
  .story-img.tem-carrossel,.story-grid--longo .story-img{min-height:360px}
  .story-stats-strip.story-stats-3{grid-template-columns:1fr 1fr 1fr;gap:12px;padding:34px 18px}
  .story-stats-strip.story-stats-1,.story-stats-strip.story-stats-2{padding:34px 18px}
}