/* Mobile/tablet polish (Turno 6): tap targets >=44px, legible text, no iOS input zoom.
   Applies to narrow screens AND to any touch device (iPad landscape 1024-1366px). */
@media (max-width: 1023px), (pointer: coarse) {
  /* hamburger + header logo */
  button[onclick="toggleNavDrawer()"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  header a[href="/"], nav a[href="/"] { min-height: 44px; display: inline-flex; align-items: center; }
  /* footer links */
  footer a { display: inline-flex; align-items: center; min-height: 44px; padding-left: 2px; padding-right: 2px; }
  /* form controls: 16px avoids iOS auto-zoom on focus */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  label:has(> input[type=checkbox]) { min-height: 44px; display: inline-flex; align-items: center; }
  /* buttons & pill filters */
  button:not([data-cell]) { min-height: 44px; }
  a.inline-flex, a.flex, a.block, a[class*="rounded"] { min-height: 44px; }
  a.inline-flex, a.flex { align-items: center; }
  nav[aria-label] a { min-height: 44px; display: inline-flex; align-items: center; }
  /* tiny labels */
  .text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: 12px !important; }
  /* long words / codes never overflow */
  code, .font-mono { overflow-wrap: anywhere; }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  img, video, iframe { max-width: 100%; }
}
@media (max-width: 1023px) and (orientation: landscape) {
  /* landscape phones: keep hero/header compact */
  .min-h-screen { min-height: auto !important; }
}
/* Tablets / landscape phones (768-1199px, incl. iPad landscape): desktop nav does not fit, use the drawer */
@media (min-width: 768px) and (max-width: 1199px) {
  header .hidden.lg\:flex.rounded-full { display: none !important; }
  header nav.md\:flex { display: none !important; }
  button[onclick="toggleNavDrawer()"].md\:hidden { display: inline-flex !important; }
  #mobileDrawer.md\:hidden { display: flex !important; }
  #mobileBackdrop.md\:hidden { display: block !important; }
}
/* drawer must scroll on short landscape screens */
#mobileDrawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- iOS Safari hardening (m8) ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100svh; overflow-x: hidden; overflow-x: clip; }
/* 100vh on iOS = viewport WITH the toolbar hidden -> hero taller than screen & content hidden behind the toolbar.
   svh = small viewport (toolbar visible), dvh = dynamic. Fallback to vh where unsupported. */
@supports (height: 100svh) {
  .min-h-screen { min-height: 100svh; }
  .h-screen { height: 100dvh; }
  .min-h-\[85vh\] { min-height: 85svh; }
  .max-h-screen { max-height: 100dvh; }
}
/* drawer: full dynamic height, respects the home indicator, does not scroll the page behind it */
#mobileDrawer { height: 100vh; height: 100dvh; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
/* fixed header: respect landscape notch insets */
header.fixed { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
footer { padding-bottom: env(safe-area-inset-bottom); }
/* Safari needs the prefixed property for hyphenation */
h1, h2, h3 { -webkit-hyphens: auto; }
/* long URLs / emails / tables never push the layout sideways */
p, li, td, dd { overflow-wrap: anywhere; }
table { max-width: 100%; }
.prose table, #articleContent table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre { max-width: 100%; overflow-x: auto; }
/* no iOS tap flash; touch devices: no sticky hover lift on cards */
a, button { -webkit-tap-highlight-color: rgba(16,185,129,.18); }
@media (hover: none) {
  .event-card:hover, .driver-card:hover, .stat-card:hover, .contact-method:hover, .role-card:hover, .game-card:hover,
  .group:hover .group-hover\:scale-105 { transform: none !important; }
}
/* grid/flex children may shrink below their min-content (prevents overflow from long words in cards) */
@media (max-width: 767px) { .grid > * { min-width: 0; } }

/* t257: foco visible accesible, microinteracciones discretas y jerarquía tipográfica */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #34d399;outline-offset:3px;border-radius:6px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
html{-webkit-tap-highlight-color:rgba(16,185,129,.18)}
.pl-card,.pl-link{transition:border-color .2s,transform .2s,box-shadow .2s,background-color .2s}
.pl-card:hover,.pl-link:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(16,185,129,.45);background-color:#1a222c}
.pl-card:active,.pl-link:active{transform:translateY(0) scale(.99)}
.pl-grid{gap:14px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}