/**
 * Mockup static HTML only — mobile layout (below Tailwind `md` / 48rem).
 * No color or font-family changes; spacing and overflow only.
 */
@media (max-width: 47.9375rem) {
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
  }

  /* Long URLs / legal copy (not table cells — see .pj-faq-table below) */
  main p,
  main li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Media */
  main iframe,
  main embed,
  main object {
    max-width: 100%;
  }

  /* Policy / legal cards (inline styles use large desktop padding) */
  .pj-policy-shell {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .pj-policy-card {
    padding: 1.75rem 1.125rem;
    border-radius: 1.25rem;
  }

  .pj-policy-section + .pj-policy-section {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }

  .pj-policy-callout {
    padding: 1.25rem 1.125rem;
  }

  /* Sticky header: more usable tap targets without changing theme */
  header.fixed nav.mx-auto {
    padding-left: 1rem;
    padding-right: 1rem;
    column-gap: 0.5rem;
  }

  header.fixed nav > a.flex {
    min-width: 0;
  }

  header.fixed nav > a.flex span {
    overflow-wrap: anywhere;
  }

  /* Registration stepper bar */
  nav[aria-label="Registration steps"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  nav[aria-label="Registration steps"] ol {
    column-gap: 0.75rem;
    row-gap: 0.5rem;
  }

  /* Registration mockup: main form panel under stepper */
  main .overflow-hidden.rounded-4xl nav[aria-label="Registration steps"] + div.p-8 {
    padding: 1.25rem;
  }

  /* Footer social icon row: w-max can exceed viewport */
  footer .grid.w-max {
    width: 100%;
    max-width: 100%;
    justify-content: start;
  }

  /*
   * Wide tables: keep `display: table` so column layout + min-width work; scroll on the wrapper.
   * (display:block on <table> breaks the column grid and caused crushed FAQ pricing tables.)
   */
  main .overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  main table.pj-faq-table {
    display: table;
    width: auto;
    max-width: none;
  }

  .pj-faq-table th,
  .pj-faq-table td {
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }

  .pj-faq-shell {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .pj-faq-card {
    padding: 1.25rem 1.125rem;
  }

  .pj-faq-card summary h3 {
    min-width: 0;
  }

  /* IoT camp: “Real Outcomes” hero row — stack icon above copy on narrow screens */
  .pj-camp-split-highlight {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  .pj-camp-split-highlight > div {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .pj-camp-split-highlight img.shrink-0 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Python Programming: “A Real Programming Language” — stack logo above copy */
  .pj-python-intro-card {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .pj-python-intro-card .pj-python-intro-copy {
    text-align: center;
    width: 100%;
  }

  .pj-python-intro-card .pj-python-intro-logo {
    margin-left: auto;
    margin-right: auto;
  }

  /* Landing: “Schools Teach” / “We Teach” — stack; inline flex fought narrow screens */
  .pj-why-compare-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }

  .pj-why-compare-row > div {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Landing: “2 Weeks” + date pills — column */
  .pj-camp-meta-pills {
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    row-gap: 0.5rem;
    column-gap: 0 !important;
  }

  /* PiCar: flagship badge above duration / date */
  .pj-camp-top-badges {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  /* Programs grid: clearer separation between stacked camp cards */
  #programs .pj-programs-grid {
    gap: 2rem !important;
  }
}

/*
 * Landing hero: full-bleed photo scaled down from a large raster master (public/Hero_Image.jpg).
 * Tailwind preflight sets img { max-width: 100%; height: auto }, which can fight
 * absolute + object-cover and yield soft or chunky scaling — pin explicit replaced-element sizing.
 */
.pj-landing-hero-image {
  max-width: none;
  height: 100%;
  width: 100%;
}

/* Prefer higher-quality downscaling where supported (large masters → viewport). */
@supports (image-rendering: high-quality) {
  .pj-landing-hero-image {
    image-rendering: high-quality;
  }
}