/* Aspect-ratio responsive refinements shared across the site. */
:root {
  --responsive-page-padding: clamp(16px, 3vw, 32px);
  --responsive-section-gap: clamp(16px, 2.5vw, 32px);
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

body.dashboard .container,
.page-shell {
  width: min(100%, var(--responsive-content-width, 1120px));
}

.hero {
  max-width: min(92vw, var(--responsive-hero-width, 900px));
}

.content-panel,
.modal-content {
  max-width: min(100%, var(--responsive-panel-width, 900px));
}

.layout .content {
  width: min(100%, var(--responsive-settings-content-width, 980px));
}

@media (min-aspect-ratio: 16 / 10) and (min-width: 900px) {
  :root {
    --responsive-content-width: 1180px;
    --responsive-panel-width: 960px;
    --responsive-hero-width: 980px;
    --responsive-settings-content-width: 1040px;
  }

  body.dashboard .container,
  .page-shell {
    padding-left: var(--responsive-page-padding);
    padding-right: var(--responsive-page-padding);
  }

  .page-header {
    gap: clamp(28px, 5vw, 72px);
  }

  .footer-inner {
    max-width: 1080px;
  }
}

@media (min-aspect-ratio: 21 / 9) and (min-width: 1200px) {
  :root {
    --responsive-content-width: 1320px;
    --responsive-panel-width: 1040px;
    --responsive-hero-width: 1080px;
    --responsive-settings-content-width: 1160px;
  }

  body.dashboard .container,
  .page-shell {
    padding-left: clamp(28px, 5vw, 72px);
    padding-right: clamp(28px, 5vw, 72px);
  }

  .hero {
    padding-left: clamp(40px, 5vw, 76px);
    padding-right: clamp(40px, 5vw, 76px);
  }
}

@media (max-aspect-ratio: 3 / 4) {
  :root {
    --responsive-page-padding: 16px;
    --responsive-section-gap: 18px;
  }

  body {
    overflow-y: auto;
  }

  body.dashboard .container,
  .page-shell {
    padding-left: var(--responsive-page-padding);
    padding-right: var(--responsive-page-padding);
  }

  .hero {
    width: min(100%, 92vw);
    padding: clamp(28px, 7vw, 44px) clamp(18px, 5vw, 28px);
  }

  .brand-icon img {
    width: clamp(140px, 40vw, 190px);
    height: clamp(140px, 40vw, 190px);
  }

  .page-header,
  .footer-inner,
  .navbar,
  .nav-links,
  .stats-grid,
  .records-grid,
  .summary-grid,
  .settings-grid,
  .form-row {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    align-items: stretch;
  }

  .navbar {
    gap: 12px;
  }

  .nav-links {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 0 !important;
  }

  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none;
  }

  .layout .content {
    margin-left: 0 !important;
    width: 100%;
    max-width: none;
    height: auto !important;
    min-height: auto;
    overflow: visible !important;
    padding: var(--responsive-page-padding);
  }

  .content-panel,
  .modal-content {
    padding: clamp(18px, 5vw, 28px);
  }

  .footer-inner,
  .footer-bottom {
    text-align: center;
  }
}

@media (max-height: 700px) and (min-aspect-ratio: 4 / 3) {
  body.dashboard .container,
  .page-shell {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .hero {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .brand-icon {
    margin-bottom: 14px;
  }

  .brand-icon img {
    width: clamp(120px, 22vh, 180px);
    height: clamp(120px, 22vh, 180px);
  }

  .page-header,
  .content-panel,
  .matches-section,
  .footer {
    margin-top: var(--responsive-section-gap);
    margin-bottom: var(--responsive-section-gap);
  }

  .modal-content {
    margin-top: 10px;
    margin-bottom: 10px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }
}

@media (max-width: 640px), (max-aspect-ratio: 2 / 3) {
  body.dashboard .container,
  .page-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  body:not(.dashboard) > .container,
  main.container {
    width: min(100%, 420px);
    padding: clamp(22px, 6vw, 32px);
  }

  .content-panel {
    border-radius: 18px;
  }

  table {
    font-size: 13px;
  }
}