/* ==========================================================================
   AraucoTV 3 — responsive.css
   Breakpoints: escritorio → tablet (≤1024) → móvil (≤640)
   ========================================================================== */

/* ===== ESCRITORIO (default en main.css) ===== */
@media (min-width:1025px){
  .atv-grid--layout{grid-template-columns:minmax(0,1fr) 320px}
}

/* ===== TABLET (≤1024) ===== */
@media (max-width:1024px){
  :root{--header-h:64px}

  /* Layout principal: una sola columna, sidebar abajo */
  .atv-grid--layout{grid-template-columns:1fr}
  .atv-aside{order:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3)}

  /* Hero: dos columnas más equilibradas */
  .atv-hero{grid-template-columns:1fr 1fr}

  /* Sección localidad: una columna */
  .atv-section--localidad .atv-section__body{grid-template-columns:1fr}

  /* Footer: 2 columnas */
  .atv-footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-5)}
  .atv-footer__brand{grid-column:1/-1}
}

/* ===== MÓVIL (≤640) ===== */
@media (max-width:640px){
  :root{
    --fs-2xl:clamp(1.6rem,7vw,2rem);
    --fs-3xl:clamp(1.7rem,8vw,2.2rem);
  }

  /* Ocultar nav de escritorio, mostrar toggle */
  .atv-nav{display:none}
  .atv-menu-toggle{display:flex}

  /* Topbar: apilar */
  .atv-topbar__inner{justify-content:center;gap:var(--sp-2);min-height:auto;padding-block:6px}
  .atv-topbar__date{display:none}

  /* Logo más pequeño */
  .atv-logo img{height:36px}
  .atv-header__actions{margin-left:auto}

  /* Hero: una sola columna, media arriba */
  .atv-hero{grid-template-columns:1fr;min-height:auto}
  .atv-hero__media{aspect-ratio:16/9}
  .atv-hero__content{padding:var(--sp-4)}

  /* Cards: una columna */
  .atv-grid--cards{grid-template-columns:1fr}
  .atv-card--sm{flex-direction:column}
  .atv-card--sm .atv-card__media{flex:none;aspect-ratio:16/9}
  .atv-card--sm .atv-card__body{padding:var(--sp-3)}

  /* Chiplist scroll horizontal */
  .atv-chiplist{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-2);margin-inline:calc(-1*clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px);-webkit-overflow-scrolling:touch}
  .atv-chiplist::-webkit-scrollbar{display:none}
  .atv-chip{flex-shrink:0}

  /* Secciones más compactas */
  .atv-section{margin-bottom:var(--sp-4)}
  .atv-section__title{font-size:var(--fs-md)}

  /* Sidebar: una columna */
  .atv-aside{grid-template-columns:1fr}

  /* Single: reducir tipografía y padding */
  .atv-single__title{font-size:var(--fs-xl)}
  .atv-single__body{font-size:var(--fs-base)}
  .atv-single__body > p:first-of-type::first-letter{font-size:2.6em}
  .atv-single__social{flex-wrap:wrap}
  .atv-single__social a{flex:1;justify-content:center;min-width:calc(50% - var(--sp-1))}

  /* Footer: una columna */
  .atv-footer__grid{grid-template-columns:1fr}
  .atv-footer__bottom{justify-content:center;text-align:center}

  /* Paginación scroll */
  .atv-pagination__list{gap:2px}
  .atv-pagination__list a,.atv-pagination__list span{min-width:36px;height:36px}
}