/* Le Club — prolongement de l'ivoire des informations pratiques, à une autre
   échelle. 
   Aucune carte, aucun encadré, aucun bloc image/texte 50-50. */
.ck-home .ck-club,
.ck-home .ck-club * { box-sizing: border-box; }

.ck-home .ck-club {
    /* Surfaces claires secondaires de docs/DESIGN.md §3, locales à la section. */
    --ck-club-placeholder-bg: #E9E5DA;
    --ck-club-placeholder-border: #C9C3B4;
    /* Retrait haut réduit : les informations pratiques ont déjà leur propre
       retrait bas. On ne cumule pas les deux (CLUB-WADORUY-DESIGN.md §2). */
    /* Haut resserré et accordé à celui du bas des Entraînements : les deux
       sections sont sur le même ivoire, leurs paddings s'additionnent, et la
       somme faisait 184 px. Le bas ne bouge pas : il donne sur Wado-Ryu, qui
       est sombre, et la rupture de fond y est nette. */
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3.5rem, 8vw, 6.5rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
    scroll-margin-top: calc(var(--ck-header-height) + var(--ck-admin-offset) + 1rem);
    /* Garde-fou : la photo déborde à gauche sur desktop. */
    overflow-x: clip;
}
.ck-home .ck-club__inner { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

/* --- Ouverture : Depuis / 2005, puis la date réelle --- */
.ck-home .ck-club__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-club__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .25em;
    margin: 0;
    color: var(--ck-black);
    font-family: 'Archivo', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.02;
}
.ck-home .ck-club__title-lead { font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -.01em; }
.ck-home .ck-club__title-year { font-size: clamp(3.25rem, 14vw, 4.5rem); }

/* La date documente la naissance ; le titre donne l'ancienneté. Pas deux chiffres. */
.ck-home .ck-club__date {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    margin: 1.25rem 0 0;
    font: 400 1.0625rem/1.5 'Chivo', Arial, sans-serif;
}
.ck-home .ck-club__date time { display: inline-flex; flex-wrap: wrap; gap: .3em; }
/* Unique touche rouge de toute la séquence : le jour, jamais l'année entière. */
.ck-home .ck-club__date-day { color: var(--ck-red); font-weight: 600; }
.ck-home .ck-club__date-year { color: var(--ck-black); font-weight: 600; }
.ck-home .ck-club__date-note { color: var(--ck-text-dark-secondary); }

/* --- Récit : photographie large, extrait étroit --- */
.ck-home .ck-club__story { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
.ck-home .ck-club__media { margin: 0; }

/* Photo d’archive 2007 : 524 px de large en natif. Elle n’est jamais agrandie
   au-delà de sa définition — la composition lui laisse de l’espace éditorial
   plutôt que de l’étirer sur toute la colonne. */
.ck-home .ck-club__photo { display: block; width: 100%; height: auto; }
.ck-home .ck-club__caption {
    margin-top: .75rem;
    color: var(--ck-text-dark-secondary);
    font: 400 .875rem/1.5 'Chivo', Arial, sans-serif;
}

.ck-home .ck-club__media { max-width: 33rem; }
.ck-home .ck-club__excerpt { max-width: 34rem; }
.ck-home .ck-club__kicker {
    margin: 0 0 .875rem;
    color: var(--ck-text-dark-secondary);
    font: 600 .8125rem/1.5 'Chivo', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* L'espacement est posé entre paragraphes voisins, jamais sur le paragraphe
   lui-même : une marge haute décalerait aussi le premier et casserait son
   alignement avec le kicker. Un peu moins qu'un interligne plein — l'air
   entre deux paragraphes doit se lire comme une respiration, pas comme une
   rupture dans une colonne déjà longue. */
.ck-home .ck-club__story-text + .ck-club__story-text { margin-top: 1.125rem; }
.ck-home .ck-club__story-text {
    margin: 0;
    color: var(--ck-black);
    font: 400 clamp(1.0625rem, 4vw, 1.1875rem)/1.65 'Chivo', Arial, sans-serif;
}
.ck-home .ck-club__quote {
    margin: 0;
    color: var(--ck-black);
    font: 400 clamp(1.125rem, 4vw, 1.25rem)/1.55 'Chivo', Arial, sans-serif;
}
.ck-home .ck-club__quote p { margin: 0; }
.ck-home .ck-club__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;
}

@media (min-width: 768px) {
    /* Tablette : l'extrait passe SOUS le bord de lecture de la photo, avec un
       léger retrait. Le comprimer en colonne étroite à côté de l'image le
       réduirait à ~22 caractères par ligne (CLUB-WADORUY-DESIGN.md §10). */
    .ck-home .ck-club__excerpt { margin-left: clamp(2rem, 8vw, 6rem); }
    .ck-home .ck-club__title-lead { font-size: clamp(2rem, 3.2vw, 2.75rem); }
    .ck-home .ck-club__title-year { font-size: clamp(4.5rem, 9vw, 7rem); }
    .ck-home .ck-club__date { margin-top: 1.5rem; }
}

@media (min-width: 1150px) {
    /* Ouverture sur deux axes : le titre à gauche, la date sur sa propre marge. */
    .ck-home .ck-club__opening {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: auto auto;
        gap: 0 clamp(2rem, 5vw, 4rem);
        align-content: start;
    }
    /* Placement explicite : l'auto-flow enverrait le H2 en colonne 2. */
    .ck-home .ck-club__eyebrow { grid-column: 1; grid-row: 1; }
    .ck-home .ck-club__title   { grid-column: 1; grid-row: 2; }
    .ck-home .ck-club__date {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        flex-direction: column;
        margin: 0 0 .75rem;
        gap: .35rem;
    }
    .ck-home .ck-club__title-year { font-size: clamp(6rem, 7vw, 8rem); }
    /* Desktop seulement : la photo et le récit se répondent, alignés par le
       HAUT. Le calage par le bas d'origine valait quand l'extrait tenait en un
       paragraphe et restait plus court que l'image. Le récit complet fait
       maintenant 947 px contre 643 px pour le bloc photo : caler par le bas
       aurait creusé 304 px de vide au-dessus de la photo, juste sous le titre.
       Aligner par le haut fait remonter le texte et pose l'image sous le titre. */
    .ck-home .ck-club__story {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: clamp(2rem, 4vw, 3rem);
        align-items: start;
    }
    .ck-home .ck-club__excerpt { margin-left: 0; }
    /* La colonne d'extrait fait ~337 px à 1150 px : brider le corps pour garder
       une mesure lisible plutôt que 27 caractères par ligne. */
    .ck-home .ck-club__quote { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); }
    /* La photo d’archive fait 524 px : pas de débordement plein cadre, qui
       l’obligerait à s’agrandir et à devenir floue. Colonnes rééquilibrées. */
    .ck-home .ck-club__story { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
    .ck-home .ck-club__story-text { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
    /* Le calage fin du bas de colonne n'a plus d'objet depuis l'alignement
       par le haut : il est retiré plutôt que laissé sans effet. */
    /* La photo des instructeurs est un portrait : à pleine largeur de colonne,
       son bloc dépassait celui du texte de plus de 400 px. On bride la hauteur
       et on laisse la largeur suivre — ratio intact, aucun recadrage, personne
       n'est coupé. La figure se réduit à la largeur réelle de l'image pour que
       la légende reste calée sous elle, puis se centre dans sa colonne. */
    .ck-home .ck-club__media {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }
    .ck-home .ck-club__photo {
        width: auto;
        max-width: 100%;
        max-height: 610px;
    }
}