/* "Speaks your language" slide — a deliberate dark slide so the light chips pop
   (dark slides are a tool, not a theme; see my-startups/playbooks/Landing-pages.md).
   Font sizes are explicit throughout because of the `* { font-size: 16px }` rule
   in style.css — a universal selector beats inheritance. */

/* Background: a notebook lettered HALLO / BONJOUR / HOLA (Pexels, ann-h) — the photo
   says what the slide says. The source was trimmed only at the top: the notebook and
   all three greetings have to stay in frame, they are the whole point.
   Two layers, a dark scrim over the photo, so the white heading and the chip links —
   which are real navigation — stay readable. `background-color` is the photo's own
   paper orange, so the bands that `contain` leaves at the sides are invisible. */
.languagesSlide {
    background-color: #b74007;
    background-image:
        linear-gradient(rgba(20, 24, 29, 0.82), rgba(20, 24, 29, 0.82)),
        url("/img/backgrounds/languages.jpg");
    background-position: center;
    background-repeat: no-repeat;
    /* A phone's viewport is portrait like the photo, so `cover` fills it without losing
       any of the words. Anything wider would crop the top and bottom greetings away, so
       there the image is `contain`ed and the orange fills the rest.
       ⚠️ `!important` is required, not sloppiness: `.slide` in style.css declares
       `background-size: cover !important`, which otherwise wins over this file. */
    background-size: 100% 100%, cover !important;
    color: white;
    text-align: center;

    @media (min-aspect-ratio: 4 / 5) {
        background-size: 100% 100%, contain !important;
    }

    /* Wide screens: two columns — text on the left, the notebook on the right — and no
       scrim, because nothing is written over the photo any more. The text then sits on
       the flat paper orange, which carries white at 5.6:1 (comfortably past AA).
       Gated on a genuinely wide viewport: `contain` sizes the photo from the slide's
       height (0.805 × 98vh ≈ 79vh wide), so on a squarer screen it would eat the room
       the text column needs. */
    @media (min-width: 1000px) and (min-aspect-ratio: 16 / 10) {
        /* Photo on the right, over a fill that mimics its own left edge. The paper is
           lit unevenly down that edge (#ba4207 top, #a3390a middle, #d25511 bottom), so
           a single flat colour would leave a visible seam where the image begins. */
        background-image:
            url("/img/backgrounds/languages.jpg"),
            linear-gradient(to bottom, #ba4207 0%, #a3390a 50%, #d25511 100%);
        background-position: right center, center;
        background-size: contain, 100% 100% !important;
        align-items: flex-start;
        padding-left: 5%;
        text-align: left;
    }
}

.languagesTextBox {
    margin: 0 auto;
    max-width: 900px;
    padding: 0 20px;
}

/* Sized in em so it tracks the heading at every breakpoint, and nudged onto the
   baseline so it reads as the first glyph of the line rather than a pasted-on icon.
   `font-size: inherit` is load-bearing: style.css declares `* { font-size: 16px }`,
   and a universal selector beats inheritance, so 1em would otherwise resolve to 16px. */
.languagesGlobe {
    font-size: inherit;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.25em;
    vertical-align: -0.08em;
    opacity: 0.85;
}

.languagesTitle {
    font-size: 64px;
    margin: 20px 0;

    @media (max-width: 999px) {
        font-size: 40px;
    }
}

.languagesBody {
    /* Explicit white: style.css declares `p { color: black }`, and an element selector
       beats the white inherited from .languagesSlide — without this the line renders
       black on the dark slide. */
    color: white;
    font-size: 24px;
    opacity: 0.8;

    @media (max-width: 999px) {
        font-size: 18px;
    }
}

.languagesChips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 50px auto 0;
    max-width: 800px;
    padding: 0 20px;
}

.languagesChips .languageChip {
    font-size: 20px;
    color: white;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 10px 22px;
    transition: border-color 200ms, background 200ms;
}

.languagesChips .languageChip:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
}

.languagesChips .languageChipActive {
    background: white;
    color: #14181d;
    border-color: white;
}

/* The left column on wide screens. Its width is whatever is left once the photo has
   taken its ~79vh on the right, so the gutter grows with the screen instead of being
   guessed at. ⚠️ Must stay at the END of this file: the .languagesTextBox /
   .languagesChips rules above have the same specificity, so an earlier media block
   would lose to them. */
@media (min-width: 1000px) and (min-aspect-ratio: 16 / 10) {
    .languagesTextBox,
    .languagesChips {
        margin-left: 0;
        margin-right: 0;
        max-width: calc(90% - 79vh);
        padding-left: 0;
    }

    .languagesChips {
        justify-content: flex-start;
    }
}