/* ============================================================
   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 header */
  .species-header__inner { grid-template-columns: 1fr; }
  .species-header__name  { font-size: var(--text-3xl); }
  .species-header__photo { display: none; }

  /* 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; }
  .species-header__name { font-size: var(--text-4xl); }
  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }
  .ecology-grid   { grid-template-columns: 1fr 1fr; }
}

/* ── 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; }

  .species-header__name { font-size: var(--text-4xl); }

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

  .gallery {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto;
  }
  .gallery__main { grid-row: 1 / 3; }

  .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; }

  .morph-grid   { grid-template-columns: repeat(2, 1fr); }
  .ecology-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 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; }
  .species-header { background: none !important; padding: 0; }
  .species-header__name,
  .species-header__scientific,
  .species-header__genus { color: black !important; }
  body { background: white; }
}