/* ==========================================================================
   MOBILE PREMIUM — dedicated mobile layout (not compressed desktop)
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --header-h: 80px;
    --m-pad: 20px;
    --m-gap: 24px;
  }

  .header {
    height: var(--header-h) !important;
  }

  .header__inner {
    min-height: var(--header-h) !important;
    height: var(--header-h) !important;
  }

  .container {
    padding-inline: var(--m-pad) !important;
  }

  /* ---- HERO MOBILE ---- */
  .hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: var(--header-h) !important;
    padding-bottom: var(--m-gap) !important;
    overflow: hidden !important;
    background: #050505 !important;
  }

  .hero__cinema {
    display: none !important;
  }

  .hero > .container.hero__inner {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: var(--m-gap) !important;
    padding-block: 0 var(--m-gap) !important;
    overflow: visible !important;
  }

  .hero__content {
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .hero__scene.hero-visual,
  .hero-visual {
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 55vh !important;
    min-height: 55vh !important;
    max-height: 55vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: transparent !important;
    pointer-events: none;
  }

  .hero__atmo {
    inset: 0 !important;
  }

  .hero-trainer,
  .trainer-photo--hero {
    height: 92% !important;
    max-height: 92% !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  .hero .eyebrow {
    font-size: 0.62rem !important;
    margin-bottom: 0.45rem !important;
  }

  .hero__title {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
    line-height: 0.92 !important;
    margin-bottom: 0.6rem !important;
  }

  .hero__subtitle {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  .hero__actions {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.85rem !important;
  }

  .hero__actions .btn--primary.btn--lg {
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 0.72rem !important;
  }

  .hero__features {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
  }

  .hero__features li {
    font-size: 0.72rem !important;
  }

  /* ---- ABOUT MOBILE ---- */
  .about.section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-block: var(--m-gap) !important;
    overflow: visible !important;
  }

  .about.section > .container.about__inner {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .about__inner {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: var(--m-gap) !important;
    align-items: stretch !important;
  }

  .about__visual {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .about__portrait-card {
    width: 100% !important;
    max-width: 100% !important;
    height: min(480px, 52vh) !important;
    max-height: min(480px, 52vh) !important;
    min-height: 420px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    padding: 0.15rem !important;
  }

  .about__portrait-frame {
    align-items: flex-end !important;
  }

  .trainer-photo--about {
    height: 88% !important;
    max-height: 88% !important;
    max-width: 118% !important;
    width: auto !important;
    object-position: center bottom !important;
  }

  .about__content {
    order: 2 !important;
    border: none !important;
    text-align: center !important;
    align-items: center !important;
    padding-inline: 0 !important;
  }

  .about .section__title--left {
    font-size: clamp(1.65rem, 7vw, 2rem) !important;
    text-align: center !important;
    margin-bottom: 0.45rem !important;
  }

  .about__text {
    font-size: 0.88rem !important;
    margin-bottom: 0.65rem !important;
  }

  .about__highlights {
    margin-bottom: 0.75rem !important;
    text-align: left;
    width: 100%;
  }

  .about__content .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    align-self: stretch !important;
    margin-bottom: 0 !important;
  }

  .about__certs {
    order: 3 !important;
    width: 100% !important;
    gap: var(--m-gap) !important;
    margin-top: 0 !important;
  }

  .about__certs .edu-card {
    border-radius: 16px !important;
  }

  .about__certs .eyebrow {
    text-align: left;
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  .hero__scene.hero-visual,
  .hero-visual {
    height: 55vh !important;
    min-height: 55vh !important;
    max-height: 55vh !important;
  }

  .about__portrait-card {
    min-height: 380px !important;
    height: min(440px, 48vh) !important;
    max-height: min(440px, 48vh) !important;
  }
}