/* Páginas de lista (Notícias, Radar, Aulas, Tutoriais) e Produtos no visual novo.
   Depende de /tokens.css e /site.css; estas páginas NÃO carregam styles.css. Cartões montados por /listas.js e /loja.js. */

/* ---------- topo escuro ---------- */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) clamp(44px, 6vw, 72px) }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--az-abyss) 35%, rgba(0, 41, 59, .8) 70%, rgba(0, 41, 59, .92)),
    repeating-linear-gradient(0deg, rgba(117, 230, 218, .07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(117, 230, 218, .07) 0 1px, transparent 1px 30px),
    linear-gradient(160deg, var(--az-navy), var(--az-abyss) 70%) }
.page-hero .az-wrap { position: relative; display: grid; gap: 16px; justify-items: start }
.page-hero .az-kicker { color: var(--az-aqua) }
.page-hero h1.az-display { color: #fff; font-size: clamp(36px, 5vw, 64px); max-width: 18ch }
.page-hero h1 em { font-style: normal; color: var(--az-aqua) }
.page-hero .lead { color: var(--az-mist); font-size: clamp(1.05rem, 1.3vw, 1.2rem); max-width: 60ch }
.hero-count { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 15px; color: var(--az-mist) }
.hero-count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--az-sun) }
.hero-count b { color: #fff; font-family: var(--az-display); font-stretch: 110%; font-variant-numeric: tabular-nums }
.hero-count[hidden] { display: none }

/* ---------- busca + filtros ---------- */
.list-section { padding-block: clamp(28px, 4vw, 44px) clamp(56px, 8vw, 96px) }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px }
.search { position: relative; flex: 0 1 380px; min-width: min(100%, 260px) }
.search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1.5px solid var(--az-line); border-radius: 10px; background: #fff;
  font: 400 16px/1.2 var(--az-body); color: var(--az-ink) }
.search input::placeholder { color: #6b8794 }
.search input:focus { outline: none; border-color: var(--az-teal); box-shadow: 0 0 0 3px rgba(24, 154, 180, .18) }
.search .az-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--az-muted); pointer-events: none }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips[hidden] { display: none }
.chip-f { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: var(--az-r-pill); border: 1px solid var(--az-line); background: #fff;
  color: var(--az-navy); font: 600 14px/1 var(--az-body); cursor: pointer; white-space: nowrap; transition: border-color .2s, background-color .2s }
.chip-f small { font-size: 12.5px; font-weight: 600; color: var(--az-muted); font-variant-numeric: tabular-nums }
.chip-f:hover { border-color: var(--az-teal) }
.chip-f[aria-pressed="true"] { background: var(--az-navy); border-color: var(--az-navy); color: #fff }
.chip-f[aria-pressed="true"] small { color: var(--az-aqua) }
.chip-f:focus-visible { outline: 2px solid var(--az-teal-l); outline-offset: 2px }
@media (max-width: 599px) {
  .toolbar { display: grid; gap: 14px }
  .search { flex: none; min-width: 0 }
  /* no celular os filtros rolam de lado em vez de ocupar várias linhas */
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--az-pad)); padding: 2px var(--az-pad) 6px; scrollbar-width: none }
  .chips::-webkit-scrollbar { display: none }
}
.result-info { margin: 0 0 18px; font-size: 14px; color: var(--az-muted) }
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px }
.list-grid > .muted-msg { grid-column: 1 / -1; padding: 40px 0; text-align: center }
.more { display: flex; justify-content: center; margin-top: 36px }
.more[hidden] { display: none }

