/* L'encadrement — respiration ivoire après le champ anthracite du Wado-Ryu.
   Composition éditoriale asymétrique : le récit à gauche sur l'ivoire, la
   silhouette à droite dans un panneau sombre qui rejoint le bord du viewport.
   Le panneau n'est pas une carte : il n'a ni rayon, ni bordure, ni ombre, et il
   traverse toute la hauteur de la section. */
.ck-home .ck-sensei,
.ck-home .ck-sensei * { box-sizing: border-box; }

.ck-home .ck-sensei {
    --ck-sensei-panel: #101112;
    --ck-sensei-rule: #D7D2C6;
    position: relative;
    background: var(--ck-ivory);
    color: var(--ck-black);
    scroll-margin-top: calc(var(--ck-header-height) + var(--ck-admin-offset) + 1rem);
    /* Garde-fou : le panneau déborde à droite sur desktop. */
    overflow-x: clip;
}
.ck-home .ck-sensei__inner { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.ck-home .ck-sensei__text { padding-block: clamp(3rem, 8vw, 6rem) 0; }

.ck-home .ck-sensei__eyebrow {
    margin: 0 0 1rem;
    color: var(--ck-text-dark-secondary);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ck-home .ck-sensei__title {
    max-width: 18ch;
    margin: 0 0 clamp(1.5rem, 4vw, 2rem);
    color: var(--ck-black);
    font: 800 clamp(1.875rem, 7.5vw, 2.5rem)/1.1 'Archivo', Arial, sans-serif;
    letter-spacing: -.015em;
}
.ck-home .ck-sensei__lead {
    max-width: 34rem;
    margin: 0;
    color: var(--ck-black);
    font: 400 clamp(1.125rem, 4vw, 1.25rem)/1.55 'Chivo', Arial, sans-serif;
}
.ck-home .ck-sensei__source {
    margin: 1rem 0 0;
    color: var(--ck-text-dark-secondary);
    font: 600 .8125rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Nom et grade : deux lignes sobres. Aucune pastille, aucun badge, aucun cadre.
   Le grade est une mention, pas une certification affichée. */
.ck-home .ck-sensei__people {
    margin: clamp(2rem, 5vw, 2.75rem) 0 0;
    padding: clamp(1.5rem, 4vw, 2rem) 0 0;
    border-top: 1px solid var(--ck-sensei-rule);
    list-style: none;
}
.ck-home .ck-sensei__person { display: block; margin: 0; }
.ck-home .ck-sensei__person + .ck-sensei__person { margin-top: clamp(1rem, 3vw, 1.5rem); }
/* Corps et graisses repris de docs/SENSEI-COMPETITION-DESIGN.md §6 :
   noms Archivo 700 (22-24 px mobile, 26-30 px desktop), grades Chivo 600 à
   16 px minimum. Le grade est secondaire par l'échelle, jamais par une
   transparence — et le mot « Dan » est écrit en entier. */
.ck-home .ck-sensei__name {
    display: block;
    color: var(--ck-black);
    font: 700 clamp(1.375rem, 4.5vw, 1.5rem)/1.25 'Archivo', Arial, sans-serif;
    letter-spacing: -.01em;
}
.ck-home .ck-sensei__grade {
    display: block;
    margin-top: .25rem;
    color: var(--ck-text-dark-secondary);
    font: 600 1rem/1.4 'Chivo', Arial, sans-serif;
}

/* --- Panneau sombre et silhouette --- */
.ck-home .ck-sensei__figure {
    position: relative;
    margin: 0;
    background: var(--ck-sensei-panel);
    /* Mobile : la silhouette reste présente sans écraser le texte. */
    height: clamp(17rem, 42svh, 22rem);
    /* Le panneau touche les deux bords de l'écran sur mobile. */
    margin-inline: calc(-1 * var(--ck-gutter));
}
.ck-home .ck-sensei__media {
    display: block;
    max-width: none;
    /* Le sujet est coupé en bas dans le fichier : on le cale sur le bord bas. */
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
}
/* Variante détouré : silhouette calée en bas, jamais étirée. */
.ck-home .ck-sensei__figure--cutout .ck-sensei__media {
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: bottom center;
}
/* Variante future photo de dojo : décommenter la classe sur le conteneur et
   retirer --cutout. L'image remplit alors tout le panneau. */
.ck-home .ck-sensei__figure--photo .ck-sensei__media {
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
}

@media (min-width: 768px) {
    .ck-home .ck-sensei__title { font-size: clamp(2.25rem, 4.5vw, 3rem); }
    /* Tablette : une seule colonne. La bande sombre ferme la section sur toute
       la largeur et la silhouette y reste centrée — calée à droite, elle
       laisserait un vide de plusieurs centaines de pixels à sa gauche. */
    .ck-home .ck-sensei__figure {
        height: clamp(25rem, 52svh, 31rem);
        margin-inline: calc(-1 * var(--ck-gutter));
    }
}

@media (min-width: 1150px) {
    /* Récit à gauche (7 col), silhouette à droite (5 col). Les deux colonnes
       partagent la même hauteur : le panneau traverse toute la section. */
    .ck-home .ck-sensei__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(3rem, 5vw, 4.5rem);
        align-items: stretch;
    }
    .ck-home .ck-sensei__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: clamp(5rem, 8vw, 7rem);
    }
    .ck-home .ck-sensei__title { font-size: clamp(2.75rem, 3.4vw, 3.5rem); }
    .ck-home .ck-sensei__name { font-size: clamp(1.625rem, 2vw, 1.875rem); }
    .ck-home .ck-sensei__grade { font-size: 1.0625rem; }
    .ck-home .ck-sensei__figure {
        height: auto;
        min-height: 38rem;
        /* Le panneau rejoint le bord droit du viewport ; les textes restent
           alignés sur le conteneur éditorial. */
        margin-inline: 0 calc(-1 * max(var(--ck-gutter), (100vw - var(--ck-container)) / 2));
    }
    /* Silhouette dimensionnée sur la largeur du panneau, pas sur sa hauteur :
       elle garde les mêmes proportions quand le débordement s'élargit à 1920 px.
       Calée en bas à droite, la respiration sombre se place entre le texte et
       elle — c'est cet espace négatif qui fait la composition. */
    .ck-home .ck-sensei__figure--cutout .ck-sensei__media {
        left: auto;
        right: 0;
        transform: none;
        width: min(94%, 33rem);
        height: auto;
        max-height: 94%;
        object-position: bottom right;
    }
}

/* Second paragraphe : prolonge la phrase du club, d'un ton plus bas. */
.ck-home .ck-sensei__lead--second {
    margin-top: 1rem;
    color: var(--ck-text-dark-secondary);
    font-size: 1.0625rem;
    line-height: 1.6;
}