/* =========================================================
   NEWSDROP – CSS MOBILE-FIRST
   Autor: você :)
   Objetivo:
   - Mobile-first (prioriza celular)
   - Cards ocupam 100% da largura no mobile (full-width/“full-bleed”)
   - Imagens sem distorção (background-size: cover + aspect-ratio)
   - Organização por seções e componentes
   ========================================================= */

/* -----------------------------
   1) Variáveis e Reset básico
   ----------------------------- */
:root{
  --bg:#3779cf;
  --ink:#111827;
  --muted:#6b7280;
  --brand:#0f766e;           /* verde principal */
  --brand-2:#14b8a6;         /* verde secundário */
  --surface:#ffffff;
  --surface-2:#bbb;

  --radius:14px;
  --shadow:0 10px 25px rgba(17,24,39,.08);
  --gap:16px;
  --container:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Tipografia base */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* -----------------------------
   2) Layout global
   ----------------------------- */
.header-container,
.footer-container,
.container,
.wrap,
.section-container{
  max-width:var(--container);
  margin:0 auto;
}

/* Espaços */
.section-container{ padding: 16px; }
.section-title{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.1rem;
  margin: 8px 0 12px;
}
.section-title i{ color:var(--brand); }

/* Header */
header{
  position:sticky;top:0;z-index:20;background:#3779cf;border-bottom:1px solid #3779cf;
}
.header-container{
  display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800}
.logo .logo-icon{width:36px;height:auto}
.logo .text-icon{height:22px}

/* Busca */
.search-box form{display:flex;gap:8px}
.search-box input{
  padding:10px 12px;border:1px solid #e5e7eb;border-radius:999px;outline:none;width:58vw;max-width:200px;
}
.search-box button{
  border:0;background:var(--brand);color:#fff;border-radius:999px;padding:10px 14px;cursor:pointer;
}

/* -----------------------------
   3) Grid principal (mobile-first)
   - Mobile: 1 coluna (notícias ocupam a tela toda)
   - Desktop: 2 colunas (conteúdo + sidebar)
   ----------------------------- */
.container{
  display:grid;
  grid-template-columns: 1fr;   /* mobile */
  gap: 24px;
  padding: 0;                   /* para permitir full-bleed no mobile */
}
.main-content{ order:1; }
.sidebar{ order:2; }

/* Desktop ≥ 1024px */
@media (min-width: 1024px){
  .container{
    grid-template-columns: 3fr 1.2fr;   /* conteúdo / sidebar */
    gap: 28px;
    padding: 0 16px;
  }
  .main-content{ order:1; }
  .sidebar{ order:2; position:sticky; top:76px; height:max-content; }
  
}

/* -----------------------------
   4) Hero Grid (Substituto do Carrossel)
   ----------------------------- */
.hero-container {
  max-width: var(--container);
  margin: 20px auto;
  padding: 0 16px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.hero-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  color: white;
  box-shadow: var(--shadow);
}

.hero-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.hero-item:hover .hero-image {
  transform: scale(1.05);
}

.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  pointer-events: none;
}

.hero-badge {
  background: var(--brand);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
}

.hero-content h2 {
  margin: 5px 0;
  font-size: 1.2rem;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hero-date {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 5px;
}

/* Mobile: Alturas fixas */
.hero-main { height: 300px; }
.hero-sub { height: 200px; }

/* Desktop: Layout Mosaico */
@media (min-width: 1024px){
  .hero-grid {
    grid-template-columns: 2fr 1fr; /* Principal ocupa 2/3 */
    grid-template-rows: 200px 200px;
    gap: 20px;
  }
  
  .hero-main {
    grid-row: 1 / span 2; /* Ocupa as 2 linhas da esquerda */
    height: auto;
  }
  
  .hero-sub {
    height: auto;
  }
  
  .hero-main .hero-content h2 {
    font-size: 2rem;
  }
}

/* -----------------------------
   5) Cards de notícia (grid)
   - Full width no mobile (full-bleed)
   - Sem distorção nas imagens
   ----------------------------- */

/* GRID */
.articles-grid{
  display:grid;
  grid-template-columns: 1fr;      /* 1 coluna no mobile */
  gap: var(--gap);
}

/* No mobile, “full-bleed”: ocupa a largura total da tela
   sem depender do padding do container/section */
@media (max-width: 1023px){
  .section-container .articles-grid{
    width:100vw;
    margin-left: calc(-50vw + 50%);  /* escapa do container */
    padding: 0 var(--gap);
  }
}

/* Desktop: 3 colunas */
@media (min-width: 1024px){
  .articles-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
  }
}

/* CARD */
.article-card{
  display:block;background:var(--surface);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease;
}
.article-card:hover{
  transform:translateY(-2px);box-shadow:0 16px 38px rgba(17,24,39,.12);
}

