/*
  responsive.css — Repaso final de responsive (modulo 12 de requisitos.md).
  La mayoria de los componentes ya resuelven su propio comportamiento por
  breakpoint dentro de home.css/detalle.css/components.css (convencion ya
  establecida por los agentes anteriores: cada media query vive junto al
  componente al que afecta). Este archivo queda para:
    1) un piso defensivo contra overflow horizontal a nivel de documento
       (criterio de aceptacion: "usable en movil/tablet/escritorio sin
       overflow ni elementos rotos"), y
    2) ajustes puntuales de movil angosto (320-374px, ej. iPhone SE) que no
       encajaban naturalmente en ningun componente especifico.
  Breakpoints de referencia (ver variables.css y sistema-diseno.md seccion 4):
    movil: 0-639px | tablet: 640-1023px | escritorio: 1024-1439px | >=1440px
*/

/* ============ Piso defensivo anti-overflow horizontal ============
   .home ya tenia overflow:hidden propio (home.css); pais.html (#app) no
   tenia un equivalente. Se aplica a <body> (no a <html>) para no interferir
   con el calculo del contenedor de scroll que usan los `position: sticky`
   de la barra de pestanas (sistema-diseno.md 6.2) ni con los elementos
   `position: fixed` (selector de idioma, drawer, boton flotante), que se
   posicionan contra el viewport sin importar el overflow de body. */
body {
  overflow-x: hidden;
}

/* ============ Movil angosto (320-374px, ej. iPhone SE / Android gama baja) ============ */

@media (max-width: 374px) {
  /* La grilla de tarjetas de contenido (atracciones/gastronomia) y la de
     niveles de presupuesto ya caen a 1 columna por defecto (mobile-first),
     pero el padding de las tarjetas se recorta un poco mas para dejar mas
     ancho util al texto en aleman/frances, que suele ser mas largo. */
  .content-card__body,
  .season-card,
  .budget-level-card {
    padding: var(--space-3);
  }

  /* Boton "pais aleatorio" / "Mis favoritos" del HOME: en una fila tan
     angosta, mantener icono + texto en una sola linea (white-space normal ya
     permite wrap) alarga demasiado el boton verticalmente si el texto entra
     en 3 lineas (aleman); se reduce el padding horizontal para ganar aire. */
  .home__topbar .btn {
    padding-inline: var(--space-4);
  }

  /* Fila de "label + valor" de cada slider de la calculadora: si el valor
     (nivel elegido, ej. "Mehrere Ausflüge" en aleman) y el label mas largo
     no entran en una sola linea incluso despues de que el label se achique a
     su min-content, se permite que la fila pase a dos lineas en vez de
     forzar un ancho minimo mayor al del contenedor. */
  .budget-calc__row label {
    flex-wrap: wrap;
  }
  .budget-calc__row label span:last-child {
    white-space: normal;
    text-align: left;
  }
}

/* ============ Escritorio grande (>=1440px, sistema-diseno.md seccion 4) ============
   El contenedor de contenido ya limita a --container-max-width via .container
   (components.css); esto solo confirma que la pagina de detalle no deja
   franjas de fondo distintas fuera de ese limite en anchos muy grandes (el
   fondo de la pagina ya es --bg-base de lado a lado, asi que no hace falta
   ningun ajuste adicional aca mas que documentar que se reviso). */