/* =========================================================
   INSIGHTS v5.0 — mobile-first, container-first (+ fallbacks)
   Sem dependências externas. Zero overflow lateral.
   ========================================================= */

/* == 00) RESET / HELPERS ============================================= */
.insights *{ box-sizing:border-box }
.insights img, .insights video, .insights canvas, .insights svg{
  max-inline-size:100%; height:auto; display:block
}
.insights a{ color:inherit; text-decoration:none }
.insights [hidden]{ display:none !important }
.insights :focus-visible{
  outline:0;
  box-shadow:0 0 0 2px #fff3, 0 0 0 4px color-mix(in oklab,var(--brand-1) 80%, #fff 20%);
  border-radius:8px
}
/* protege contra scroll horizontal global */
html, body{ overflow-x:hidden }

/* == 01) TOKENS / BASE =============================================== */
.insights{
  color-scheme:dark; overflow-x:clip;

  /* brand / glass */
  --brand-1:#5b63ff; --brand-2:#2f37ff;
  --glass-bg: color-mix(in oklab, #fff 6%, transparent);
  --glass-bd: color-mix(in oklab, #fff 12%, transparent);

  /* tipografia / cor */
  --ui: Sora, Inter, system-ui, -apple-system, sans-serif;
  --text:#f3f5ff; --text-dim:rgba(243,245,255,.78);
  --kicker:#cbd2ff; --eyebrow:#9aa1ff;

  /* UI */
  --card-r:18px; --shadow:0 14px 40px rgba(13,15,35,.25);
  --img-focal-y:40%;

  /* ritmo fluido */
  --gap-xs:clamp(8px,2vw,16px);
  --gap-s: clamp(14px,3.2vw,24px);
  --gap-m: clamp(22px,4.6vw,40px);
  --gap-l: clamp(36px,6.4vw,64px);
}

/* == 02) CONTAINERS =================================================== */
.insights :is(.wrap,.container){
  max-width:var(--wrap-w);
  margin-inline:auto;
  padding-inline:clamp(12px,3.5vw,24px);
  padding-inline-start:max(clamp(12px,3.5vw,24px), env(safe-area-inset-left));
  padding-inline-end:max(clamp(12px,3.5vw,24px), env(safe-area-inset-right));
  container-type:inline-size;
}

/* == 03) HERO ========================================================= */
@media (min-width: 960px){
  .insights .hero--internal{
    /* reduz o espaço abaixo do hero no desktop (de 16px -> 8px) */
    padding-block: clamp(48px, 8vw, 96px) 8px;
  }
}

.insights .hero--internal .title{
  /* título mais colado no lead */
  margin: 0 0 clamp(6px, 1.4vw, 12px);
  font:800 clamp(26px,6.2vw,64px)/1.05 var(--ui);
  letter-spacing:-.02em; text-transform:uppercase; text-wrap:balance;
  scroll-margin-top:calc(var(--nav-h) + 20px)
}
.insights .hero--internal .lead{
  color:var(--text-dim);
  font:600 clamp(.96rem,1.6vw,1.125rem)/1.45 var(--ui);
  margin:6px auto 0; max-width:62ch; text-wrap:balance;
}

/* == 04) FILTROS (pílulas) — reflow (sem scrollbar) =================== */

/* base: wrap + centralizado, nada de overflow */
.insights .filters{
  margin-block-start: var(--gap-s);
  display:flex;
  flex-wrap:wrap;                     /* quebra de linha automática */
  gap:var(--gap-xs);
  justify-content:center;             /* centraliza linhas */
  align-items:center;
  overflow:visible;                    /* sem rolagem */
  padding-inline:0; margin-inline:0;   /* sem “carrossel” nas bordas */
  mask-image:none;
}

/* override: desktop com menos respiro entre hero e filtros */
@media (min-width: 960px){
  .insights .filters{
    margin-block-start: clamp(4px, 1vw, 12px);
  }
}

/* pílula elástica, mas com largura mínima pra não virar “microbotão” */
.insights .filters .pill{
  flex:0 1 auto;                       /* permite encolher e quebrar */
  min-inline-size:clamp(96px, 28cqi, 160px);
  display:inline-flex; align-items:center; justify-content:center;
  height:clamp(34px, 6.5cqi, 40px);
  padding-inline:clamp(12px, 3.5cqi, 18px);
  border-radius:999px; border:1px solid var(--glass-bd);
  background:color-mix(in oklab,#fff 8%, transparent);
  color:var(--kicker);
  font:600 clamp(.86rem, 2.6cqi, .96rem)/1 var(--ui);
  -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 4px 14px #0003;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
  touch-action:manipulation;
}

/* estados */
.insights :where(.filters .pill:hover, .filters .pill:focus-visible){
  background:color-mix(in oklab,#fff 14%, transparent);
  border-color:color-mix(in oklab,#fff 40%, transparent);
  color:#fff; box-shadow:0 6px 20px #0005; transform:translateY(-1px)
}
.insights .filters .pill:is(.is-active,[aria-current="true"],[aria-pressed="true"]){
  color:#fff; background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  border-color:transparent;
  box-shadow:0 10px 26px rgba(47,55,255,.32), 0 0 14px rgba(91,99,255,.22)
}

/* motion safe */
@media (prefers-reduced-motion:reduce){
  .insights .filters .pill{ transition:none }
  .insights :where(.filters .pill:hover, .filters .pill:focus-visible){ transform:none }
}

/* ====== Container queries (fine-tuning) ====== */
@container (width < 420px){
  .insights .filters{ gap:10px }
  .insights .filters .pill{
    min-inline-size:clamp(88px, 40cqi, 140px);
    height:clamp(32px, 7cqi, 36px);
    font-size:clamp(.82rem, 3cqi, .9rem);
    padding-inline:clamp(10px, 4cqi, 14px);
  }
}
@container (width >= 960px){
  .insights .filters{ gap:var(--gap-sm) }
  .insights .filters .pill{ padding-inline:clamp(16px, 1.8cqi, 26px) }
}

/* ====== Fallback pra browsers sem @container ======================== */
@supports not (container-type: inline-size){
  @media (max-width:420px){
    .insights .filters{ gap:10px }
    .insights .filters .pill{
      min-inline-size:clamp(88px, 40vw, 140px);
      height:clamp(32px, 7vw, 36px);
      font-size:clamp(.82rem, 3.2vw, .9rem);
      padding-inline:clamp(10px, 4vw, 14px);
    }
  }
  @media (min-width:960px){
    .insights .filters{ gap:var(--gap-sm); margin-block-start: clamp(4px, 1vw, 12px) }
    .insights .filters .pill{ padding-inline:clamp(16px, 1.2vw, 26px) }
  }
}

/* === Desktop = igual ao mobile (compacto) ============================ */
@container (width >= 960px){
  .insights .filters{
    gap: 14px;                 /* curto e consistente */
    row-gap: 12px;
    justify-content: center;
    padding-block: 6px;
    max-width: min(100%, var(--wrap-w, 1120px));
    margin-inline: auto;
  }
  .insights .filters .pill{
    /* largura só do texto + padding (remove “almofada”) */
    min-inline-size: unset;    /* override do min-width mobile */
    white-space: nowrap;

    height: 36px;              /* mesma pegada do mobile */
    padding-inline: 14px;      /* idem */
    font-size: .9rem;          /* enxuto */
    letter-spacing: 0;         /* limpa */
    box-shadow: 0 6px 18px #0003; /* suaviza a sombra */
  }
}

/* telas bem largas continuam contidas, sem inflar */
@container (width >= 1280px){
  .insights .filters{ gap: 16px; row-gap: 14px }
  .insights .filters .pill{ height: 36px; padding-inline: 14px; font-size: .9rem }
}

/* Fallback sem container queries */
@supports not (container-type: inline-size){
  @media (min-width: 960px){
    .insights .filters{
      gap: 14px; row-gap: 12px;
      justify-content: center;
      padding-block: 6px;
      max-width: min(100%, var(--wrap-w, 1120px));
      margin-inline: auto;
      margin-block-start: clamp(4px, 1vw, 12px); /* garante o override no desktop legacy */
    }
    .insights .filters .pill{
      min-inline-size: unset;
      white-space: nowrap;
      height: 36px;
      padding-inline: 14px;
      font-size: .9rem;
      box-shadow: 0 6px 18px #0003;
    }
  }
}




/* == 05) FEATURED (destaque) — premium pass ============================ */
.section.featured{
  padding: clamp(var(--gap-xs), 2vw, var(--gap-m)) 0 var(--gap-xs);
}

/* CARD base — vidro + luz suave */
.fcard{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  border-radius: var(--card-r);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--brand-1) 8%, transparent) 0%, transparent 60%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in oklab, var(--brand-2) 8%, transparent) 0%, transparent 60%),
    var(--glass-bg);
  border: 1px solid color-mix(in oklab, var(--glass-bd) 70%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, #fff 6%, transparent),
    var(--shadow);
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}
@supports((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .fcard{ backdrop-filter: blur(10px) saturate(118%); -webkit-backdrop-filter: blur(10px) saturate(118%) }
}

/* MÍDIA — bleed total + overlay de legibilidade */
.fcard .media{
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: inherit;
}
.fcard .media img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% var(--img-focal-y);
  transform: translateZ(0);
  will-change: transform;
}
.fcard .media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(5,7,18,.45) 100%),
    linear-gradient(90deg, rgba(5,7,18,.20), transparent 30%, transparent 70%, rgba(5,7,18,.20));
  pointer-events:none;
}

