/* ============================================
   WAB OS — Création de site internet : exemples et inclus
   Exemples : quatre vrais sites, chacun dans sa fenêtre, nom et phrase
   dessous ; deux colonnes dès 760 px.
   Inclus : six fiches blanches au rayon des panneaux, liseré et
   relief, une touche de clavier en tête ; trois colonnes sur ordinateur.
   ============================================ */

/* ── Exemples ── */
.sx-examples {
    display: grid;
    gap: clamp(28px, 4vw, 44px) var(--sx-gap);
}

.sx-example {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.sx-example .win {
    transition: box-shadow 0.25s var(--ease-out), translate 0.25s var(--ease-out);
}

.sx-example .win__body {
    aspect-ratio: 16 / 10;
}

.sx-example__body {
    padding-inline: 4px;
}

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

.sx-example__desc {
    margin-top: 6px;
    max-width: 52ch;
    color: var(--ink-muted);
    text-wrap: pretty;
}

@media (hover: hover) {
    .sx-example:hover .win {
        translate: 0 -3px;
        box-shadow: 0 0 0 1px var(--win-edge), var(--win-shadow-lift);
    }

    .sx-example:hover .sx-example__name {
        color: var(--klein-text);
    }
}

@media (min-width: 760px) {
    .sx-examples {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Inclus ── */
.sx-cards {
    display: grid;
    gap: var(--sx-gap);
}

.sx-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(22px, 2.4vw, 28px);
    border-radius: var(--r-panel);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--shadow-soft);
}

/* L'icône : une touche de clavier blanche, le pictogramme dans la teinte
   de la fiche (data-tint ; l'aplat plein reste à l'action principale). */
.sx-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: var(--r-key);
    background: var(--key-light);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--key-light-relief);
    color: var(--klein-text);
}

.sx-icon svg {
    width: 22px;
    height: 22px;
}

.sx-card__name {
    font-size: var(--sx-h3);
    font-weight: var(--w-medium);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.sx-card__text {
    color: var(--ink-muted);
    text-wrap: pretty;
}

@media (min-width: 700px) {
    .sx-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .sx-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}