/*
Theme Name: Mundo MMA
Description: Tema del sitio de noticias Mundo MMA, basado en el Design System (Claude Design).
Author: Mundo MMA
Version: 1.0
*/

@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/effects.css');
@import url('tokens/spacing.css');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header ---------- */
.site-header{
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand{ display: flex; align-items: center; gap: var(--space-3); }
.brand img{ height: 36px; width: auto; }
.brand span{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}
.main-nav{ display: flex; gap: var(--space-6); }
.main-nav a{
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-00);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.main-nav a:hover, .main-nav a.active{ color: var(--brand-primary); }

/* ---------- Category pills ---------- */
.pills{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pill{
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-00);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-body);
  transition: all var(--duration-fast) var(--ease-out);
}
.pill:hover, .pill.active{
  background: var(--surface-emphasis);
  border-color: var(--surface-emphasis);
  color: var(--text-inverse);
}

/* ---------- Tag / badge ---------- */
.tag{
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-000);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-inverse);
  background: var(--surface-emphasis);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}
.tag.live{ background: var(--brand-primary); }

/* ---------- Hero (featured article) ---------- */
.hero{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-emphasis);
  color: var(--text-inverse);
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-lg);
}
.hero img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, oklch(9% 0.008 265 / 0.92) 0%, oklch(9% 0.008 265 / 0.15) 60%);
}
.hero-content{
  position: relative;
  padding: var(--space-10) var(--space-10) var(--space-8);
  max-width: 760px;
}
.hero-content .tag{ margin-bottom: var(--space-4); }
.hero-content h1{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
.hero-content p{
  font-size: var(--fs-1);
  color: oklch(100% 0 0 / 0.78);
  margin: 0;
}
.hero-meta{
  display: flex; gap: var(--space-4); align-items: center;
  margin-top: var(--space-5);
  font-size: var(--fs-00);
  color: oklch(100% 0 0 / 0.65);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---------- Article card ---------- */
.article-card{
  background: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.article-card:hover{
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.article-card .thumb{
  position: relative;
  aspect-ratio: 16/10;
  background: var(--surface-sunken);
  overflow: hidden;
}
.article-card .thumb img{ width: 100%; height: 100%; object-fit: cover; }
.article-card .thumb .tag{ position: absolute; left: var(--space-3); bottom: var(--space-3); }
.article-card .body{ padding: var(--space-5); }
.article-card .meta{
  font-size: var(--fs-000);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}
.article-card h3{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--text-heading);
}

/* ---------- Grid layout (homepage) ---------- */
.layout{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: start;
}
.grid-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
section.block{ margin-top: var(--space-12); }
.block-title{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--brand-primary);
}

/* ---------- Event promo (sidebar) ---------- */
.event-promo{
  background: var(--surface-emphasis);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.event-promo .tag.live{ margin-bottom: var(--space-4); }
.event-promo h4{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}
.event-promo p{
  font-size: var(--fs-00);
  color: oklch(100% 0 0 / 0.65);
  margin: 0 0 var(--space-4);
}
.event-promo a.link{
  font-size: var(--fs-00);
  font-weight: var(--fw-semibold);
  color: var(--red-300);
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top: var(--space-24);
  background: var(--surface-emphasis);
  color: oklch(100% 0 0 / 0.6);
  padding: var(--space-12) 0;
}
.site-footer .container{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4);
}
.site-footer .brand span{ color: var(--text-inverse); }
.site-footer nav{ display: flex; gap: var(--space-5); }
.site-footer a{ font-size: var(--fs-00); }
.site-footer a:hover{ color: var(--text-inverse); }

/* ---------- Article page ---------- */
.article-header{ max-width: 780px; margin: var(--space-10) auto 0; text-align: left; }
.article-header .tag{ margin-bottom: var(--space-4); }
.article-header h1{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-5);
}
.article-header .dek{
  font-size: var(--fs-2);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-6);
}
.byline{
  display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap;
  font-size: var(--fs-00);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4) 0;
}
.article-figure{ max-width: 980px; margin: var(--space-8) auto; padding: 0 var(--gutter); }
.article-figure img{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); width: 100%; }
.article-figure figcaption{
  font-size: var(--fs-00);
  color: var(--text-faint);
  margin-top: var(--space-3);
}
.article-body{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: var(--fs-1);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.article-body p{ margin: 0 0 var(--space-5); }
.article-body h2{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3);
  margin: var(--space-8) 0 var(--space-4);
  color: var(--text-heading);
}
.article-body figure.wp-caption{ margin: var(--space-6) 0; }
.article-body figure.wp-caption img{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); width: 100%; }
.article-body figure.wp-caption figcaption{ font-size: var(--fs-00); color: var(--text-faint); margin-top: var(--space-3); }
.article-body a{ color: var(--brand-primary); text-decoration: underline; }
.related{ max-width: 980px; margin: var(--space-16) auto 0; padding: 0 var(--gutter); }

/* ---------- Estados vacíos / paginación ---------- */
.empty-state{ padding: var(--space-16) 0; text-align: center; color: var(--text-muted); }
.pagination{ display: flex; gap: var(--space-3); justify-content: center; margin: var(--space-12) 0; }
.pagination a, .pagination span{
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--fs-00);
}
.pagination .current{ background: var(--surface-emphasis); color: var(--text-inverse); }

@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .hero-content h1{ font-size: var(--fs-4); }
  .main-nav{ display: none; }
}