/* SELINHO */
.fcard .badge{
  position: absolute; inset: 14px auto auto 14px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color:#fff;
  font: 700 .72rem/1 var(--ui);
  padding: .42em .72em;
  border-radius: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(20,22,40,.35);
  z-index: 2;
}

/* CONTEÚDO */
.fcard .content{
  display:flex; flex-direction:column; gap:.6rem;
  padding: clamp(var(--gap-s), 2.4vw, var(--gap-m));
  min-width:0; z-index:2;
}

/* EYEBROW / META (menos destaque) */
.f-meta{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.45em;
  font:600 clamp(.78rem,.88vw,.84rem)/1.3 var(--ui);
  color:color-mix(in oklab,var(--eyebrow) 85%,#fff 15%);
  opacity:.85;
  margin-block:4px 8px;
  text-wrap:balance;
  letter-spacing:.01em;
}

/* categoria com toque editorial */
.f-meta span:first-child{
  text-transform:uppercase;
  letter-spacing:.05em;
  color:color-mix(in oklab,var(--brand-1) 80%, var(--brand-2) 20%);
}

/* TÍTULO */
.f-title{
  font: 900 clamp(1.35rem, 2.6vw, 2.25rem)/1.18 var(--ui);
  letter-spacing: -.012em;
  margin: 0 0 .25rem;
  text-wrap: balance;
}

/* DESCRIÇÃO */
.f-desc{
  font: 600 clamp(1rem,1.2vw,1.125rem)/1.55 var(--ui);
  color: var(--text-dim);
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  max-inline-size: 62ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* CTA (se tiver .btn dentro do card) */
.fcard .btn, .fcard .cta{
  display:inline-flex; align-items:center; gap:.5ch;
  font: 700 .95rem/1 var(--ui);
  padding: .78em 1.05em;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--glass-bd) 80%, transparent);
  background: color-mix(in oklab, #fff 7%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(10,12,28,.18), inset 0 1px 0 #ffffff1a;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fcard .btn:hover, .fcard .cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(10,12,28,.24), inset 0 1px 0 #ffffff2a;
}
.fcard .btn:focus-visible, .fcard .cta:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px #fff4, 0 0 0 6px color-mix(in oklab,var(--brand-1) 55%, #000 45%);
}

