/* =====================================================================
   LESSON: picture-and-title header, rainbow line, cards, word tables, speaker buttons. Used by lesson pages.
   ===================================================================== */

/* ---- Hero: illustration + title ---- */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);   /* first value = illustration width */
    align-items: end;
    gap: clamp(12px, 3vw, 28px);
}

.hero__img { margin-bottom: -6px; }          /* tucks the figures behind the strip */

.hero__text { align-self: center; }

.hero__title {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.hero__title span { display: block; color: var(--purple); }

.hero__sub { margin-top: 12px; font-weight: 700; font-size: 1.1rem; }

.hero__meta {                           /* "Pronunciation lesson" + level badge on one line */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: .95rem;
    color: var(--muted);
}

/* level box (A1–A2…) after the subtitle: styles in /css/lesson-level.css */
@media (max-width: 640px) {
    .hero { grid-template-columns: 1fr; gap: 10px; }
    .hero__text { align-self: start; }
    .hero__img { order: 2; }
    .hero__title span { display: inline; }
}

/* ---- This page: header picture ----
   The picture sits in a frame the same shape as the pronunciation page's picture
   (1100 x 730), so the header is the same height and the title lines up the same
   on every page, whatever the shape of the picture.
   To make the man smaller inside the frame, increase padding-top (e.g. 40px). */
.lesson .hero__img {
    width: 100%;
    aspect-ratio: 1100 / 730;
    height: auto;
    object-fit: contain;                 /* whole picture visible, never stretched */
    object-position: left bottom;        /* against the left edge, standing on the rainbow line */
    padding-top: 0;                      /* space above the man inside the frame */
    box-sizing: border-box;
}

.strip { position: relative; height: 8px; border-radius: 99px; background: var(--gradient); }

.intro { margin-block: 18px 22px; }

/* ---- Cards (word tables and practice boxes share one component) ---- */
.card {
    --accent: var(--blue);
    --tint:   var(--blue-tint);
    background: var(--tint);
    border-radius: var(--radius);
    overflow: clip;
    margin-bottom: 18px;
}

.card--coral  { --accent: var(--coral);  --tint: var(--coral-tint); }

.card--blue   { --accent: var(--blue);   --tint: var(--blue-tint); }

.card--purple { --accent: var(--purple); --tint: var(--purple-tint); }

.card--teal   { --accent: var(--teal);   --tint: var(--teal-tint); }

.card__head {
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 10px 16px;
}

.card__head small { font-weight: 400; font-size: .82rem; opacity: .85; margin-left: 8px; }

.card__body { padding: 14px 16px 16px; }

/* ---- Word tables (real data, so they stay <table>) ---- */
.words { width: 100%; border-collapse: collapse; }

.words :is(th, td) { padding: 7px 12px 7px 16px; text-align: left; vertical-align: middle; }

.words thead th {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); padding-block: 10px 6px;
}

.words tbody tr { border-top: 1.5px solid #fff; }

.words tbody th { font-weight: 700; white-space: nowrap; }

.words .sounds { color: var(--accent); font-weight: 700; }

.words .ipa { color: var(--muted); }

/* On narrow screens each row becomes a small stacked block — no sideways scrolling */
@media (max-width: 640px) {
    .words thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .words, .words tbody, .words tr, .words th, .words td { display: block; }
    .words tbody tr { padding: 10px 14px; border-top-width: 2px; }
    .words tbody :is(th, td) { padding: 2px 0; }
    .words tbody th { font-size: 1.05rem; margin-bottom: 4px; }
    .words tbody td { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; }
    .words tbody td::before {
        content: attr(data-label);
        font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        color: var(--muted); padding-top: .2em;
    }
}

/* ---- Speaker buttons ---- */
.say {
    display: inline-grid; place-items: center; flex: none;
    width: 28px; height: 28px; margin-right: 10px; padding: 0;
    border: 0; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / .15);
    font-size: 13px; cursor: pointer; vertical-align: middle;
    transition: transform .15s ease;
}

.say:hover { transform: scale(1.1); }

.say:focus-visible { outline: 2px solid var(--accent, var(--purple)); outline-offset: 2px; }

.say.is-speaking { background: var(--accent, var(--purple)); }

/* phones: the grey note in a card heading drops onto its own line */
@media (max-width: 640px) {
    .card__head small { display: block; margin: 4px 0 0; }
}