/* Dedicated iPad portrait composition.
   This layer intentionally loads last and does not share card geometry with
   landscape. The live ipad-portrait class also supports Safari desktop mode. */
@media (min-width: 700px) and (max-width: 1400px) {
  html.ipad-portrait {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html.ipad-portrait body.playful-site.academic-site {
    --tablet-gutter: clamp(28px, 4.2vw, 44px);
    --tablet-space: clamp(30px, 4.4vw, 48px);
  }

  html.ipad-portrait body.playful-site.academic-site
    :is(.hero, .competition-hero, .course-hero-grid, .club-hero, .section-heading) {
    grid-template-columns: minmax(0, 1fr);
  }

  html.ipad-portrait body.playful-site.academic-site
    :is(.program-grid, .test-preparation-cards, .content-grid, .info-grid, .stage-grid, .pathway-cards, .contest-grid, .club-duo) {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-items: stretch;
  }

  html.ipad-portrait body.playful-site.academic-site .stage-grid {
    grid-auto-rows: 1fr;
  }

  html.ipad-portrait body.playful-site.academic-site .stage-grid > article {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 270px;
  }

  html.ipad-portrait body.playful-site.academic-site .stage-grid > article > a:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: min(280px, 100%);
    min-width: 0;
    max-width: 100%;
    height: 42px;
    min-height: 42px;
    margin-top: auto;
    padding: 0 14px;
    color: #fff;
    background: #203f54;
    border: 1px solid #203f54;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  html.ipad-portrait body.playful-site.academic-site
    :is(.program-grid, .test-preparation-cards, .content-grid, .info-grid, .stage-grid, .pathway-cards, .contest-grid, .club-duo) > * {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
  }

  /* Homepage stages use a calm, vertical reading order. */
  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .program-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: clamp(18px, 2.6vw, 26px);
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .pathway-card-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 0 14px;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .pathway-symbol {
    flex: 0 0 auto;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .pathway-step {
    white-space: nowrap;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .program-card > :is(.grade, h3, p:not(.grade), .pathway-details) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .program-card > .grade {
    margin: 0 0 8px;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .program-card > h3 {
    margin: 0 0 10px;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .program-card > p:not(.grade) {
    margin: 0 0 12px;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .pathway-details {
    margin: 0;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways .pathway-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #d8dfe2;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .home-pathways
    :is(.pathway-primary, .pathway-secondary) {
    box-sizing: border-box;
    width: min(240px, 100%);
    min-width: 0;
    max-width: 100%;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Test-preparation cards follow the same vertical rhythm. */
  html.ipad-portrait body.playful-site.academic-site .test-preparation-cards > article,
  html.ipad-portrait body.playful-site.academic-site .test-preparation-cards > article:last-child:nth-child(odd) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: clamp(18px, 2.6vw, 26px);
  }

  html.ipad-portrait body.playful-site.academic-site .test-preparation-cards > article > h2 {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid #c8d3dc;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html.ipad-portrait body.playful-site.academic-site .test-preparation-cards > article > :is(p, ul) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  html.ipad-portrait body.playful-site.academic-site .test-preparation-cards > article > ul {
    padding-left: 20px;
  }

  html.ipad-portrait body.playful-site.academic-site .test-preparation-cards > article > .button {
    align-self: flex-start;
    box-sizing: border-box;
    width: min(240px, 100%);
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 38px;
    max-height: none;
    margin: 4px 0 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .v2-five {
    grid-template-columns: minmax(0, 1fr);
  }

  html.ipad-portrait body.playful-site.academic-site .unit-layout,
  html.ipad-portrait body.playful-site.academic-site .practice-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html.ipad-portrait body.playful-site.academic-site .review-sidebar {
    order: -1;
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.ipad-portrait body.playful-site.academic-site.home-page .footer-main > div:first-child {
    grid-column: 1 / -1;
  }
}