/* ============================================================
   RESPONSIVE — Large tablet (≤ 1024px)
============================================================ */
@media (max-width: 1024px) {
  .section { padding-right: calc(var(--sidebar-w) * 5 + 2rem); }
  .section__inner { padding: 0 2rem; }
  footer { padding-right: calc(var(--sidebar-w) * 5 + 2rem); }
  .activities__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   STACKED LAYOUTS (hero + FAQ) — for narrow screens.
   Stacks the side-by-side hero and FAQ (which would otherwise overlap /
   get cramped): any width ≤1024px (all orientations) + tablets in portrait
   up to 1200px. Independent of the sidebar/nav choice (landscape keeps its
   sidebar; only these sections restack).
============================================================ */
@media (max-width: 1024px), (max-width: 1200px) and (orientation: portrait) {
  .hero-section                 { flex-direction: column; justify-content: center; }
  .hero-section .section__inner { order: 1; }
  /* Fill the width when stacked (drop the desktop column caps) */
  .hero__left { max-width: none; }
  .hero__desc { max-width: none; }
  .hero__mascot-wrap {
    position: static;
    order: 2;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 1.5rem;
  }
  .hero__mascot-img { width: auto; height: auto; max-width: 75%; max-height: 38vh; }

  /* FAQ — questions then librarian mascot below (centered) */
  .faq__layout      { grid-template-columns: 1fr; }
  .faq__mascot-wrap { position: static; justify-content: center; margin-top: 2rem; }
  .faq__mascot      { width: clamp(160px, 40vw, 280px); }
}

/* ============================================================
   MOBILE LAYOUT — phones (≤768px) + tablets in PORTRAIT (≤1200px)
   sidebar → bottom nav, stacked sections. Landscape tablets & desktop keep the sidebar.
============================================================ */
@media (max-width: 768px), (max-width: 1200px) and (orientation: portrait) {
  :root { --sidebar-w: 0px; }

  /* Hide the sidebar, show the bottom nav */
  .sidebar-nav { display: none; }
  .mobile-nav  { display: block; }
  body         { padding-bottom: 72px; }

  /* Full-width sections */
  .section {
    min-height: auto;
    padding: 4rem 0 3rem;
    padding-right: 0;
    align-items: flex-start;
  }
  .section__inner { padding: 0 1.5rem; }
  .section-divider { margin-right: 0; }

  /* Hero font sizes (stacking handled in the dedicated query below) */
  .hero__title    { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .hero__subtitle { font-size: clamp(1.1rem, 4vw, 1.6rem); }
  .hero__desc     { font-size: 0.9rem; }

  /* About */
  .about__title { font-size: clamp(1.8rem, 7vw, 3rem); }
  .about__card  { padding: 1.75rem 1.5rem; }

  /* Activities */
  .activities__grid  { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .activities__title { font-size: clamp(2rem, 8vw, 3.5rem); }

  /* FAQ */
  .faq__title { font-size: clamp(2rem, 9vw, 4rem); }
  .faq__list  { max-width: 100%; }

  /* Documentation */
  .docs__title  { font-size: clamp(2rem, 8vw, 3.5rem); }
  .doc-card     { grid-template-columns: 44px 1fr auto; padding: 1rem 1.25rem; }
  .doc-card__icon { width: 44px; height: 44px; }


  /* Contact — text full-width, then buttons + mascot on the SAME row, then details */
  .contact__inner {
    grid-template-areas:
      "text    text"
      "actions mascot"
      "details details";
    align-items: center;
    gap: 0 1rem;
  }
  .contact__mascot { width: clamp(130px, 34vw, 240px); margin-bottom: 0; align-self: center; }
  .contact__title   { font-size: clamp(1.8rem, 7vw, 3rem); }
  .contact__desc    { max-width: none; }   /* fill the width when stacked */
  .contact__details { gap: 1.5rem; }

  /* Footer */
  footer {
    padding: 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 480px)
============================================================ */
@media (max-width: 480px) {
  .section__inner { padding: 0 1.25rem; }

  /* Hero */
  .hero__title    { font-size: clamp(1.9rem, 10vw, 2.8rem); }
  .hero__subtitle { font-size: clamp(0.95rem, 4.5vw, 1.3rem); }
  .hero__eyebrow  { font-size: 0.72rem; }
  .hero__desc     { font-size: 0.87rem; max-width: 100%; }
  .btn-primary    { font-size: 0.88rem; padding: 0.85rem 1.4rem; }

  /* Activities: 1 column */
  .activities__grid  { grid-template-columns: 1fr; }
  .activities__title { font-size: clamp(1.8rem, 10vw, 2.5rem); }

  /* About */
  .about__title     { font-size: clamp(1.6rem, 9vw, 2.5rem); }
  .about__card      { padding: 1.5rem 1.25rem; border-radius: var(--radius-lg); }
  .about__card-title{ font-size: 1rem; }
  .about__card-text { font-size: 0.87rem; }

  /* FAQ */
  .faq__title    { font-size: clamp(1.8rem, 10vw, 3rem); }
  .faq__question { font-size: 0.9rem; padding: 1rem 1.25rem; }
  .faq__answer   { font-size: 0.87rem; }
  .faq__mascot   { width: clamp(120px, 40vw, 180px); }

  /* Documentation */
  .docs__title        { font-size: clamp(1.8rem, 10vw, 2.8rem); }
  .doc-card           { grid-template-columns: 36px 1fr auto; gap: 0.75rem; padding: 0.9rem 1rem; }
  .doc-card__icon     { width: 36px; height: 36px; }
  .doc-card__title    { font-size: 0.88rem; }
  .doc-card__desc     { display: none; }   /* hidden on very small screens */
  .doc-card__badge    { font-size: 0.55rem; }

  /* Contact */
  .contact__title   { font-size: clamp(1.6rem, 9vw, 2.5rem); }
  .contact__desc    { font-size: 0.9rem; }
  .contact__actions { flex-direction: column; align-items: center; }
  .btn-teal, .btn-outline { font-size: 0.88rem; padding: 0.85rem 1.4rem; width: 100%; justify-content: center; }

  /* Footer */
  .footer__links { flex-wrap: wrap; gap: 0.6rem 0.9rem; }
  .footer__copy  { font-size: 0.77rem; }
}

/* ============================================================
   RESPONSIVE — Very small mobile (≤ 360px)
============================================================ */
@media (max-width: 360px) {
  .section__inner    { padding: 0 1rem; }
  .hero__title       { font-size: 1.75rem; }
  .hero__subtitle    { font-size: 0.95rem; }
  .activities__grid  { grid-template-columns: 1fr; }
  .faq__title        { font-size: 1.7rem; }
  .contact__title    { font-size: 1.6rem; }
}