/* Shared responsive matrix: small phones through wide desktop displays. */
:root {
  --responsive-gutter: 24px;
  --responsive-content-max: 1600px;
}

html,
body { max-width: 100%; overflow-x: clip; }

:root body .container {
  width: 100% !important;
  max-width: calc(var(--responsive-content-max) + (var(--responsive-gutter) * 2)) !important;
  margin-inline: auto !important;
  padding-inline: var(--responsive-gutter) !important;
}

:where(img, video, canvas, iframe, svg) { max-width: 100%; }
:where(img, video) { height: auto; }
:where(input, select, textarea, button) { min-width: 0; max-width: 100%; }
:where(.data-table-wrapper, .table-responsive, .draft-files-table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1500px) {
  :root { --responsive-gutter: 48px; --responsive-content-max: 1600px; }
  :root body :is(.admin-main, .main-content) { max-width: 1500px; margin-inline: auto; }
}

/* 1366px and standard 13–14 inch laptops. */
@media (min-width: 1280px) and (max-width: 1499px) {
  :root { --responsive-gutter: 32px; --responsive-content-max: 1320px; }
  .public-navigation-bar .nav-links { gap: 5px !important; }
  .public-navigation-bar .nav-links > li > a,
  .public-navigation-bar .awards-menu > summary { padding-inline: 13px !important; font-size: 12px !important; }
}

/* Compact laptops and landscape tablets. */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --responsive-gutter: 24px; --responsive-content-max: 1180px; }
  .public-navigation-bar .nav-links { gap: 2px !important; }
  .public-navigation-bar .nav-links > li > a,
  .public-navigation-bar .awards-menu > summary { padding-inline: 10px !important; font-size: 11px !important; letter-spacing: .035em !important; }
  :root body .navbar .brand-institute-name { font-size: 18px; }
  :root body .navbar .brand-logo-text::after { font-size: 16px; }
}

/* iPad and tablet portrait layouts. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --responsive-gutter: 24px; --responsive-content-max: 960px; }
  :root body :is(.hero-content, .about-grid, .contact-grid, .registration-grid) { grid-template-columns: 1fr !important; }
  :root body :is(.stat-grid, .kpi-grid, .admin-segmentation-grid, .archive-cycle-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :root body .navbar .brand-institute-name { font-size: 17px; }
  :root body .navbar .brand-logo-text::after { font-size: 15px; }
}

/* Large phones and small tablets. */
@media (min-width: 480px) and (max-width: 767px) {
  :root { --responsive-gutter: 18px; }
  :root body :is(.hero-content, .about-grid, .contact-grid, .registration-grid, .form-grid-2, .admin-detail-grid) { grid-template-columns: 1fr !important; }
  :root body :is(.stat-grid, .kpi-grid, .admin-segmentation-grid, .obj-grid, .cat-grid, .gallery-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Standard and small phones. */
@media (max-width: 479px) {
  :root { --responsive-gutter: 14px; }
  :root body :is(.hero-content, .about-grid, .contact-grid, .registration-grid, .form-grid-2, .admin-detail-grid, .stat-grid, .kpi-grid, .admin-segmentation-grid, .obj-grid, .cat-grid, .gallery-grid, .archive-cycle-grid, .archive-summary-grid, .archive-timeline-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  :root body :is(.btn-primary, .btn-outline, button, input, select, textarea) { min-height: 44px; }
  :root body :is(.admin-section, .card, .form-section) { max-width: 100%; }
  :root body .public-navigation-bar .nav-links { max-height: calc(100dvh - 72px); overflow-y: auto; }
}

/* Extra-small phones. */
@media (max-width: 359px) {
  :root { --responsive-gutter: 10px; }
  :root body { font-size: 13px; }
  :root body :is(.btn-primary, .btn-outline) { width: 100%; justify-content: center; }
  :root body .navbar .nav-container { min-height: 72px !important; height: 72px !important; }
  :root body .navbar .brand-logo-img { height: 68px !important; }
  :root body .navbar .brand-institute-name { font-size: 8px; }
  :root body .navbar .brand-logo-note { font-size: 6px; }
  :root body .navbar .brand-logo-text::after { font-size: 6.5px; white-space: normal; }
}

@media print {
  html,
  body { overflow: visible; }
  :root body .container { max-width: none !important; padding-inline: 0 !important; }
}