/*
 * Responsive overrides. Base styles target large screens; these breakpoints
 * progressively collapse the layout down to mobile.
 * Breakpoints: 1024 / 820 / 560 px.
 */

@media (max-width: 1024px) {
  .catedra-card {
    grid-template-columns: 1fr;
  }

  .catedra-card__media {
    aspect-ratio: 3 / 2;
    border-radius: 0; /* stacked: the card's own rounding handles the corners */
  }

  .site-footer__card {
    grid-template-columns: 1fr;
  }

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

  .team {
    gap: var(--space-3);
  }
}

@media (max-width: 820px) {
  .offer-grid {
    grid-template-columns: 1fr;
    max-width: 32rem;
    margin-inline: auto;
  }

  .cards-row li {
    flex-basis: 42vw;
  }

  .cards-row__img {
    height: clamp(300px, 52vw, 420px);
  }

  .newsletter__frame {
    grid-template-columns: 1fr;
  }

  .newsletter__media {
    grid-row: 1;
  }

  .newsletter__media img {
    min-height: 220px;
    max-height: 300px;
  }

  .desarrollo__layout {
    grid-template-columns: 1fr;
  }

  .feature {
    flex-basis: min(360px, 82%);
  }

  .menu-panel__nav,
  .site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .razon__frame {
    min-height: 420px;
  }

  .razon__img {
    aspect-ratio: auto;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .razon__content {
    position: relative;
    align-items: flex-start;
    text-align: left;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 100%);
    min-height: 420px;
  }

  .razon__title,
  .razon__text {
    max-width: 22ch;
  }
}

@media (max-width: 560px) {
  .cards-row li {
    flex-basis: 60vw;
  }

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

  /* Move the hero promo card out of the image on small screens. */
  .hero__card {
    position: static;
    width: 100%;
    max-width: 320px;
    margin-top: var(--space-4);
  }

  .header__actions .btn--pill {
    display: none; /* keep the header light on mobile; Login lives in the menu */
  }

  .field__row {
    flex-direction: column;
    align-items: stretch;
  }

  .field__row .btn {
    width: 100%;
  }

  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 400px) {
  .cards-row li {
    flex-basis: 72vw;
  }

  .menu-panel__nav,
  .site-footer__nav {
    grid-template-columns: 1fr;
  }
}