/*
 * SparkLAB Junior: phone landscape approval band.
 * Deliberately isolated from portrait, tablet landscape, and desktop layouts.
 */
@media (orientation: landscape) and (min-width: 601px) and (max-width: 950px) and (max-height: 500px) {
  .spark-page-root > [data-loader] {
    z-index: 5000 !important;
  }
}

/* Phone landscape: Boundlearn and SparkLab always occupy separate full-width rows. */
@media (orientation: landscape) and (min-width: 601px) and (max-width: 950px) and (max-height: 500px) {
  .spark-page-root .spark-boundlearn-bar {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }

  .spark-page-root .spark-program-nav {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }

  .spark-page-root .spark-program-nav-inner {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (orientation: landscape) and (min-width: 761px) and (max-width: 950px) and (max-height: 500px) {
  .spark-page-root {
    overflow-x: clip;
  }

  /* Keep both navigation layers compact without changing their information architecture. */
  .spark-boundlearn-bar {
    min-height: 44px !important;
    padding: 5px 18px !important;
  }

  .spark-boundlearn-bar > a img {
    height: 17px !important;
  }

  .spark-boundlearn-bar .bl-burger {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
  }

  .spark-program-nav-inner {
    min-height: 50px !important;
    padding: 6px 18px !important;
  }

  .spark-brand-logo {
    height: 30px !important;
  }

  .spark-program-menu > summary {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  #bl-mnav {
    top: calc(100% + 4px) !important;
    right: 12px !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-height: calc(100svh - 54px) !important;
    padding: 8px 16px 12px !important;
    border-radius: 0 0 12px 12px !important;
    overscroll-behavior: contain;
  }

  #bl-mnav > a,
  #bl-mnav > details > summary {
    min-height: 36px !important;
    padding: 7px 3px !important;
    font-size: 14px !important;
  }

  #bl-mnav > details a {
    min-height: 30px !important;
    padding: 5px 4px 5px 12px !important;
    font-size: 12px !important;
  }

  #bl-mnav .bl-mobile-language {
    min-height: 34px !important;
    margin-top: 5px !important;
  }

  #bl-mnav .bl-mobile-apply {
    min-height: 38px !important;
    margin-top: 7px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .spark-program-menu-panel {
    top: calc(100% + 5px) !important;
    right: 0 !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 0 14px !important;
    padding: 10px 14px 12px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    overscroll-behavior: contain;
  }

  .spark-menu-brand {
    grid-column: 1 / -1 !important;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 0 4px !important;
    padding: 2px 8px 6px !important;
    border-bottom: 1px solid var(--line);
  }

  .spark-menu-brand img {
    width: auto;
    height: 28px;
    object-fit: contain;
  }

  .spark-program-menu-panel > a:not(.spark-menu-apply) {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--navy) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .spark-program-menu-panel > a:not(.spark-menu-brand):last-of-type {
    grid-column: 1 / -1 !important;
  }

  .spark-program-menu-panel .spark-menu-actions {
    grid-column: 1 / -1 !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .spark-program-menu-panel .spark-menu-apply,
  .spark-program-menu-panel .spark-menu-contact {
    min-height: 40px !important;
    margin-top: 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .spark-program-menu-panel .spark-menu-actions > a:first-child {
    border: 1px solid var(--navy) !important;
    background: var(--navy) !important;
    color: #fff !important;
  }

  /* Baloo's glyph bounds need more line box than the tablet rules provide. */
  .spark-page-root h1,
  .spark-page-root h2 {
    overflow: visible;
    padding-block: .18em;
    line-height: 1.14 !important;
  }

  .spark-page-root h2 {
    padding-block: .24em;
  }

  /* The complete opening story fits between the two headers and the viewport edge. */
  .spark-hero {
    min-height: calc(100svh - 94px);
  }

  html body .spark-page-root #top > .spark-hero-inner {
    min-height: calc(100svh - 94px) !important;
    grid-template-columns: minmax(0, 1.42fr) minmax(240px, .78fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 18px 10px !important;
  }

  .spark-hero-copy {
    min-width: 0;
  }

  .spark-hero-logo {
    display: none !important;
  }

  html body .spark-page-root #top .spark-hero-title {
    max-width: 12.5em;
    font-size: clamp(27px, 3.35vw, 31px) !important;
    line-height: 1.04 !important;
    text-wrap: balance;
  }

  html body .spark-page-root #top .spark-hero-text {
    max-width: 43em !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.34 !important;
  }

  html body .spark-page-root #top .spark-hero-actions {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .spark-hero-actions a {
    min-height: 36px;
    padding: 8px 15px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  html body .spark-page-root #top .spark-hero-stats {
    gap: 12px !important;
    margin-top: 8px !important;
  }

  .spark-hero-stats > div:nth-child(odd) {
    min-width: 58px;
  }

  .spark-hero-stats > div:nth-child(odd) > div:first-child {
    font-size: 23px !important;
  }

  .spark-hero-stats > div:nth-child(odd) > div:last-child {
    margin-top: 1px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  html body .spark-page-root #top .spark-hero-art[data-rv] {
    height: 274px !important;
    min-height: 0;
    display: flex !important;
    transform: none !important;
  }

  .spark-hero-art > div:nth-child(1) {
    width: 250px !important;
    height: 250px !important;
  }

  .spark-hero-art > div:nth-child(2) {
    width: 194px !important;
    height: 194px !important;
  }

  .spark-hero-art > div:nth-child(3) {
    width: 158px !important;
    height: 158px !important;
    padding: 9px !important;
    border-width: 4px !important;
  }

  .spark-hero-art > div:nth-child(3) svg {
    width: 118px !important;
    height: auto !important;
  }

  .spark-hero-art [data-par] {
    transform: scale(.78);
  }

  .spark-hero-divider {
    display: none;
  }

  .spark-hero-marquee {
    padding: 12px 0 !important;
  }

  /* Short-height rhythm: retain content, remove desktop-sized transition bands. */
  .spark-about,
  .spark-skills,
  .spark-curriculum,
  .spark-alignment,
  .spark-calendar,
  .spark-schedule,
  .spark-pricing,
  .spark-instructors,
  .spark-testimonials,
  .spark-faq {
    padding: 46px 0 !important;
  }

  .spark-about-inner {
    gap: 24px !important;
  }

  .spark-skills-heading,
  .spark-curriculum-heading,
  .spark-alignment-heading,
  .spark-calendar-heading,
  .spark-schedule-heading,
  .spark-instructor-head,
  .spark-testimonials-heading {
    padding-top: 3px;
  }

  .spark-skills-heading h2,
  .spark-curriculum-heading h2,
  .spark-alignment-heading h2,
  .spark-calendar-heading h2,
  .spark-schedule-heading h2,
  .spark-pricing-layout h2,
  .spark-instructor-head h2,
  .spark-testimonials-heading h2,
  .spark-faq h2 {
    font-size: clamp(28px, 3.35vw, 36px) !important;
    line-height: 1.13 !important;
  }

  .spark-skills-viewport {
    margin-top: 24px !important;
    padding-bottom: 8px !important;
  }

  .spark-skills-track > [data-panel] {
    width: min(340px, 45vw) !important;
    height: 300px !important;
    padding: 22px !important;
  }

  .spark-skills-track h3 {
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  .spark-skills-track p {
    font-size: 13.5px !important;
    line-height: 1.42 !important;
  }

  .spark-curriculum-heading {
    gap: 12px !important;
  }

  .spark-curriculum-grid {
    display: flex !important;
    width: calc(100% + 48px);
    gap: 12px !important;
    margin: 24px -24px 0 !important;
    padding: 0 24px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .spark-curriculum-grid::-webkit-scrollbar {
    display: none;
  }

  .spark-curriculum-grid > div {
    width: min(330px, 48vw);
    min-height: 214px !important;
    flex: 0 0 auto;
    grid-column: auto !important;
    padding: 20px !important;
    scroll-snap-align: start;
  }

  .spark-curriculum-grid h3 {
    font-size: 23px !important;
    line-height: 1.08 !important;
  }

  .spark-curriculum-dots {
    display: flex !important;
    margin-top: 4px !important;
  }

  .spark-alignment-grid,
  .spark-schedule-grid {
    margin-top: 26px !important;
  }

  .spark-calendar .spark-calendar-week:first-of-type {
    margin-top: 26px !important;
  }

  .spark-calendar .spark-calendar-week {
    margin-top: 12px !important;
  }

  .spark-calendar-week > div:not(:first-child) {
    min-height: 132px !important;
  }

  .spark-pricing-layout {
    gap: 28px !important;
  }

  .spark-pricing-layout > div:first-child > div:last-child {
    margin-top: 20px !important;
  }

  .spark-price-card {
    padding: 25px !important;
  }

  .spark-instructors .spark-instructor-layout {
    gap: 32px !important;
    margin-top: 28px !important;
  }

  .spark-meet-spark {
    padding: 46px 0 !important;
  }

  .spark-meet-spark-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    gap: 26px;
  }

  .spark-meet-spark-title {
    font-size: 38px !important;
    line-height: 1.12 !important;
  }

  .spark-meet-spark-body {
    margin-top: 14px;
  }

  .spark-meet-spark-body p {
    font-size: 14px;
    line-height: 1.48;
  }

  .spark-meet-spark-body p + p {
    margin-top: 8px;
  }

  .spark-meet-spark-points {
    gap: 7px;
    margin-top: 16px;
  }

  .spark-meet-spark-point {
    font-size: 13px;
    line-height: 1.35;
  }

  .spark-meet-spark-visual {
    min-height: 330px;
  }

  .spark-meet-spark-image {
    width: min(78%, 230px);
    max-height: 330px;
  }

  .spark-testimonials .spark-testimonials-track {
    margin-top: 26px !important;
  }

  .spark-testimonial-card {
    min-height: 280px !important;
    padding: 22px !important;
  }

  .spark-faq-list {
    margin-top: 26px !important;
  }

  .spark-enroll {
    padding: 44px 0 !important;
  }

  /* Match the compact CFI About composition: brand at left, three link columns. */
  .spark-footer {
    padding: 30px 24px 20px !important;
  }

  .spark-footer-grid {
    grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
    padding-bottom: 20px !important;
  }

  .spark-footer-grid > div:first-child {
    grid-column: auto !important;
    text-align: left !important;
  }

  .spark-footer-grid > div:first-child > img {
    display: block !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .spark-footer-grid > div:first-child p {
    max-width: 250px !important;
    margin: 10px 0 0 !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .spark-footer-grid > div:first-child > div {
    justify-content: flex-start !important;
    margin-top: 12px !important;
  }

  .spark-footer-grid > div:first-child a {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  .spark-footer-grid > div:not(:first-child) > div:first-child {
    margin-bottom: 8px !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;
  }

  .spark-footer-grid > div:not(:first-child) > div:last-child {
    gap: 5px !important;
  }

  .spark-footer-grid > div:not(:first-child) a {
    min-height: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  .spark-footer-meta {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-top: 16px !important;
    text-align: left !important;
  }

  .spark-footer-meta span {
    font-size: 10px !important;
  }
}

/* Keep SparkLab's Baloo navigation voice while using the compact landscape grid. */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .spark-program-menu-panel > a:not(.spark-menu-brand):not(.spark-menu-apply):not(.spark-menu-contact) {
    font-family: "Baloo 2", system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  .spark-program-menu-panel .spark-menu-apply,
  .spark-program-menu-panel .spark-menu-contact {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .spark-footer-grid [data-bl-footer-copy] {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  .spark-footer-grid > :not(:first-child) > :first-child {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  .spark-footer-grid > :not(:first-child) > :last-child a {
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  html[lang="tr"] body .spark-program-menu-panel > a[href="#program"]:not(.spark-menu-brand):not(.spark-menu-apply):not(.spark-menu-contact) {
    font-size: 16px !important;
    white-space: nowrap !important;
  }
}