/* Mobile experience overrides for the main shell and both courses. */

@media (max-width: 767px) {
/* `clip`, never `hidden`: `hidden` here turns the root into a scroll container
   and the sticky header stops sticking — it scrolls off with the page. */
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 1rem;
    max-width: 100%;
    overflow-x: clip;
  }

body {
    min-height: 100dvh;
    max-width: 100%;
    overflow-x: clip;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

main,
section,
.view-panel,
.container,
.python-lesson-card {
    min-width: 0;
    max-width: 100%;
  }

img,
video,
svg,
iframe {
    max-width: 100%;
  }

button,
a,
select,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

.container {
    padding-inline: 0.75rem;
  }

.python-lessons-grid {
    gap: 1rem;
  }

.python-lesson-card {
    border-width: 2.5px;
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--shadow-color) 24%, transparent);
  }

.section-title-wrapper {
    margin-bottom: 1.5rem;
  }

.section-title-comic {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    line-height: 1.35;
    text-wrap: balance;
  }

.home-view,
.subject-view {
    padding-bottom: 3.5rem;
  }

/* The card is one column of rows now — a poster with an inked foot — and the
     old two-column rule here was still splitting it into a tile and a body,
   which on a phone squeezed the text into a strip one word wide. */
.python-lesson-body {
    min-height: 0;
    padding: 1.1rem 1rem 1.25rem;
    gap: 0.5rem;
  }

.python-lesson-body strong {
    line-height: 1.3;
  }

.python-lesson-body small {
    max-width: none;
    font-size: 0.84rem;
    line-height: 1.7;
  }

.python-lesson-glyph {
    font-size: 7.5rem;
    opacity: 0.16;
  }

.python-lesson-card:nth-child(even) .python-lesson-glyph {
    opacity: 0.26;
  }

.python-lesson-action {
    min-height: 46px;
    padding-inline: 1rem;
    font-size: 0.88rem;
  }

.python-lesson-view {
    padding: 0;
  }

.python-lesson-view > .container {
    width: 100%;
    max-width: none;
    padding: 0.35rem;
  }

/* The row stays on phones. It used to be hidden here, which left the reader
     with no visible way back at all — the shell header is hidden too, so the
     only exit was the edge tab. The long title is what goes instead: the badge
     alone is enough to say which lesson this is. */
.python-lesson-page-header {
    padding: 0.2rem 0.15rem;
    gap: var(--spacing-sm);
  }

.python-lesson-page-title h2 {
    display: none;
  }

.python-lesson-frame-shell {
    min-height: 0;
    border-width: 2px;
    border-radius: var(--radius-md);
    box-shadow: none;
  }

.main-footer {
    /* Only the top margin is answered here. The inset around the plate is the
       footer's own padding now and must survive — zeroing the whole shorthand
       took the metal off three sides of the recess. */
    margin-top: 0;
    padding-block-end: calc(var(--plate-overhang) + env(safe-area-inset-bottom, 0px));
  }

.footer-credits {
    font-size: 0.82rem;
  }
}

@media (max-width: 600px) {
/* The gap that keeps the bar off the phone's edges comes from the rail around
     it, not from padding inside it — and on a phone that gap only exists once
     the bar has arrived, so the inline half of it is the thing that animates.
     The block half, notch inset and all, is constant: the rail's height must
     not change while it is stuck. One rule, not two — a second `.main-header`
     block here would drop the safe-area inset and let the bar ride under a
     notch. */
/* On the root, not on the header: the hero reads --header-h to pull itself up
   under the rail, and it is not inside the rail — a custom property set on the
   header would only ever reach the header's own children. */
:root {
    --header-pad-bottom: 8px;
  }

/* The row, the wordmark and the actions strip that were tuned here are gone:
     the island is one object and it does its own phone layout, in
     css/island.css, where it also leaves the top of the screen for the bottom
     of it. */
}

@media (hover: none) and (pointer: coarse) {
.python-lesson-card:hover {
    transform: none;
  }
}