/* =========================
   responsive.css — Mascotas Ayacucho (FINAL)
   Mobile-first • AA • sin romper grids
   Cargar DESPUÉS de base.css
   ========================= */

/* --------- Tipografía base con clamp --------- */
html{
  /* base 15→16→17 según viewport */
  font-size: clamp(15px, 0.95vw + 12px, 17px);
}
body{
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* --------- Contenedores y espaciados --------- */
/* Usa --container definido en base.css. Solo definimos padding fluido. */
:root{
  --page-pad-inline: clamp(12px, 2.3vw, 24px);
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* notch/isla */
}
.wrap, .container, .site-content{
  max-width: var(--container);
  padding-inline: var(--page-pad-inline);
  margin-inline: auto;
}

/* --------- Imágenes y medios --------- */
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* --------- Grid utilitario (auto-fit) --------- */
/* Úsalo solo donde controles la marca-up: <ul class="rg-grid"> ... */
.rg-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.rg-card{ border-radius: 12px; }
.rg-card__title{ line-height: 1.25; }

/* ==============================================
   BREAKPOINTS (mobile-first)
   ============================================== */

/* ----- ≤480px: móviles pequeños ----- */
@media (max-width: 480px){
  body{ line-height: 1.45; }

  /* Grid general (nuestras listas) */
  .rg-grid{ gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }

  /* Tarjetas */
  .rg-card{ border-radius: 10px; }
  .rg-card__title{
    font-size: .9rem;
    min-height: auto; /* deja fluir en pantallas chicas */
  }
  .rg-card__price{ font-size: .95rem; }
  .rg-card__footer .button,
  .rg-btn{
    font-size: .85rem;
    padding: 8px 10px;
  }

  /* Productos Nuevos */
  .productos-nuevos li.product .button{ width: calc(100% - 20px); }

  /* Hero banner: compacta paddings */
  .hero-banner .hero-content{
    padding: clamp(12px, 6vw, 24px);
    gap: .35rem;
  }
  .hero-banner .hero-title{ font-size: clamp(20px, 6vw, 30px); }
  .hero-banner .hero-subtitle{ font-size: clamp(13px, 3.5vw, 16px); }
  .hero-banner .hero-btn{ padding:.55em 1em; font-size:.9rem; }

  /* Header: wrap controlado */
  .header-container{ gap:.5rem; }
  .nav-toggle{ display:inline-flex; }
}

/* ----- ≤768px: tablets (portrait) ----- */
@media (max-width: 768px){
  /* Si no caben 3 cómodas, mantenemos 2 */
  .rg-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

  /* Woo loop interno (cuando se use nuestra clase) */
  .rg-grid.products{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  .rg-card__title{ font-size: .95rem; }
  .rg-card__footer .button,
  .rg-btn{ font-size: .9rem; }

  /* Footer: apilar 3 filas */
  .footer-container{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
}

/* ----- ≤992px: tablets landscape / laptops angostos ----- */
@media (max-width: 992px){
  /* Asegura 2 columnas con respiro */
  .rg-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rg-grid.products{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ----- ≥1280px: desktops grandes (mejora legibilidad) ----- */
@media (min-width: 1280px){
  .rg-card__title{ font-size: 1.05rem; }
}

/* ==============================================
   UTILIDADES DE RESPONSIVE
   ============================================== */

/* Hover solo en dispositivos que lo soportan */
@media (hover:hover){
  a:hover{ text-decoration-thickness: from-font; }
}

/* Touch targets más cómodos en pantallas táctiles */
@media (hover: none){
  .button, button, .rg-btn, .nav-toggle{
    min-height: 40px;
  }
}

/* Reduce motion global */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Alto contraste del sistema */
@media (prefers-contrast: more){
  a:hover, a:focus-visible{ text-decoration: underline; }
}

/* Safe areas (iPhone con isla/notch) */
.whatsapp-float{ bottom: calc(16px + var(--safe-bottom)); }

/* Evita que headers sticky tapen contenidos anclados */
:target{ scroll-margin-top: var(--header-min-h, 84px); }