/*
Theme Name: Esporte Minimal
Theme URI: https://exemplo.com/esporte-minimal
Author: Lovable
Description: Tema minimalista para portal de esportes com carrossel de Top Stories, layout de duas colunas e faixas otimizadas para Google AdSense.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: esporte-minimal
Tags: news, blog, sports, two-columns, custom-menu, featured-images, translation-ready
*/

/* ============ Tokens ============ */
:root{
  --bg:#0b0b0c;
  --surface:#141417;
  --surface-2:#1c1c21;
  --border:#26262d;
  --text:#f4f4f5;
  --muted:#a1a1aa;
  --accent:#66f5b1;
  --ad-bg:#101014;
  --ad-border:#2a2a31;
  --radius:14px;
  --maxw:1240px;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;margin:0 0 .5rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-logo{font-family:var(--font-display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em}
.site-logo span{color:var(--accent)}
.main-nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.main-nav a{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.main-nav a:hover,.main-nav .current-menu-item a{color:var(--text)}
.menu-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:.5rem .75rem;border-radius:8px;cursor:pointer}

/* ============ Ad slots ============ */
.ad-slot{background:var(--ad-bg);border:1px dashed var(--ad-border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;margin:2rem 0;min-height:120px}
.ad-slot.ad-leaderboard{min-height:120px}
.ad-slot.ad-rectangle{min-height:280px}
.ad-slot.ad-skyscraper{min-height:600px}

/* ============ Section heading ============ */
.section-title{display:flex;align-items:center;gap:1rem;margin:2.5rem 0 1.25rem}
.section-title h2{font-size:1.5rem;text-transform:uppercase;margin:0}
.section-title::after{content:"";flex:1;height:1px;background:var(--border)}

/* ============ Top Stories carousel ============ */
.carousel{position:relative;overflow:hidden;border-radius:var(--radius)}
.carousel-track{display:flex;transition:transform .6s ease}
.carousel-slide{flex:0 0 25%;padding:0 .5rem}
.carousel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column}
.carousel-card .thumb{aspect-ratio:16/10;overflow:hidden}
.carousel-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.carousel-card:hover .thumb img{transform:scale(1.05)}
.carousel-card .body{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.category{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.carousel-card h3{font-size:1rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.7);border:1px solid var(--border);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:2;font-size:1.25rem}
.carousel-btn.prev{left:.5rem}.carousel-btn.next{right:.5rem}

/* ============ Main stories ============ */
.main-stories{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.main-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.main-card .thumb{aspect-ratio:16/9;overflow:hidden}
.main-card .thumb img{width:100%;height:100%;object-fit:cover}
.main-card .body{padding:1.5rem}
.main-card h3{font-size:1.5rem;line-height:1.2}
.main-card .excerpt{color:var(--muted);font-size:.95rem}
.meta{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ============ Two column layout ============ */
.two-col{display:grid;grid-template-columns:300px 1fr;gap:2rem;margin-top:2rem}
.sidebar .widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.5rem}
.sidebar .widget-title{font-family:var(--font-display);font-size:1rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 1rem;color:var(--muted)}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{padding:.5rem 0;border-bottom:1px solid var(--border)}
.sidebar li:last-child{border-bottom:none}

.posts-list{display:flex;flex-direction:column;gap:1.5rem}
.post-row{display:grid;grid-template-columns:200px 1fr;gap:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.post-row .thumb{aspect-ratio:4/3;overflow:hidden}
.post-row .thumb img{width:100%;height:100%;object-fit:cover}
.post-row .body{padding:1rem 1rem 1rem 0;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.post-row h3{font-size:1.15rem;line-height:1.3}

/* ============ Varied topics ============ */
.varied-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.varied-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.varied-card .thumb{aspect-ratio:1/1;overflow:hidden}
.varied-card .thumb img{width:100%;height:100%;object-fit:cover}
.varied-card .body{padding:.85rem}
.varied-card h3{font-size:.95rem;line-height:1.3}

/* ============ Footer ============ */
.site-footer{background:var(--surface);border-top:1px solid var(--border);margin-top:4rem;padding:3rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2rem}
.footer-grid h4{font-family:var(--font-display);font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{padding:.3rem 0;font-size:.9rem;color:var(--muted)}
.footer-grid li a:hover{color:var(--text)}
.newsletter input{width:100%;padding:.6rem .8rem;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;margin-bottom:.5rem;font-family:inherit}
.newsletter button{width:100%;padding:.6rem;background:var(--accent);color:#0a0a0b;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center;font-size:.8rem;color:var(--muted)}

/* ============ Single / Page ============ */
.single-post,.page-content{max-width:760px;margin:2rem auto}
.single-post h1,.page-content h1{font-size:2.5rem;line-height:1.1;margin-bottom:1rem}
.single-post .featured{margin:1.5rem 0;border-radius:var(--radius);overflow:hidden}
.single-post .content,.page-content .content{font-size:1.05rem;color:#e4e4e7}
.single-post .content p{margin:1rem 0}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .carousel-slide{flex:0 0 50%}
  .two-col{grid-template-columns:1fr}
  .varied-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 20px}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:1rem}
  .carousel-slide{flex:0 0 100%}
  .main-stories{grid-template-columns:1fr}
  .post-row{grid-template-columns:120px 1fr}
  .footer-grid{grid-template-columns:1fr}
  .single-post h1,.page-content h1{font-size:1.75rem}
}