/*
Theme Name: Verdiblanco Informa
Theme URI: https://realbetisbalompie.es
Author: Manuel
Description: Web de noticias, previas, crónicas y análisis del Real Betis Balompié. Sitio no oficial de aficionados.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: betis-informa
*/

:root{
  --verde-betis: #0B6B3A;
  --verde-oscuro: #054023;
  --blanco: #FFFFFF;
  --gris-fondo: #F5F6F5;
  --gris-texto: #2A2A2A;
  --dorado: #C9A24B;
  --radius: 10px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Poppins', Arial, sans-serif;
  color:var(--gris-texto);
  line-height:1.6;
  background-color:var(--gris-fondo);
  background-image:repeating-linear-gradient(
    90deg,
    rgba(11,107,58,.07) 0px, rgba(11,107,58,.07) 40px,
    rgba(255,255,255,0) 40px, rgba(255,255,255,0) 80px
  );
}

a{color:var(--verde-betis); text-decoration:none;}
a:hover{color:var(--verde-oscuro);}

img{max-width:100%; height:auto; display:block;}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* Título y descripción del sitio (usados dentro del hero) */
.site-title{
  font-size:1.4rem;
  font-weight:700;
  color:var(--verde-oscuro);
  margin:0;
}

.site-description{
  font-size:.78rem;
  color:#777;
  margin:0;
}

.main-navigation ul{
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
}

.main-navigation a{
  font-weight:600;
  color:var(--gris-texto);
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.03em;
}

.main-navigation a:hover{color:var(--verde-betis);}

/* Badges por sección */
.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  color:#fff;
  letter-spacing:.03em;
}
.badge-noticia{background:var(--verde-betis);}
.badge-previa{background:#1D6FB8;}
.badge-cronica{background:#B8341D;}
.badge-analisis{background:var(--dorado); color:#3a2e00;}

/* Grid de tarjetas */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:24px;
  margin:32px 0;
}

.post-card{
  background:var(--blanco);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}

.post-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}

.post-card .thumb{
  aspect-ratio:16/9;
  background:#ddd;
  overflow:hidden;
}

.post-card .thumb img{width:100%; height:100%; object-fit:cover;}

.post-card-body{padding:16px;}

.post-card-body h3{
  margin:10px 0 6px;
  font-size:1.05rem;
  line-height:1.35;
}

.post-card-body .excerpt{
  font-size:.88rem;
  color:#555;
}

.post-meta{
  font-size:.75rem;
  color:#888;
  margin-top:8px;
}

/* Hero / franja principal */
.hero-section{
  background:linear-gradient(135deg, var(--verde-oscuro), var(--verde-betis));
  color:#fff;
  padding:40px 0;
  margin-bottom:20px;
}

.hero-section h1{
  margin:0 0 8px;
  font-size:2rem;
}

.hero-section p{
  opacity:.9;
  max-width:600px;
}

/* Single post */
.single-post{
  background:var(--blanco);
  border-radius:var(--radius);
  padding:32px;
  margin:32px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.single-post h1{
  font-size:1.9rem;
  margin-top:8px;
  color:var(--verde-oscuro);
}

.single-post .featured-image{
  border-radius:var(--radius);
  overflow:hidden;
  margin:20px 0;
}

.single-post .entry-content{
  font-size:1.05rem;
}

.single-post .entry-content p{margin:0 0 1.2em;}

/* Ficha de partido (previas/crónicas) */
.match-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--gris-fondo);
  border-radius:var(--radius);
  padding:20px;
  margin:20px 0;
  text-align:center;
}

.match-box .team{
  flex:1;
  font-weight:700;
}

.match-box .score{
  font-size:1.6rem;
  font-weight:800;
  color:var(--verde-oscuro);
  padding:0 20px;
}

/* Footer */
.site-footer{
  background:var(--verde-oscuro);
  color:#fff;
  margin-top:60px;
  padding:36px 0;
  font-size:.85rem;
}

