/* Prochain rendez-vous — bande basse entre l'Info du club et le Hero.
   Jamais collante : l'Info du club est le seul bandeau persistant de la page.
   Pas de carte, pas d'arrondi, pas d'icône : une ligne d'information dense,
   posée sur l'anthracite pour se détacher du noir du Hero sans le concurrencer.

   Le placement dans la grille est explicite à chaque palier. L'auto-flow
   renverrait le lien sous le bloc titre dès que celui-ci occupe deux colonnes,
   et la bande gagnerait 44 px de haut au détriment du Hero. */
.ck-home .ck-next, .ck-home .ck-next * { box-sizing: border-box; }
/* Le rouge du club — celui de la veste de coach, déjà dans la palette sous
   --ck-red. Il installe une lecture par la couleur sur toute la page :
   noir pour le site, jaune pour l'Info du club, rouge pour l'agenda.
   Sur ce fond, le blanc pur donne 6,8:1 et le texte secondaire, du blanc à
   82 % d'opacité, 5,0:1 — les deux passent le niveau AA. Le gris ivoire des
   autres sections, lui, tomberait à 4,3:1 : il n'est pas réutilisé ici. */
.ck-home .ck-next {
    --ck-next-soft: rgba(255, 255, 255, .82);
    position: static;
    background: var(--ck-red);
    color: #fff;
}

/* Téléphone : label, puis date et lien sur une même ligne, puis l'événement. */
.ck-home .ck-next__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .25rem 1rem;
    padding-block: .75rem;
}

.ck-home .ck-next__label {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    color: var(--ck-next-soft);
    font: 600 .75rem/1.4 'Chivo', Arial, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* La date porte le regard : compacte, deux valeurs sur une seule ligne. */
.ck-home .ck-next__when { grid-column: 1; grid-row: 2; margin: 0; }
.ck-home .ck-next__when time { display: flex; align-items: baseline; gap: .625rem; }
.ck-home .ck-next__date {
    color: #fff;
    font: 800 1.375rem/1.1 'Archivo', Arial, sans-serif;
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ck-home .ck-next__time {
    color: var(--ck-next-soft);
    font: 600 1rem/1.2 'Chivo', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ck-home .ck-next__what {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    gap: .125rem;
    margin: 0;
    min-width: 0;
}
.ck-home .ck-next__title { color: #fff; font: 600 1.0625rem/1.35 'Chivo', Arial, sans-serif; }
.ck-home .ck-next__place { color: var(--ck-next-soft); font: 400 .9375rem/1.4 'Chivo', Arial, sans-serif; }

.ck-home .ck-next__link {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    color: #fff;
    font: 600 .9375rem/1.3 'Chivo', Arial, sans-serif;
    text-decoration: none;
    justify-self: end;
}
.ck-home .ck-next__link:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
.ck-home .ck-next__link:focus-visible { outline: 2px solid var(--ck-yellow); outline-offset: 3px; }

/* Sans rendez-vous : une seule ligne, sans hauteur de bloc. */
.ck-home .ck-next--quiet .ck-next__inner { grid-template-columns: minmax(0, 1fr); padding-block: .5rem; }
.ck-home .ck-next--quiet .ck-next__label { grid-row: 1; }
.ck-home .ck-next--quiet .ck-next__link {
    grid-column: 1; grid-row: 2;
    justify-self: start; min-height: 2.25rem; font-weight: 400;
}

@media (min-width: 768px) {
    /* Tablette : le label reste seul au-dessus, puis date / événement / lien
       sur une seule ligne. */
    .ck-home .ck-next__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .25rem 2rem;
    }
    .ck-home .ck-next__label { grid-column: 1 / -1; grid-row: 1; margin-bottom: .125rem; }
    .ck-home .ck-next__when  { grid-column: 1; grid-row: 2; }
    .ck-home .ck-next__what  { grid-column: 2; grid-row: 2; }
    .ck-home .ck-next__link  { grid-column: 3; grid-row: 2; min-height: 2.25rem; }
    .ck-home .ck-next__date  { font-size: 1.5rem; }

    .ck-home .ck-next--quiet .ck-next__inner { grid-template-columns: auto minmax(0, 1fr); }
    .ck-home .ck-next--quiet .ck-next__label { grid-column: 1; grid-row: 1; margin-bottom: 0; }
    .ck-home .ck-next--quiet .ck-next__link  { grid-column: 2; grid-row: 1; justify-self: start; }
}

@media (min-width: 1150px) {
    /* Desktop : tout sur une seule ligne. La bande tient en une hauteur de
       texte et ne mord pas sur le Hero. */
    .ck-home .ck-next__inner {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 2rem;
    }
    .ck-home .ck-next__label { grid-column: 1; grid-row: 1; margin-bottom: 0; }
    .ck-home .ck-next__when  { grid-column: 2; grid-row: 1; }
    .ck-home .ck-next__what  { grid-column: 3; grid-row: 1; }
    .ck-home .ck-next__link  { grid-column: 4; grid-row: 1; }

    /* L'emblème déborde d'environ 50 px sous la ligne du header et recouvre la
       gauche de ce qui suit. Quand une Info du club est publiée, c'est elle qui
       vient juste après et qui porte déjà ce décalage : la bande rendez-vous se
       trouve alors plus bas, dégagée. Le décalage n'est donc appliqué QUE
       lorsque la bande est réellement le premier élément sous le header — d'où
       le `:first-child`, et aucun espace perdu dans l'autre cas. */
    .ck-home .ck-main > .ck-next:first-child .ck-next__inner {
        padding-left: calc(var(--ck-brand-height) * var(--ck-brand-ratio) + 2.75rem);
    }
}

@media (max-width: 359px) {
    /* Sous 360 px, « Voir le calendrier » et la date ne tiennent plus côte à
       côte : le lien passait à la ligne en laissant sa flèche orpheline. Il
       reprend donc une ligne entière. Au-dessus de 360 px — le cas courant —
       il reste sur la ligne de la date et la bande garde sa compacité. */
    .ck-home .ck-next__inner { grid-template-columns: minmax(0, 1fr); }
    .ck-home .ck-next__when { grid-column: 1; grid-row: 2; }
    .ck-home .ck-next__what { grid-column: 1; grid-row: 3; }
    .ck-home .ck-next__link { grid-column: 1; grid-row: 4; justify-self: start; }
}