/* IMAGEM do card (como background pra evitar distorção) */
.article-image{
  background-color:#e5e7eb;      /* fallback */
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  width:100%;
  aspect-ratio: 16/9;   
   margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px; 
}

/* Conteúdo */
.article-content{ padding:14px 14px 16px }
.category-tag{
  display:inline-block;background:#ecfeff;color:#0e7490;border:1px solid #cffafe;
  font-size:.75rem;padding:4px 8px;border-radius:999px;margin-bottom:8px
}
.article-content h3{ margin:6px 0 6px; font-size:1.05rem; line-height:1.25 }
.article-content p{ margin:0 0 10px; color:var(--muted); font-size:.95rem }
.article-meta{
  display:flex;gap:12px;align-items:center;color:#6b7280;font-size:.85rem
}
.article-meta i{ color:#9ca3af }

/* ---- Cards de Anúncio (só imagem) ---- */
.article-card.image-only {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Container com proporção fixa */
.article-card.image-only .article-image{
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 4/5;          /* alto no mobile */
  background: var(--surface-2,#f3f4f6);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;                /* encaixa tudo sem cortar */
  object-position: center;            /* centraliza */
  display: block;                     /* remove espaços fantasmas */
  border-radius: inherit;             /* mantém cantos arredondados */
}

/* Usa <img> dentro do card de anúncio */
.article-card.image-only .article-image > img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* imagem inteira, sem cortar */
  display: block;
}

/* Fallback do ícone quando não há imagem */
.img-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#f5f5f5; color:#bbb; font-size:40px;
}

/* Esconde o conteúdo do card (só imagem) */
.article-card.image-only .article-content { display: none }

/* Desktop: pode usar 16:9 (ajuste se quiser) */
@media (min-width: 1024px) {
  .article-card.image-only .article-image {
    aspect-ratio: 4/5;
  }
}




/* -----------------------------
   6) Seções auxiliares
   ----------------------------- */
.teen-features{
  display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:12px
}
.teen-feature{
  display:flex;gap:12px;align-items:flex-start;background:var(--surface);padding:14px;border-radius:12px;box-shadow:var(--shadow)
}
.teen-feature i{ color:#f59e0b; font-size:1.2rem }

/* Desktop */
@media (min-width: 1024px){
  .teen-features{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* -----------------------------
   7.1) Projetos (Sidebar)
   ----------------------------- */
.projects-box {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: var(--surface-2);
  border-radius: 10px;
  text-align: center;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.project-card:hover {
  background: white;
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.15);
}

.project-icon {
  font-size: 1.5rem;
  color: var(--brand);
  margin-bottom: 8px;
}

.project-card span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

/* -----------------------------
   7.2) Colunistas (sidebar)
   ----------------------------- */
.columnists-section{
  display:grid;grid-template-columns:1fr;gap:14px
}
.columnist-card{
  display:flex;gap:12px;background:var(--surface);padding:12px;border-radius:12px;box-shadow:var(--shadow)
}
.columnist-photo img{
  width:56px;height:56px;border-radius:999px;object-fit:cover;background:#e5e7eb
}
.columnist-info h4{ margin:0 0 2px;font-size:1rem }
.columnist-info .topic{ margin:0;color:var(--muted);font-size:.9rem }
.publications-count{ margin-top:6px;font-size:.85rem;color:#64748b }

/* Desktop */
@media (min-width: 1024px){
  .columnists-section{ grid-template-columns:1fr }
}

/* -----------------------------
   8) Newsletter / Sobre
   ----------------------------- */
.newsletter-box{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#ecfeff;padding:16px;border-radius:16px;box-shadow:var(--shadow)
}
.newsletter-box h3{ margin:0 0 8px }
.newsletter-box p{ margin:0 0 12px;color:#e6fffb }
.newsletter-box .form-group{ margin-bottom:10px }
.newsletter-box input{
  width:100%;padding:12px;border-radius:10px;border:0;outline:none
}
.newsletter-box .btn{
  width:100%;padding:12px;border-radius:10px;border:0;background:#fff;color:#0f766e;font-weight:700;cursor:pointer
}

/* -----------------------------
   9) Footer
   ----------------------------- */
footer{ background:#0b1020;color:#c7d2fe;margin-top:24px }
.footer-container{
  display:grid;grid-template-columns:1fr;gap:18px;padding: 18px 16px;
}
.footer-col h4{ margin:0 0 8px;color:#fff }
.footer-col p, .footer-col ul{ margin:0;color:#cbd5e1 }
.footer-col ul{ list-style:none;padding:0 }
.footer-col li{ margin-bottom:8px }
.social-links a{ margin-right:10px;color:#e2e8f0 }
.copyright{
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;padding:12px;color:#94a3b8
}

/* Desktop footer */
@media (min-width: 1024px){
  .footer-container{
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:24px;
    padding: 22px 16px;
  }
}

/* -----------------------------
   10) Utilitários
   ----------------------------- */
.muted{ color:var(--muted) }
.hide{ display:none !important }