/* LAYOUT ≥900px: mídia + texto, com gap menor e texto em 4 linhas */
@container (width >= 900px){
  .fcard{
    grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
    column-gap: clamp(12px, 1.8vw, 28px);
  }
  .f-desc{ -webkit-line-clamp: 4; max-inline-size: 68ch }
  .fcard .content{ padding: clamp(14px, 1.4vw, 22px) }
}

/* Microinterações */
@media (prefers-reduced-motion:no-preference){
  .fcard{ transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease }
  .fcard:hover{
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklab, #fff 8%, transparent),
      0 18px 48px rgba(12,14,30,.34);
  }
  .fcard:hover .media img{ transform: scale(1.02) }
}

/* == 06) GRID DE POSTS ================================================ */
.section.posts{
  padding: var(--gap-xs) 0 var(--gap-s);
}
.grid-posts{
  display:grid; gap:var(--gap-s);
  grid-template-columns:repeat(12,minmax(0,1fr));
  container-type:inline-size; container-name:gridposts
}
/* container queries (modern) */
@container gridposts (width < 640px){ .post-card{ grid-column:span 12 } }
@container gridposts (640px <= width < 960px){ .post-card{ grid-column:span 6 } }
@container gridposts (width >= 960px){ .post-card{ grid-column:span 4 } }
/* media fallbacks (legacy) */
@media (max-width:639.98px){ .grid-posts .post-card{ grid-column:span 12 } }
@media (min-width:640px) and (max-width:959.98px){ .grid-posts .post-card{ grid-column:span 6 } }
@media (min-width:960px){ .grid-posts .post-card{ grid-column:span 4 } }