.site-footer a{color:#dfeee3;}

.site-footer .disclaimer{
  opacity:.75;
  font-size:.78rem;
  margin-top:14px;
  line-height:1.5;
}

/* ------------------------------------------------------------------
 * ESTILO REVISTA (inspirado en portales deportivos tipo betis.mobi)
 * ------------------------------------------------------------------ */

/* Barra superior: fecha + redes sociales */
.top-bar{
  background:var(--verde-oscuro);
  color:#dfeee3;
  font-size:.78rem;
}
.top-bar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 20px;
}
.top-bar .social-links{
  display:flex;
  gap:14px;
}
.top-bar .social-links a{
  color:#dfeee3;
  font-weight:600;
}
.top-bar .social-links a:hover{color:#fff;}

/* ------------------------------------------------------------------
 * CABECERA CON COLLAGE DE FOTOS (aficionados / ambiente de partido)
 * ------------------------------------------------------------------ */

.header-collage{
  position:relative;
  height:320px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  overflow:hidden;
}
.header-collage .collage-cell{
  background-size:cover;
  background-position:center;
  background-color:var(--verde-betis);
  position:relative;
}
.header-collage .collage-cell.is-placeholder{
  background-image:repeating-linear-gradient(
    45deg,
    var(--verde-betis) 0px, var(--verde-betis) 22px,
    var(--verde-oscuro) 22px, var(--verde-oscuro) 44px
  );
}
.header-collage .collage-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,64,35,.55) 0%, rgba(5,64,35,.35) 40%, rgba(5,64,35,.85) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:20px;
}
.header-collage .collage-overlay img,
.header-collage .site-logo-custom img{
  height:90px;
  width:90px;
  object-fit:contain;
  background:#fff;
  border-radius:50%;
  padding:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  border:3px solid var(--dorado);
}
.header-collage .site-logo-custom{ line-height:0; }
.header-collage .site-logo-custom a{ display:inline-block; }
.header-collage .site-title{
  color:#fff;
  font-size:2.2rem;
  font-weight:800;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  letter-spacing:.01em;
}
.header-collage .site-description{
  color:#eaf5ee;
  font-size:.95rem;
  margin:0;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* Barra de navegación oscura, debajo del collage */
.site-header{
  background:var(--verde-oscuro);
  border-bottom:4px solid var(--dorado);
  position:sticky;
  top:0;
  z-index:100;
}
.site-header .container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:52px;
}

.main-navigation ul{
  justify-content:center;
  flex-wrap:wrap;
  padding:0;
  gap:30px;
}
.main-navigation > ul{
  display:flex;
}
.main-navigation a{
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.03em;
  padding:15px 0;
  display:inline-block;
}
.main-navigation a:hover{color:var(--dorado);}
.main-navigation ul ul{
  background:var(--blanco);
  min-width:220px;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  padding:8px 0;
  border-radius:0 0 6px 6px;
}
.main-navigation ul ul a{
  color:var(--gris-texto);
  text-transform:none;
  font-weight:500;
  padding:9px 18px;
  display:block;
}
.main-navigation ul ul a:hover{color:var(--verde-betis); background:var(--gris-fondo);}

@media (max-width:782px){
  .header-collage{grid-template-columns:repeat(2,1fr); height:220px;}
  .header-collage .site-title{font-size:1.5rem;}
}

/* Lógica de despliegue de submenús (posicionamiento) */
.main-navigation{width:100%;}
.main-navigation li{position:relative;}
.main-navigation ul ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  flex-direction:column;
}
.main-navigation ul ul li{width:100%;}
.main-navigation li:hover > ul{display:flex;}

