/* ============================================================
   BOLETAIRES.CAT — Responsive · Digital Herbarium
   Breakpoints: sm=640 | md=768 | lg=1024 | xl=1280
   ============================================================ */

/* ── Mobile base (< 640px) ── */
@media (max-width: 639px) {
  :root {
    --container-pad: var(--space-4);
    --section-pad:   var(--space-12);
    --nav-height:    60px;
  }

  /* Nav */
  .nav__links    { display: none; }
  .nav__hamburger { display: flex; }

  /* Page header */
  .page-header { padding-top: calc(var(--nav-height) + var(--space-10)); }
  .page-header__title { font-size: var(--text-4xl); }

  /* Breadcrumb */
  .breadcrumb { padding-top: calc(var(--nav-height) + var(--space-4)); }

  /* Section headers */
  .section__title { font-size: var(--text-3xl); }

  /* Grids → single column */
  .grid-2,
  .grid-3,
  .grid-cards { grid-template-columns: 1fr; }

  /* Stats row */
  .stats-row { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer__grid   { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__disclaimer { text-align: center; }

  /* Species (v2) */
  .sp-hero { height: 380px; }
  .sp-hero__badge { display: none; }
  .sp-hero__content { flex-direction: column; align-items: flex-start; padding-bottom: 1.5rem; }
  .sp-layout__inner { flex-direction: column; }
  .sp-sidebar { width: 100%; position: static; max-height: none; overflow-y: visible; display: grid; grid-template-columns: 1fr 1fr; }
  .sp-photo-block { aspect-ratio: 4 / 3; }

  /* Gallery */
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .gallery__main { grid-row: 1; border-radius: var(--radius-xl); }

  /* Morphology */
  .morph-grid { grid-template-columns: 1fr; }

  /* Ecology */
  .ecology-grid { grid-template-columns: 1fr; }

  /* Season strip labels */
  .season-month__name { font-size: 8px; }

  /* Identification steps */
  .id-step { flex-direction: column; }
  .id-step__num { margin: 0 auto; }

  /* Catalog controls */
  .filter-row { gap: var(--space-2); }

  /* Callout */
  .callout-dark { padding: var(--space-8); }
}

/* ── Small tablet (640px – 767px) ── */
@media (min-width: 640px) and (max-width: 767px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-3     { grid-template-columns: repeat(2, 1fr); }
  .stats-row  { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .sp-hero { height: 420px; }
  .sp-hero__content { flex-direction: column; align-items: flex-start; }
  .sp-layout__inner { flex-direction: column; }
  .sp-sidebar { width: 100%; position: static; max-height: none; overflow-y: visible; display: grid; grid-template-columns: 1fr 1fr; }
  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }
}

/* ── Tablet (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav__links     { display: flex; }
  .nav__hamburger { display: none; }

  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-3     { grid-template-columns: repeat(2, 1fr); }
  .stats-row  { grid-template-columns: repeat(4, 1fr); }

  .footer__grid { grid-template-columns: 1fr 1fr; }

  .sp-sidebar { width: 20rem; }

  .nav__link { font-size: var(--text-xs); padding: var(--space-2); }
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
  .nav__links     { display: flex; }
  .nav__hamburger { display: none; }

  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .grid-3     { grid-template-columns: repeat(3, 1fr); }
  .stats-row  { grid-template-columns: repeat(4, 1fr); }

  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }

  .sp-sidebar { position: sticky; }
}

/* ── Wide (1280px+) ── */
@media (min-width: 1280px) {
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ── Print styles ── */
@media print {
  .nav, .footer, .scroll-top, .catalog-controls { display: none; }
  .sp-hero { display: none; }
  .sp-sidebar { display: none; }
  .sp-layout__inner { display: block; }
  body { background: white; }
}