/* ==========================================================================
   desktop.css — phase two

   Purely additive. Every rule here sits inside a `min-width` query, so nothing
   in this file can affect the mobile design, which stays exactly as measured
   against the Figma snapshots.

   Two breakpoints:
     700px  the 393px column is stranded in whitespace on a tablet — widen it
            and scale the type, still one column.
    1000px  real desktop: sections 3/4/5 become two columns with the artwork
            beside the copy, the carousel shows both slides, and the closing
            actions sit side by side.
   ========================================================================== */

/* ==========================================================================
   700px — wider single column
   ========================================================================== */

@media (min-width: 700px) {
  .container {
    max-width: 620px;
  }

  .hero {
    min-height: 680px;
  }

  .hero__title {
    font-size: 40px;
    line-height: 1.22;
  }

  .hero__sub {
    margin-top: 20px;
    font-size: 28px;
    line-height: 1.35;
  }

  .hero__intro {
    padding-top: 60px;
  }

  .hero__art {
    top: auto;
    bottom: 0;
    width: 860px;
    transform: translateX(calc(-50% - 40px));
  }

  .section__title {
    font-size: 48px;
  }

  .section__title--sm {
    font-size: 34px;
  }

  .section__body {
    max-width: 560px;
    margin-inline: auto;
    font-size: 26px;
  }

  .section__sub {
    max-width: 480px;
    font-size: 24px;
  }

  .quiz {
    max-width: 560px;
  }

  .quiz__question {
    max-width: 500px;
    font-size: 30px;
  }

  .quiz__cardText {
    font-size: 24px;
  }

  .quiz__card {
    min-height: 190px;
  }
}

/* ==========================================================================
   1000px — desktop
   ========================================================================== */

@media (min-width: 1000px) {
  .container {
    max-width: 1120px;
    padding-inline: 40px;
  }

  /* Fixed section heights were there to keep the mobile content in register
     with the background gradient. At this width the layout drives the height
     instead, and the gradient simply stretches across whatever that is. */
  .section {
    min-height: 0;
  }

  /* --- 1. Hero -------------------------------------------------------- */

  .hero {
    min-height: 780px;
  }

  .hero__intro {
    padding-top: 90px;
  }

  .hero__title {
    font-size: 56px;
    line-height: 1.18;
  }

  .hero__sub {
    margin-top: 24px;
    font-size: 30px;
  }

  .hero__art {
    top: auto;
    bottom: 0;
    width: 1400px;
    transform: translateX(calc(-50% - 60px));
  }

  /* --- Shared --------------------------------------------------------- */

  .section__title {
    font-size: 56px;
  }

  .section__title--sm {
    font-size: 42px;
  }

  .section__body {
    max-width: 720px;
    font-size: 26px;
  }

  .section__sub {
    max-width: 560px;
    font-size: 26px;
  }

  .section__rule {
    width: 200px;
  }

  /* --- 2. The initiative ---------------------------------------------- */

  .section--initiative {
    padding-block: 130px;
  }

  .initiative__title {
    padding-top: 0;
  }

  .initiative__body {
    margin-top: 44px;
  }

  .section__body + .section__body {
    margin-top: 30px;
  }

  /* --- 3/4/5. Copy beside artwork -------------------------------------- */
  /* The markup is a .container followed by the artwork, so a two-column grid
     on the section places them side by side with no HTML change. The artwork
     drops out of absolute positioning and becomes a normal grid item. */

  .section--counter,
  .section--unclear,
  .section--provided {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    max-width: 1120px;
    margin-inline: auto;
    padding: 90px 40px;
  }

  .section--counter .container,
  .section--unclear .container,
  .section--provided .container {
    max-width: none;
    padding-inline: 0;
    text-align: left;
  }

  .section--counter .section__body,
  .section--unclear .section__sub,
  .section--provided .section__sub {
    margin-inline: 0;
  }

  .section--unclear .section__rule,
  .section--provided .section__rule {
    margin-inline: 0;
  }

  /* Constrained by height, not width: these renders are portrait (786x1350 for
     section 3), so a width-based cap makes them 720px tall and stretches the
     section to match. */
  .section__art {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    max-height: 400px;
    justify-self: center;
  }

  .counter__art,
  .unclear__art,
  .provided__art {
    top: auto;
    left: auto;
  }

  /* Alternate which side the artwork sits on, so the page does not read as a
     single repeated column. */
  .section--unclear .container {
    order: 2;
  }

  .counter__title,
  .unclear__title,
  .provided__title {
    padding-top: 0;
  }

  .counter__body {
    margin-top: 32px;
  }

  .unclear__sub,
  .provided__sub {
    margin-top: 24px;
  }

  .unclear__rule,
  .provided__rule {
    margin-top: 44px;
  }

  /* --- 6. Under 18 ----------------------------------------------------- */

  .section--under18 {
    padding-block: 110px;
  }

  .under18__title {
    padding-top: 0;
  }

  .under18__sub {
    margin-top: 24px;
  }

  /* --- 7. Carousel ----------------------------------------------------- */
  /* Both slides fit, so the track stops scrolling and the indicators have
     nothing left to indicate. */

  .section--next {
    padding-block: 120px;
  }

  .next__title {
    padding-top: 0;
  }

  ul.next__track {
    max-width: 1120px;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    padding-inline: 40px;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .next__slide {
    flex: 0 0 460px;
  }

  .next__img {
    width: 460px;
    height: 460px;
    border-radius: 24px;
  }

  .next__dots {
    display: none;
  }

  /* --- 8. Close -------------------------------------------------------- */

  .section--close {
    padding-block: 120px;
  }

  .close__actions {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1120px;
    padding-top: 0;
  }

  .close__action {
    padding-inline: 0;
  }

  .close__action + .close__action {
    margin-top: 0;
  }

  .close__icon {
    width: 60px;
    height: 60px;
  }

  .close__icon svg {
    width: 24px;
    height: 24px;
  }

  .close__icon--quiz {
    font-size: 32px;
  }

  .close__actionTitle {
    font-size: 30px;
  }

  .close__actionSub {
    font-size: 24px;
  }

  .close__lead {
    max-width: 760px;
    margin-top: 80px;
    font-size: 40px;
    line-height: 1.25;
  }

  .close__lockup {
    gap: 20px;
    margin-top: 70px;
  }

  .close__lockupMark {
    width: 150px;
  }

  .close__lockupText {
    font-size: 30px;
  }

  /* --- Quiz ------------------------------------------------------------ */

  .quiz {
    max-width: 720px;
  }

  .quiz__num {
    font-size: 32px;
  }

  .quiz__question {
    max-width: 640px;
    margin-top: 30px;
    font-size: 34px;
  }

  .quiz__grid {
    gap: 16px;
    margin-top: 44px;
  }

  .quiz__card {
    min-height: 200px;
    border-radius: 20px;
  }

  .quiz__cardText {
    font-size: 26px;
  }

  .quiz__submit {
    min-height: 60px;
    margin-top: 40px;
    font-size: 26px;
  }

  .quiz__progress {
    margin-top: 34px;
  }

  .quiz__count {
    font-size: 17px;
  }

  .quiz__score {
    font-size: 60px;
  }

  .quiz__resultTitle {
    font-size: 40px;
  }

  .quiz__resultNote {
    max-width: 460px;
    font-size: 24px;
  }

  .quiz__actions {
    flex-direction: row;
    justify-content: center;
  }

  .quiz__btn {
    min-width: 260px;
    padding-inline: 32px;
  }
}