/* ==========================================================================
   ESLABÓN — Adaptations for larger screens: styles.css defines the mobile experience. Here, only incremental improvements are added using min-width; the base design is never redone.

  Breakpoints
  sm 520px two columns in simple grids
  md 720px content in two columns
  lg 900px horizontal navigation (hamburger menu disappears)
  xl 1120px full grids
  2xl 1360px navigation sidebar
   ========================================================================== */

/* ==========================================================================
   sm — 520px
   ========================================================================== */
@media (min-width: 520px) {
  .figures__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
  }

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

  .hero__actions {
    gap: var(--space-sm);
  }
}

/* ==========================================================================
   md — 720px
   ========================================================================== */
@media (min-width: 720px) {
  :root {
    --display-width: 114;
  }

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

  .programs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .about__panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .panel {
    padding: var(--space-xl) var(--space-lg);
  }

  .form {
    padding: var(--space-lg);
  }

  .form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .card {
    padding: var(--space-lg);
  }

  .modal__inner {
    padding: var(--space-xl) var(--space-lg);
  }

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

/* ==========================================================================
   lg — 900px : Navigation switches to a horizontal bar
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    --header-h: 82px;
  }

  .brand__mark {
    block-size: 34px;
  }

  .brand__text {
    display: block;
  }

  /* The full-screen panel is once again an online list. */
  .site-nav {
    position: static;
    inset: auto;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: 0;
    overflow: visible;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(0.75rem, 1.4vw, 1.6rem);
  }

  .site-nav__item {
    animation: none !important;
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    padding-block: 0.35rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
    border-block-end: 0;
  }

  .site-nav__link::before {
    display: none;
  }

  .site-nav__link:hover,
  .site-nav__link[aria-current="true"] {
    padding-inline-start: 0;
    color: var(--color-text);
  }

  .site-nav__footer {
    display: none;
  }

  .nav-toggle {
    display: none;
  }

  .nav-cta {
    display: inline-flex;
    padding: 0.7rem 1.3rem;
  }

  /* Hero in two columns: message on the left, string on the right */
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-xl);
  }

  .hero__chain {
    min-block-size: 26rem;
  }

  .chain {
    inline-size: min(100%, 26rem);
  }

  .focus__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-2xl);
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

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

  .about__lead-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .allies__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer__bottom {
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   xl — 1120px
   ========================================================================== */
@media (min-width: 1120px) {
  .lines__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

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

  .allies__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: var(--space-lg);
  }

  /* The ratios are read as a row of columns separated by fillets */
  .reasons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block-end: 1px solid var(--color-border);
  }

  .reason {
    padding: var(--space-lg) var(--space-md);
    border-block-end: 0;
    border-inline-start: 1px solid var(--color-border);
  }

  .reason:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .reason:hover {
    background-color: rgb(var(--hue-rgb) / 0.05);
  }

  .hero__scroll {
    display: flex;
  }

  .program {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* ==========================================================================
   2xl — 1360px : The side navigation chain appears
   ========================================================================== */
@media (min-width: 1360px) {
  .spine {
    display: block;
  }

  .hero__scroll {
    inset-inline-start: calc(var(--gutter) + 2.5rem);
  }
}

/* ==========================================================================
  Fine-tuning for very narrow mobile phones
   ========================================================================== */
@media (max-width: 380px) {
  :root {
    --fs-h1: 2.1rem;
  }

  .site-nav__link {
    font-size: 1.4rem;
  }

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

/* Low screens horizontally: the hero should not force 100svh */
@media (max-height: 620px) and (min-width: 720px) {
  .hero {
    min-block-size: auto;
    padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
  }
}