/*
Theme Name: Al Toque MVP Theme
Theme URI: https://altoquenoticias.com
Author: Al Toque
Description: Conservative patch over v0.11: adds homepage slots 1–8, optional straplines, and per-hero skin override. Keeps 0.11 layout, width, and footer.
Version: 0.11.6.9
Text Domain: altoque-mvp
*/

:root{
  --wrap: 940px;
  --ink:#111; --paper:#fff; --bg:#f2f3f5;
  --red:#e30613; --yellow:#ffe000;
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--wrap,940px),92vw);margin-inline:auto}

/* Header (unchanged from 0.11) */
.site-header{position:sticky;top:0;background:#fff;z-index:20;border-bottom:1px solid #eee}
.wrap.header-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.site-logo{display:block;line-height:0}
.menu-btn{background:#000;color:#fff;border:0;border-radius:16px;padding:8px 12px;cursor:pointer}

/* Slide-over menu (unchanged) */
.site-menu{position:fixed;inset:0 0 0 auto;width:360px;max-width:100%;background:#111;color:#fff;transform:translateX(110%);transition:.25s;z-index:40}
.site-menu.open{transform:none}
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.2s;z-index:30}
.menu-backdrop.open{opacity:1;pointer-events:auto}
.site-menu__head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #333}
.site-menu__title{font-weight:800}
.menu-close{background:#fff;color:#000;border:0;border-radius:999px;padding:6px 10px}
.site-menu__body{padding:12px 16px;overflow:auto;max-height:calc(100% - 56px)}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid #222}
.cat-list a{display:flex;justify-content:space-between;padding:12px 0}
.cat-list .count{opacity:.7}

/* Heroes (keep 0.11 look) */
.stack{display:flex;flex-direction:column;gap:16px;margin:18px 0}
.hero{position:relative;background:#000;color:#fff;border-radius:20px;padding:22px 20px}
.hero--black{background:#000;color:#fff}
.hero--white{background:#fff;color:#000;border:1px solid #eee}
.hero--yellow{background:var(--yellow);color:#000}
.hero__title{font-size:clamp(36px,6.4vw,84px);line-height:.96;margin:10px 0 6px;font-weight:900}
.hero__sub{font-size:clamp(16px,2.1vw,22px);opacity:.85;margin:0}

/* Optional strapline */
.hero__strap{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.pill{display:inline-block;border-radius:999px;padding:6px 10px;font-weight:800}

/* Cluster (unchanged) */
.hero--image{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#000;color:#fff}
.hero--image .hero__media img{display:block;width:100%;height:100%;object-fit:cover;border-top-left-radius:20px;border-bottom-left-radius:20px}
.hero--image .hero__side{padding:20px}
.mix{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{position:relative;background:#fff;color:#000;border-radius:16px;border:1px solid #eee;padding:14px}
.card.video{padding:0;overflow:hidden}
.card .title{font-weight:800;font-size:28px;margin:0}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.cover-link{position:absolute;inset:0;z-index:5}

/* Footer (unchanged) */
.site-footer{margin-top:40px;background:#111;color:#fff}
.footer__inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;padding:22px 0}
.footer__heading{font-weight:800;margin:0 0 8px}
.footer__menu,.footer__list{list-style:none;margin:0;padding:0}
.footer__menu li a,.footer__list a{opacity:.9}
.footer__bottom{border-top:1px solid #333;padding:10px 0;margin-top:12px;color:#bbb}

/* Marquee */
.marquee{overflow:hidden}
.marquee__track{display:inline-flex;gap:28px;white-space:nowrap;animation:track 14s linear infinite}
@keyframes track{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === v0.11.6 === */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sr-only:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;padding:.5rem .75rem;background:#000;color:#fff;z-index:10000;border-radius:.25rem;}

/* Hero media & portrait layout */
.hero__media{width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;margin:8px 0;}
.hero__media .hero__img{width:100%;height:100%;object-fit:cover;display:block;}

/* Helpers for PHP classes (safe no-ops unless used) */
.hero__media--landscape{aspect-ratio:16/9;}
.hero__media--portrait{aspect-ratio:auto;}

/* Portrait variant: two columns on wider screens; stacked on mobile */
.hero.is-portrait{display:grid;grid-template-columns:1fr .9fr;gap:14px;align-items:stretch;}
.hero.is-portrait .hero__media{grid-column:2;border-radius:24px;height:100%;aspect-ratio:auto;}
.hero.is-portrait .ticker{grid-column:1;}
.hero.is-portrait .hero__body{grid-column:1;}

@media (max-width:768px){
  .hero.is-portrait{display:block;}
  .hero.is-portrait .hero__media{height:auto;aspect-ratio:16/9;grid-column:auto;margin-bottom:8px;}
}

/* Ticker (0.11.6.5 — Seamless loop, no JS) */
.ticker{overflow:hidden;white-space:nowrap;line-height:1;}
.ticker__track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:ticker-marquee var(--ticker-speed,30s) linear infinite;
}
.ticker__content{display:inline-flex;white-space:nowrap;}
.ticker__item{display:inline-block;padding:0 1.5rem;font-weight:800;}
.ticker__sep{display:inline-block;opacity:.7;padding:0 .25rem;}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none!important;transform:none!important;}
}
@keyframes ticker-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Small polish so strapline has breathing room inside heroes */
.hero .ticker{margin-bottom:8px;}

/* ===== Portrait Hero Fix (hardened) — v0.11.6.9 =====
   Prevents long lines from overflowing and ensures portrait images render.
*/
.hero.is-portrait{
  display:grid;
  grid-template-columns:1fr 1fr;     /* text left, image right */
  gap:16px;
  align-items:start;
}
.hero.is-portrait .hero__body,
.hero.is-portrait .hero__media{
  min-width:0;                        /* allow wrapping inside grid cells */
}
.hero.is-portrait .hero__body{grid-column:1;}
.hero.is-portrait .ticker{grid-column:1;max-width:100%;}
.hero.is-portrait .hero__title{white-space:normal;overflow-wrap:break-word;}

/* Ensure the portrait image actually shows (no 100% height trap) */
.hero.is-portrait .hero__media{
  grid-column:2;
  aspect-ratio:auto;
  height:auto;
  border-radius:20px;
}
.hero.is-portrait .hero__media .hero__img{
  width:100%;
  height:auto;                        /* override the default 100% height */
  object-fit:contain;                 /* keep the tall feel; switch to cover if preferred */
  display:block;
}

@media (max-width:768px){
  .hero.is-portrait{display:block;}
  .hero.is-portrait .hero__media{margin-top:8px;aspect-ratio:16/9;}
}

/* ===== Poster Split — Slot 1 only (non-portrait) — v0.11.6.10 ===== */
/* Editors: add " | " in the title to activate the poster (two lines). */
.stack > .hero:nth-of-type(1):not(.is-portrait){
  position:relative;
  /* EB desktop hero canvas ~696px tall — scale responsively but cap near that */
  min-height:clamp(360px, 52vw, 720px);
}
.stack > .hero:nth-of-type(1):not(.is-portrait) .hero__body{
  position:absolute;
  inset:22px 20px 22px 20px;    /* preserve hero padding */
  display:flex;
  flex-direction:column;
  align-items:center;           /* center horizontally */
  justify-content:center;       /* center vertically */
  text-align:center;
  pointer-events:none;          /* keep cover-link fully clickable */
  z-index:1;
}
.stack > .hero:nth-of-type(1):not(.is-portrait) .ticker{
  position:relative;
  z-index:2;                    /* strapline stays above poster text */
  margin-bottom:10px;
}

/* The poster block: two fixed lines, no wrapping, huge sizes. */
.poster{line-height:1; }
.poster__l1,
.poster__l2{
  margin:0;
  white-space:nowrap;
  font-weight:900;
  letter-spacing:-0.01em;
}

/* Sizes tuned to echo EB’s ~234px / ~384px at large widths,
   while scaling down on smaller screens. Adjust to taste. */
.poster__l1{ font-size:clamp(48px, 12vw, 234px); line-height:1; }
.poster__l2{ font-size:clamp(88px, 20vw, 384px); line-height:1; }

/* Optional: emphasize second line on yellow skin (like EB’s red accent) */
.hero--yellow .poster__l2 strong{ color:var(--red); }

/* Avoid accidental overlap on very narrow viewports */
@media (max-width:520px){
  .stack > .hero:nth-of-type(1):not(.is-portrait){ min-height:clamp(320px, 90vw, 560px); }
  .poster__l1{ font-size:clamp(40px, 14vw, 180px); }
  .poster__l2{ font-size:clamp(64px, 26vw, 300px); }
}