/* Ticker "Última Hora" */
.ultima-hora{
  background:#111;
  color:#fff;
  overflow:hidden;
}
.ultima-hora .container{
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px 20px;
}
.ultima-hora .tag{
  background:var(--verde-betis);
  padding:4px 12px;
  border-radius:4px;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  flex-shrink:0;
  position:relative;
  z-index:2;
}
.ultima-hora .ticker-viewport{
  flex:1;
  overflow:hidden;
  position:relative;
}
.ultima-hora .ticker-track{
  display:flex;
  gap:36px;
  white-space:nowrap;
  animation:ticker-scroll 40s linear infinite;
  width:max-content;
}
.ultima-hora .ticker-track a{
  color:#fff;
  font-size:.85rem;
}
.ultima-hora .ticker-track a:hover{color:var(--dorado);}
@keyframes ticker-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* Bloque de sección tipo revista: 1 destacado + lista */
.magazine-block{
  margin:40px 0;
}
.magazine-block .block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:3px solid var(--verde-betis);
  margin-bottom:16px;
  padding-bottom:6px;
}
.magazine-block .block-header h2{
  margin:0;
  font-size:1.3rem;
  color:var(--verde-oscuro);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.magazine-block .block-header a{
  font-size:.8rem;
  font-weight:600;
}
.magazine-block .block-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px;
}
.magazine-block .featured-card{
  background:var(--blanco);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.magazine-block .featured-card .thumb{
  aspect-ratio:16/9;
  overflow:hidden;
}
.magazine-block .featured-card .thumb img{width:100%; height:100%; object-fit:cover;}
.magazine-block .featured-card .post-card-body h3{font-size:1.3rem;}

.magazine-block .list-items{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.magazine-block .list-item{
  display:flex;
  gap:12px;
  background:var(--blanco);
  border-radius:8px;
  padding:8px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.magazine-block .list-item .thumb{
  width:80px;
  height:60px;
  flex-shrink:0;
  border-radius:6px;
  overflow:hidden;
  background:#ddd;
}
.magazine-block .list-item .thumb img{width:100%; height:100%; object-fit:cover;}
.magazine-block .list-item h4{
  margin:0;
  font-size:.9rem;
  line-height:1.35;
}

@media (max-width:782px){
  .magazine-block .block-grid{grid-template-columns:1fr;}
  .main-navigation ul{gap:14px;}
}

/* Responsive */
@media (max-width:782px){
  .site-header .container{flex-wrap:wrap;}
}

/* ------------------------------------------------------------------
 * BLOQUE DE PESTAÑAS (estilo betis.mobi: A fondo / Previas / Crónicas)
 * ------------------------------------------------------------------ */
.tabs-widget{
  background:var(--blanco);
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  margin:32px 0;
  overflow:hidden;
}
.tabs-widget-radio{
  display:none;
}
.tabs-widget-nav{
  display:flex;
  background:var(--verde-oscuro);
}
.tabs-widget-nav label{
  flex:1;
  text-align:center;
  padding:14px 10px;
  color:#dfeee3;
  font-weight:700;
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.03em;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  border-bottom:3px solid transparent;
}
.tabs-widget-nav label:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.tabs-widget-panel{
  display:none;
  padding:18px 20px 22px;
}
.tabs-widget-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
.tabs-widget-list li a{
  display:flex;
  gap:12px;
  align-items:center;
}
.tabs-widget-list .thumb{
  width:64px;
  height:64px;
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--gris-fondo);
  display:block;
}
.tabs-widget-list .thumb img{width:100%; height:100%; object-fit:cover;}
.tabs-widget-list .info{display:flex; flex-direction:column; gap:2px;}
.tabs-widget-list .title{
  font-size:.9rem;
  font-weight:600;
  color:var(--gris-texto);
  line-height:1.3;
}
.tabs-widget-list .date{font-size:.75rem; color:#888;}
.tabs-widget-empty{color:#888; font-size:.9rem; margin:0;}

/* Lógica de pestañas en CSS puro (sin JS): cada label activa su panel
   mediante el radio button asociado y ~ combinators por orden de aparición. */
#tab-noticias-general:checked ~ .tabs-widget-panel[data-panel="noticias-general"],
#tab-a-fondo:checked          ~ .tabs-widget-panel[data-panel="a-fondo"],
#tab-previa:checked           ~ .tabs-widget-panel[data-panel="previa"],
#tab-cronica:checked          ~ .tabs-widget-panel[data-panel="cronica"]{
  display:block;
}

/* Resaltado visual de la pestaña activa (evita la confusión de no saber
   qué pestaña estás viendo) */
#tab-noticias-general:checked ~ .tabs-widget-nav .tabs-widget-tab-noticias-general,
#tab-a-fondo:checked          ~ .tabs-widget-nav .tabs-widget-tab-a-fondo,
#tab-previa:checked           ~ .tabs-widget-nav .tabs-widget-tab-previa,
#tab-cronica:checked          ~ .tabs-widget-nav .tabs-widget-tab-cronica{
  background:var(--verde-betis);
  color:#fff;
  border-bottom:3px solid var(--dorado);
}

@media (max-width:782px){
  .tabs-widget-nav{flex-wrap:wrap;}
  .tabs-widget-nav label{flex:1 1 50%;}
}

/* ------------------------------------------------------------------
 * MOSAICO DE ÚLTIMAS NOTICIAS (4 tamaños distintos, la más reciente grande)
 * ------------------------------------------------------------------ */
.news-mosaic{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:140px 140px;
  gap:14px;
  margin:32px 0;
  height:400px;
}
.news-mosaic-item{
  position:relative;
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-color:var(--verde-oscuro);
}
/* Nº1: la más reciente, ocupa toda la altura a la izquierda */
.news-mosaic-item-1{
  grid-column:1 / 2;
  grid-row:1 / 3;
}
/* Nº2 y Nº3: arriba a la derecha, medianas */
.news-mosaic-item-2{
  grid-column:2 / 3;
  grid-row:1 / 2;
}
.news-mosaic-item-3{
  grid-column:3 / 4;
  grid-row:1 / 2;
}
/* Nº4: abajo a la derecha, ancha y más pequeña de alto */
.news-mosaic-item-4{
  grid-column:2 / 4;
  grid-row:2 / 3;
}

.news-mosaic-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  padding:16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
}
.news-mosaic-item-1 .news-mosaic-overlay{padding:24px; gap:8px;}

.news-mosaic-title{
  color:#fff;
  font-weight:800;
  line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
  font-size:.95rem;
}
.news-mosaic-item-1 .news-mosaic-title{font-size:1.5rem;}
.news-mosaic-item-4 .news-mosaic-title{font-size:1.05rem;}

.news-mosaic-date{color:#dfeee3; font-size:.75rem;}

@media (max-width:782px){
  .news-mosaic{
    display:flex;
    flex-direction:column;
    height:auto;
  }
  .news-mosaic-item{min-height:200px;}
  .news-mosaic-item-1{min-height:280px;}
}