/*
  responsive.css
  Cambios estructurales por breakpoint y soporte para ultrawide, 2K y 4K.
*/

@media (max-width: 22.5rem) {
  :root {
    --container-pad: 0.75rem;
    --section-space: clamp(2.25rem, 9vw, 3.25rem);
  }

  .nav-brand {
    font-size: 0.95rem;
  }
}

@media (max-width: 29.999rem) {
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group > .btn,
  .btn {
    inline-size: 100%;
  }
}

@media (min-width: 30rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm-span-2 { grid-column: span 2; }
  .sm-text-start { text-align: start; }
  .sm-text-center { text-align: center; }
  .sm-flex-row { flex-direction: row; }
}

@media (min-width: 37.5rem) {
  .commercial-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

@media (min-width: 48rem) {
  .split {
    flex-direction: row;
    align-items: center;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar {
    grid-template-columns: minmax(13rem, var(--sidebar-width, 18rem)) minmax(0, 1fr);
  }

  .sidebar-right {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, var(--sidebar-width, 18rem));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(10rem, 0.7fr));
  }

  .nav-inner {
    flex-wrap: nowrap;
    min-block-size: 4.5rem;
  }

  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    inline-size: auto;
    padding-block: 0;
  }

  .md-span-2 { grid-column: span 2; }
  .md-span-3 { grid-column: span 3; }
  .md-text-start { text-align: start; }
  .md-text-center { text-align: center; }
  .md-text-end { text-align: end; }

  .show-mobile { display: none !important; }
  .hide-mobile { display: revert !important; }
  .show-tablet { display: revert !important; }
  .hide-tablet { display: none !important; }
}

@media (min-width: 56.25rem) {
  .md2-span-2 { grid-column: span 2; }
  .md2-span-3 { grid-column: span 3; }
}

@media (min-width: 64rem) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commercial-band {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .lg-span-2 { grid-column: span 2; }
  .lg-span-3 { grid-column: span 3; }
  .lg-span-4 { grid-column: span 4; }
  .lg-text-start { text-align: start; }
  .lg-text-center { text-align: center; }
  .lg-text-end { text-align: end; }

  .show-tablet { display: none !important; }
  .hide-tablet { display: revert !important; }
  .show-desktop { display: revert !important; }
  .hide-desktop { display: none !important; }
}

@media (min-width: 80rem) {
  .grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 90rem) {
  :root {
    --container-current: var(--container-xl);
  }
}

@media (min-width: 100rem) {
  :root {
    --container-current: var(--container-2xl);
  }
}

@media (min-width: 120rem) {
  :root {
    --container-pad: clamp(2rem, 2vw, 3rem);
  }
}

@media (min-width: 160rem) {
  :root {
    --container-pad: clamp(2.5rem, 1.6vw, 4rem);
  }
}

@media (min-width: 240rem) {
  :root {
    --container-pad: 4rem;
  }
}

@media (max-height: 30rem) and (orientation: landscape) {
  :root {
    --section-space: clamp(1.75rem, 5vw, 3rem);
  }

  .navbar {
    position: relative;
  }

  .nav-inner {
    min-block-size: 3.5rem;
  }
}