/* HOYO 20 · HORIZONTAL R1 · 2026-10-10
   Exclusivo para pantallas tactiles horizontales de poca altura.
   Aplicable SOLO a paginas con la cabecera global .site-header.
   LIVE y Scorecards no muestran esa cabecera; nada de esto se les aplica.
   Safari: desplazar el documento, no un <main> con scroll propio.
*/
@media screen and (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) and (pointer: coarse) {
  /* Navegacion nativa para que Safari pueda contraer sus barras al hacer scroll. */
  html:has(> body > .site-header) { height:auto; min-height:100%; overflow-x:clip; overflow-y:visible; }
  body:has(> .site-header) { height:auto; min-height:100dvh; display:block; overflow-x:clip; overflow-y:visible; }
  body:has(> .site-header) > main { display:block; min-height:0; overflow:visible; overscroll-behavior:auto; }
  body:has(> .site-header) > .site-footer { display:none !important; }

  /* Cabecera accesible, pequena desde la carga y fija al subir contenido. */
  body:has(> .site-header) > .site-header {
    position:sticky; top:0; z-index:600; overflow:visible;
    border-bottom-width:2px; box-shadow:0 2px 9px rgba(3,28,80,.18);
  }
  .site-header .header-inner {
    position:relative; min-height:46px; padding:4px 0; width:min(1180px,calc(100% - 24px));
    display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;
    justify-content:space-between; gap:8px;
  }
  .site-header .brand { min-width:0; flex:1 1 auto; gap:7px; }
  .site-header .brand img { width:36px; height:36px; flex:0 0 36px; }
  .site-header .brand span { font-size:.83rem; line-height:1.10; }
  .site-header .nav-toggle {
    display:inline-flex; flex:0 0 auto; min-height:36px; padding:6px 11px;
    font-size:.82rem; line-height:1.1;
  }
  .site-header .nav { display:none; }
  .site-header.nav-ready .nav:not(.is-open) { display:none; }
  .site-header .nav.is-open {
    display:flex; position:absolute; top:100%; right:0; left:0; z-index:601;
    box-sizing:border-box; margin:0; width:100%; flex:0 0 auto;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    gap:0; padding:7px 12px 12px;
    max-height:calc(100dvh - 54px); overflow-y:auto; overscroll-behavior:contain;
    background:#052d67; border:1px solid rgba(230,201,42,.40);
    border-top:2px solid var(--yellow); border-radius:0 0 12px 12px;
    box-shadow:0 12px 24px rgba(3,28,80,.28);
  }
  .site-header .nav.is-open a {
    display:block; width:100%; font-size:.88rem; line-height:1.12;
    padding:9px 7px; min-height:34px; box-sizing:border-box;
    border-top:1px solid rgba(255,255,255,.18);
  }
  /* Los enlaces complementarios sustituyen al footer oculto en horizontal. */
  .site-header .nav .nav-mobile-only { display:block !important; }
  .site-header .nav .nav-mobile-extra-start,
  .site-header .nav .nav-mobile-legal-start { margin-top:4px; }

  /* La portada deja de reservar 540-610px de alto en una pantalla de 350-450px. */
  body:has(> .site-header) .home-hero {
    min-height:0; height:auto; align-items:stretch;
  }
  body:has(> .site-header) .home-hero-content {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,.85fr);
    grid-template-areas:"kicker actions" "heading actions" "copy actions";
    grid-template-rows:auto auto 1fr; align-items:start;
    column-gap:14px; row-gap:4px;
    padding-top:14px; padding-bottom:22px;
  }
  body:has(> .site-header) .home-hero-kicker { grid-area:kicker; margin:0; font-size:.64rem; letter-spacing:.075em; }
  body:has(> .site-header) .home-hero h1 {
    grid-area:heading; max-width:none; margin:0; font-size:clamp(1.75rem,4.1vw,2.55rem);
    line-height:.98; letter-spacing:-.045em;
  }
  body:has(> .site-header) .home-hero-copy {
    grid-area:copy; margin:3px 0 0; max-width:38ch;
    font-size:clamp(.72rem,1.45vw,.90rem); line-height:1.30;
  }
  body:has(> .site-header) .home-hero-actions {
    grid-area:actions; align-self:center;
    display:grid; grid-template-columns:minmax(0,1fr);
    gap:5px; margin:0; width:100%; min-width:0;
  }
  body:has(> .site-header) .home-hero-actions-tournaments { display:contents; }
  body:has(> .site-header) .home-hero-actions .hero-btn {
    box-sizing:border-box; min-width:0; width:100%; min-height:33px;
    padding:5px 9px; font-size:.71rem; line-height:1.1;
    text-align:center; white-space:normal;
  }
  body:has(> .site-header) .home-hero .hero-dots { bottom:7px; gap:8px; }
  body:has(> .site-header) .home-hero .hero-dot { width:8px; height:8px; }
  body:has(> .site-header) .home-sections { padding-top:15px; }
}