/* ============================================================
   Responsive — breakpoint fine-tuning across 320px → 1920px
   (core collapses live in layout.css / components.css;
    this file handles device-specific polish)
   ============================================================ */

/* ---------- ≤ 480px: small phones ---------- */
@media (max-width: 480px) {
  html { font-size: 15.5px; }

  .brand img.brand-emblem { height: 34px; }
  .brand img.brand-wordmark { height: 28px; }
  .brand-text .brand-title { font-size: 0.9rem; }

  .stat-tile .stat-num { font-size: var(--text-2xl); }
  .doc-item { grid-template-columns: 38px 1fr; }
  .doc-item .doc-btn { grid-column: 2; justify-self: start; }
  .notice-date { padding: 0.45rem 0.3rem; }
}

/* ---------- 481–767px: large phones ---------- */
@media (min-width: 481px) and (max-width: 767px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 768–1080px: tablets ---------- */
@media (min-width: 768px) and (max-width: 1080px) {
  .hero { min-height: 78vh; }
  .hero-inner { gap: var(--space-6); }
}

/* ---------- ≥ 1440px: wide desktops ---------- */
@media (min-width: 1440px) {
  :root { --container: 1280px; }
  .hero { min-height: 88vh; }
}

/* ---------- ≥ 1920px: full HD ---------- */
@media (min-width: 1920px) {
  :root { --container: 1360px; }
  html { font-size: 17px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .mobile-drawer, .drawer-overlay,
  .search-overlay, .lightbox, .btn, .nav-toggle, .search-toggle,
  .page-hero::after, .hero { display: none !important; }

  body { background: #fff; color: #000; }
  .page-hero { background: none; color: #000; padding: 0; }
  .page-hero h1, .page-hero .lede, .breadcrumb a, .breadcrumb [aria-current] { color: #000; }

  .card, .doc-item, .notice-item { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .table { font-size: 11px; }
  a { color: #000; text-decoration: underline; }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-height) + 2rem) 3rem; }
  .search-overlay { padding-top: 6vh; }
}