@import url("reset.css");
@import url("styles.css");
@import url("quiz.css");
@import url("forms.css");

/* ==========================================================================
   Tablet — 768px+
   ========================================================================== */

@media (min-width: 48rem) {
  .header__logo {
    flex-basis: 12.5rem;
    font-size: var(--text-lg);
  }

  .header__logo-accent {
    display: inline;
  }

  .header__nav {
    display: block;
  }

  .header__cta {
    padding-inline: var(--space-6);
    font-size: var(--text-sm);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-10);
  }

  .hero__cta {
    width: auto;
  }

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

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

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

  .program__tabs {
    max-width: 32rem;
  }

  .format__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .instructor__content {
    grid-template-columns: auto 1fr;
    gap: var(--space-12);
  }

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

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

  .footer__inner {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .footer__copy {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Desktop — 1024px+
   ========================================================================== */

@media (min-width: 64rem) {
  .header__logo {
    flex-basis: auto;
    font-size: var(--text-xl);
  }

  .header__logo-text {
    white-space: nowrap;
  }

  .problem__list {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .solution__item:nth-child(4) {
    grid-column: 1 / 2;
  }

  .solution__item:nth-child(5) {
    grid-column: 2 / 3;
  }

  .format__steps {
    position: relative;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-4);
  }

  .format__steps::before {
    content: "";
    position: absolute;
    top: calc(var(--space-4) + 1.25rem);
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(197, 155, 82, 0.35),
      rgba(197, 155, 82, 0.35),
      transparent
    );
  }

  .format__step {
    padding: var(--space-6) var(--space-4);
    padding-top: var(--space-12);
    text-align: center;
  }

  .format__step::before {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

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

  .quiz__form {
    max-width: 36rem;
  }
}

/* ==========================================================================
   Large desktop — 1280px+
   ========================================================================== */

@media (min-width: 80rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-16);
  }

  .hero__title {
    max-width: 14ch;
  }

  .hero__media {
    min-height: 22rem;
  }

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

/* ==========================================================================
   Mobile-specific — max 767px
   ========================================================================== */

@media (max-width: 47.9375rem) {
  body {
    padding-bottom: 4.5rem;
  }

  .header__inner {
    gap: var(--space-4);
  }

  .hero {
    min-height: auto;
  }

  .hero__inner {
    min-height: auto;
  }

  .hero__media {
    order: -1;
    max-height: 14rem;
    aspect-ratio: 16 / 10;
  }

  .program__tab {
    font-size: var(--text-xs);
    padding-inline: var(--space-3);
  }

  .program__panel {
    padding: var(--space-6);
  }

  .format__step {
    padding-left: var(--space-12);
  }

  .sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky-cta);
    display: block;
    padding: var(--space-3) var(--container-padding);
    background-color: rgba(250, 250, 248, 0.96);
    border-top: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
  }

  .sticky-cta__button {
    width: 100%;
  }

  .header__cta {
    display: none;
  }

  .apply__form {
    padding: var(--space-6);
  }

  .modal__inner {
    margin: var(--space-4);
  }
}

/* ==========================================================================
   Small mobile — 320px baseline check
   ========================================================================== */

@media (max-width: 23.4375rem) {
  .header__logo {
    font-size: 0.875rem;
  }

  .header__logo-accent {
    font-size: 0.875rem;
  }

  .hero__title {
    font-size: 1.625rem;
  }

  .hero__cta {
    max-width: none;
  }

  .hero__media {
    max-height: 12rem;
  }

  .pricing__price {
    font-size: var(--text-2xl);
  }
}

/* ==========================================================================
   Wide screens — 1440px / 1920px
   ========================================================================== */

@media (min-width: 90rem) {
  :root {
    --container-max: 80rem;
  }

  .header__inner {
    gap: var(--space-8);
  }

  .hero {
    padding-block: clamp(3rem, 4vw, 5rem);
  }

  .hero__inner {
    min-height: auto;
  }

  .hero__title {
    font-size: 3.25rem;
  }

  .hero__media {
    min-height: 26rem;
    aspect-ratio: 5 / 4;
  }
}

@media (min-width: 120rem) {
  :root {
    --container-max: 85rem;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .header,
  .sticky-cta,
  .modal,
  .hero__cta,
  .header__cta,
  .pricing__cta,
  .apply__form,
  .quiz__form {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }
}