/* ============================================
   WAB OS — Création de site internet : le studio et la refonte
   Le studio : le texte à gauche, les communes en petites touches à
   droite (c'est le texte local que Google lit : de vrais <li>), dans
   un panneau gris chaud sur sa feuille décalée.
   La refonte : une carte de section (.os-card).
   ============================================ */

/* ── Le studio ── */
.sx-studio {
    display: grid;
    gap: clamp(36px, 5vw, 56px);
}

.sx-studio__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.sx-copy {
    display: grid;
    gap: 16px;
    max-width: var(--sx-measure-text);
    margin-top: 6px;
    color: var(--ink-muted);
    text-wrap: pretty;
}

.sx-copy__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.sx-copy__links .sx-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.sx-cities__title {
    font-size: var(--sx-h3);
    font-weight: var(--w-medium);
    letter-spacing: -0.02em;
}

.sx-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.sx-cities li {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--r-key);
    background: var(--key-light);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--key-light-relief);
    color: var(--glass-ink);
}

/* Le studio est à Lausanne : la première touche prend la teinte de la section. */
.sx-cities li:first-child {
    background: var(--key-klein);
    box-shadow: 0 0 0 var(--hair) var(--key-klein-edge), var(--key-klein-relief);
    color: var(--on-klein);
}

.sx-cities__note {
    margin-top: 18px;
    max-width: 48ch;
    color: var(--ink-muted);
    text-wrap: pretty;
}

@media (min-width: 960px) {
    .sx-studio {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }

    .sx-cities-wrap {
        padding: 32px;
        margin-top: 44px;
        border-radius: var(--r-panel);
        background: var(--panel);
        box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--sheet);
    }
}

/* ── La refonte, dans une carte de section (.os-card) ── */
.sx-sky {
    margin-top: var(--section);
}

.sx-sky__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.sx-sky__title {
    max-width: 24ch;
    font-size: var(--t-title);
    font-weight: var(--w-medium);
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.sx-sky__text {
    max-width: 56ch;
    margin-bottom: 8px;
    font-size: var(--t-lede);
    line-height: 1.5;
    text-wrap: pretty;
}