/* =========================================================
   categories — per-section mobile rules.
   Loaded after responsive.css.
   ========================================================= */

@media (max-width: 1279px){

  /* This hero does have a photograph, so it keeps the full viewport
     responsive.css gives it. Only the display type is rescaled: the comp
     sets it at 12.9rem, which is 129px at a 10px root. */
  .cat-hero__title{
    font-size: 5.8rem !important;
    line-height: 1.02 !important;
  }
  .cat-hero__p1,
  .cat-hero__p2{ line-height: 2.6rem !important; }

  .s-dir__h2,
  .s-sub__h2,
  .s-open__h2{
    font-size: 5rem !important;
    line-height: 1.06 !important;
  }

  /* ---------- programme directions ---------- */

  .dir{ width: 100% !important; }

  /* Each row becomes picture-then-copy, the alternation dropped: at one
     column a left/right swap reads as a mistake rather than a rhythm. */
  .dir__row{
    display: flex !important;
    flex-direction: column;
    gap: 1.6rem;
    padding: 3.2rem 0;
    border-top: 1px solid var(--line);
  }
  .dir__row:first-child{ border-top: 0; }

  .dir__img{
    order: -1;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1109 / 613;
  }
  .dir__n::after{ display: none; }   /* the hairline needs the wide column */

  .dir__name{
    white-space: normal !important;
    font-size: 4.2rem !important;
    line-height: 1.05 !important;
  }
  .dir__sub{ font-size: 1.7rem !important; line-height: 1.35 !important; }
  .dir__body{ line-height: 2.5rem !important; }

  /* ---------- submission categories ---------- */

  .fmt{
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    border: 0 !important;
    background: none !important;
    gap: .8rem;
  }
  .fmt__card{
    border-left: 0 !important;
    border: 1px solid var(--line);
    padding: 3.6rem 2.4rem 3rem !important;
  }
  .fmt__card--main{ padding-top: 4.4rem !important; }
  .fmt__tag{ left: 2.4rem !important; }
  .fmt__name{ font-size: 3.2rem !important; }
  .fmt__card--micro .fmt__k--2{ margin-top: 4.2rem !important; }

  .s-sub__fn{ font-size: 1.3rem !important; line-height: 2.2rem !important; }

  /* ---------- cta ---------- */

  .s-cta{ padding-top: 7rem; padding-bottom: 7rem; }
  .s-cta__bg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 0 !important;
  }
  .s-cta__lbl,
  .s-cta__h2,
  .s-cta__btn{ text-align: left !important; }
  .s-cta__h2{ font-size: 4rem !important; line-height: 1.15 !important; }
}

@media (max-width: 767px){

  .cat-hero__title{ font-size: 4.4rem !important; }
  .s-dir__h2,
  .s-sub__h2,
  .s-open__h2{ font-size: 3.8rem !important; }
  .dir__name{ font-size: 3.2rem !important; }
  .fmt__name{ font-size: 2.8rem !important; }
  .s-cta__h2{ font-size: 3rem !important; }
}