/* ---------- cartões ---------- */
.card .h3 { font-size: clamp(18px, 1.5vw, 21px) }
.card-foot { margin-top: auto; padding-top: 6px }
a.card:hover .link-arrow { text-decoration: underline; text-underline-offset: 3px }
.card-media { position: relative; display: block; aspect-ratio: 16/9; background: linear-gradient(160deg, var(--az-navy), var(--az-abyss)) }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
/* notícia em destaque (primeira da lista, sem filtro/busca): linha inteira, capa sem corte; com 13 por página a 1ª página fecha 4 linhas de 3 */
@media (min-width: 900px) {
  .card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) }
  .card--feature .card-media { aspect-ratio: auto; min-height: 100% }
  .card--feature .card-body { padding: clamp(28px, 3vw, 44px); align-content: center; gap: 14px }
  .card--feature .h3 { font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; font-stretch: 110%; line-height: 1.12 }
  .card--feature p { -webkit-line-clamp: 4; font-size: 16px }
}
/* dossiê e tutorial: cartão só de texto com faixa teal no topo */
.card--text { border-top: 4px solid var(--az-teal) }
.card--text .card-body { padding: 24px 24px 22px }
.card--radar { border-top-color: var(--az-sun) }
/* aula: miniatura com botão de play */
.play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--az-sun); color: var(--az-ink);
  display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55); transition: transform .3s var(--az-ease) }
.play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor }
a.card:hover .play { transform: scale(1.08) }

/* carregando */
.skel { background: linear-gradient(90deg, var(--az-mist-2), #f7fcfd, var(--az-mist-2)); background-size: 200% 100%; border-radius: var(--az-r-card); min-height: 300px; border: 1px solid var(--az-line) }
@media (prefers-reduced-motion: no-preference) { .skel { animation: shimmer 1.4s linear infinite } }
@keyframes shimmer { to { background-position: -200% 0 } }

/* ---------- produtos ---------- */
.product .card-body { gap: 12px }
.product .tags { display: flex; flex-wrap: wrap; gap: 6px }
.product img { aspect-ratio: 16/9; object-fit: cover }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--az-display); color: var(--az-navy) }
.price b { font-size: 30px; font-weight: 800; font-stretch: 110%; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.price span { font: 400 14px/1.3 var(--az-body); color: var(--az-muted) }
.product .buy { margin-top: auto; padding-top: 6px; display: grid; gap: 14px } /* preço e botões sempre no pé do cartão */
.product .actions { display: flex; gap: 10px; flex-wrap: wrap }
.product .actions .az-btn { flex: 1 1 auto }
.product.is-soon img { filter: grayscale(.6); opacity: .75 }
.soon-note { margin-top: auto; font-size: 14px; color: var(--az-muted) }

/* detalhes do produto (janela) */
.pd { width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--az-ink); box-shadow: var(--az-shadow) }
.pd::backdrop { background: rgba(0, 30, 44, .62) }
.pd-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) }
.pd-main { padding: clamp(24px, 4vw, 44px); display: grid; gap: 16px; align-content: start }
.pd-main h2 { font-size: clamp(26px, 3vw, 38px); color: var(--az-navy) }
.pd-main h3 { margin: 10px 0 0; font: 700 13px/1 var(--az-display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--az-muted) }
.pd-main p { margin: 0; color: var(--az-ink) }
.pd-side { background: var(--az-mist-2); border-left: 1px solid var(--az-line); padding: clamp(24px, 4vw, 44px) clamp(22px, 3vw, 36px); display: grid; gap: 10px; align-content: start }
.pd-side .from { font-size: 14px; color: var(--az-muted) }
.pd-side .from s { color: var(--az-muted) }
.pd-side .price b { font-size: 38px }
.pd-side .cash { font-size: 15px; color: var(--az-ink) }
.pd-side .az-btn { width: 100% }
.pd-side .az-btn + .az-btn { margin-top: 2px }
.pd-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .9); color: var(--az-navy); cursor: pointer; display: grid; place-items: center }
.pd-close:hover { background: var(--az-mist) }
.pd-close:focus-visible { outline: 2px solid var(--az-teal-l); outline-offset: 2px }
.pd-close .az-ico { width: 22px; height: 22px }
@media (max-width: 760px) {
  .pd { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0 }
  .pd-inner { grid-template-columns: minmax(0, 1fr) }
  .pd-side { border-left: 0; border-top: 1px solid var(--az-line) }
  .pd-main { padding-top: 60px }
}