.post-card{
  display:flex; flex-direction:column; border-radius:var(--card-r);
  background:var(--glass-bg); border:1px solid var(--glass-bd);
  overflow:hidden; transition:transform .16s, border-color .2s, box-shadow .2s;
  content-visibility:auto; contain-intrinsic-size:260px 360px
}
.post-card:hover{ transform:translateY(-3px); border-color:color-mix(in oklab,var(--glass-bd) 60%, #fff 40%); box-shadow:var(--shadow) }

.post-card .thumb{ position:relative; display:block; inline-size:100%; aspect-ratio:16/9; overflow:hidden; border:0 }
.post-card .thumb img{
  inline-size:100%; block-size:100%; object-fit:cover; object-position:50% var(--img-focal-y); border:0; transform:translateZ(0)
}
.cat-badge{
  position:absolute; inset:10px auto auto 10px; background:rgba(15,15,25,.66);
  border:1px solid var(--glass-bd); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.75rem; border-radius:999px; padding:.28em .66em
}
.post-card .content{ padding:var(--gap-s); display:flex; flex-direction:column; gap:8px }
.post-card h3{ font:800 clamp(1.02rem,1.6vw,1.22rem)/1.25 var(--ui); letter-spacing:-.01em; overflow-wrap:anywhere; text-wrap:balance }
.post-card .excerpt{
  font-size:.96rem; color:var(--text-dim); margin-bottom:var(--gap-s); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden
}
@container gridposts (width < 480px){ .post-card .excerpt{ -webkit-line-clamp:3 } }
@media (max-width:479.98px){ .post-card .excerpt{ -webkit-line-clamp:3 } }

.meta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:.82rem; color:var(--kicker) }
.meta span{ display:inline-flex; align-items:center; gap:4px }

/* footer original (mantido p/ compat, mas oculto abaixo) */
.card-footer{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--glass-bd);
  display:flex; align-items:center; justify-content:space-between; gap:12px
}
.read-cta{ font-weight:600; font-size:.92rem; color:var(--brand-1) }
.post-card:hover .read-cta{ text-decoration:underline }

/* === REMOVER AUTOR + “LER MAIS” ===================================== */
.insights .post-card .card-footer,
.insights .post-card .read-cta,
.insights .post-card .author,
.insights .post-card .byline{ display:none !important; visibility:hidden }

/* == 07) NEWSLETTER =================================================== */
.section.newsletter{
  padding: var(--gap-s) 0 var(--gap-s);
}
.n-box{
  background:var(--glass-bg); border:1px solid var(--glass-bd); border-radius:var(--card-r);
  padding:clamp(18px,4.4vw,var(--gap-m)); text-align:center; max-width:640px; margin-inline:auto;
  content-visibility:auto; contain-intrinsic-size:280px 520px
}
.n-box .icon{ font-size:2rem; margin-bottom:var(--gap-s) }
.n-box h3{ font:800 clamp(1.1rem,1.6vw,1.35rem)/1.2 var(--ui); margin-bottom:var(--gap-xs) }
.n-box .n-desc{ font-size:clamp(.96rem,1.4vw,1rem); color:var(--text-dim); margin-bottom:var(--gap-s) }
.n-form{ display:flex; gap:var(--gap-xs); justify-content:center; flex-wrap:wrap }
.n-form input[type=email]{
  padding:.72em 1em; border-radius:999px; border:1px solid var(--glass-bd);
  background:var(--glass-bg); color:var(--text); min-width:clamp(220px,40vw,320px);
  font-size:clamp(.96rem,1.4vw,1rem)
}
.n-form button{
  border:none; border-radius:999px; background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  padding:.72em 1.4em; color:#fff; cursor:pointer; font-weight:600; transition:opacity .25s;
  font-size:clamp(.96rem,1.4vw,1rem)
}
.n-form button:hover{ opacity:.88 }

/* == 08) ACESSIBILIDADE / MOTION ===================================== */
@media (prefers-reduced-motion:reduce){
  .post-card,.insights .filters .pill,.fcard img{ transition:none !important }
  .post-card:hover{ transform:none }
}
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}
.insights .section .title-section{ scroll-margin-top:calc(var(--nav-h) + 20px) }