/* ---------------------------------------------------------------------------
   HERO PHOTO FOCAL POINT
   Provisional values tuned for the temporary competition photo currently in
   use. They exist so the framing is an explicit editorial decision, never a
   default `center` crop.
   TODO Avec la photo définitive : réajuster ces deux valeurs. Le cadrage
   mobile doit montrer les pratiquants et exclure le plafond de la salle ;
   le cadrage desktop doit placer le sujet dans la partie droite visible,
   à droite de l'arête du panneau noir.
   --------------------------------------------------------------------------- */
.ck-home .ck-hero {
    --ck-hero-object-position-desktop: 62% 58%;
    --ck-hero-object-position-mobile: 50% 78%;
    /* Mobile/tablet: the photo stops short of the right edge so a continuous
       black column links header, photo and text panel into one composition. */
    --ck-hero-media-width: 87%;
    --ck-hero-panel-overlap: 2rem;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--ck-black);
}
.ck-home .ck-hero__media {
    position: relative;
    flex: 0 0 auto;
    width: var(--ck-hero-media-width);
    aspect-ratio: 5 / 4;
    max-height: 44svh;
    background: var(--ck-dark-surface);
}
.ck-home .ck-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--ck-hero-object-position-mobile);
    border-radius: 0;
}
.ck-home .ck-hero__image-note { position: absolute; top: 1.25rem; left: var(--ck-gutter); max-width: calc(100% - 2 * var(--ck-gutter)); margin: 0; padding: .5rem .75rem; color: var(--ck-text-light-secondary); background: var(--ck-anthracite); font: 400 .875rem/1.5 'Chivo', Arial, sans-serif; }

/* The panel rides up over the bottom of the photo. The overlap is readable
   because the black arrives from the right-hand column, not from a gradient. */
.ck-home .ck-hero__panel {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    margin-top: calc(-1 * var(--ck-hero-panel-overlap));
    padding: 1.75rem var(--ck-gutter) 2.25rem;
    background: var(--ck-black);
    color: var(--ck-ivory);
}
.ck-home .ck-hero__eyebrow { margin: 0 0 .875rem; color: var(--ck-ivory-muted); font: 600 .875rem/1.5 'Chivo', Arial, sans-serif; letter-spacing: .08em; }
.ck-home .ck-hero__title { margin: 0 0 .875rem; color: var(--ck-ivory); font: 800 clamp(2.5rem, 11.5vw, 3rem)/1.08 'Archivo', Arial, sans-serif; letter-spacing: -.015em; text-transform: none; overflow-wrap: normal; }
.ck-home .ck-hero__intro { max-width: 26rem; margin: 0; color: var(--ck-ivory); font: 600 1.1875rem/1.45 'Chivo', Arial, sans-serif; }
.ck-home .ck-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.5rem; }
/* Short rule above the schedule: a separator, never a framed box. */
.ck-home .ck-hero__practical {
    position: relative;
    margin-top: 1.75rem;
    padding-top: 1.125rem;
    color: var(--ck-ivory-muted);
    font: 400 .9375rem/1.6 'Chivo', Arial, sans-serif;
    overflow-wrap: anywhere;
}
.ck-home .ck-hero__practical::before { content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 1px; background: var(--ck-separator-dark); }
.ck-home .ck-hero__practical p { margin: 0; color: inherit; font: inherit; }

/* Tablet keeps the same one-piece composition, in a landscape crop. */
@media (min-width: 768px) {
    .ck-home .ck-hero { --ck-hero-media-width: 92%; --ck-hero-panel-overlap: 2.5rem; }
    .ck-home .ck-hero__media { aspect-ratio: 16 / 9; max-height: 48svh; }
    .ck-home .ck-hero__panel { padding-block: 2.25rem 3rem; }
    .ck-home .ck-hero__title { font-size: clamp(3rem, 6.5vw, 4rem); }
    .ck-home .ck-hero__intro { font-size: 1.25rem; }
    .ck-home .ck-hero__practical { font-size: 1rem; }
}

/* Desktop: the vertical cut. The photo goes back behind everything, edge to
   edge, and the opaque black panel slices it on the left. */
@media (min-width: 1150px) {
    .ck-home .ck-hero {
        justify-content: flex-end;
        min-height: 34rem;
        min-height: max(34rem, 64svh);
    }
    .ck-home .ck-hero__media {
        position: absolute;
        z-index: -1;
        inset: 0;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        max-height: none;
    }
    .ck-home .ck-hero__image { object-position: var(--ck-hero-object-position-desktop); }
    .ck-home .ck-hero__image-note { top: 1.25rem; left: auto; right: var(--ck-gutter); }
    .ck-home .ck-hero__panel {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 1;
        width: 45%;
        margin-top: 0;
        padding: 3rem 2rem 4.5rem max(var(--ck-gutter), calc((100vw - var(--ck-container)) / 2));
    }
    .ck-home .ck-hero__title { margin-bottom: 1.125rem; font-size: clamp(4rem, 5.6vw, 7rem); }
    .ck-home .ck-hero__intro { font-size: 1.375rem; }
    /* Secondary link sits beside the button, on the same baseline. */
    .ck-home .ck-hero__actions { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 2.25rem; }
    .ck-home .ck-hero__actions .ck-button { min-height: 3.25rem; padding: .875rem 1.5rem; font-size: 1rem; }
    .ck-home .ck-hero__practical { margin-top: 2.25rem; }
}