.client-page {
    background: #f5f5f5;
}

.client-page__hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0D0D0D;
    color: #f5f5f5;
    padding: var(--chirripo-space-xl, 6rem) var(--chirripo-space-md, 1.5rem) 0;
    text-align: center;
}

.client-page__title {
    position: relative;
    margin: -15% 0 0.2em;
    font-family: var(--chirripo-font-display, serif);
    font-weight: 300;
    font-size: clamp(2.5rem, 10vw, 132px);
    line-height: 1;
}

/*
 * Balayage flou -> net au défilement : même mécanisme que le bloc "Titre -
 * Apparition nette/floue" (blocks/title-reveal), déjà cloné en CSS pur pour
 * les templates PHP classiques Portfolio et Clients (portfolio.css,
 * clients-list.css) — même chose ici pour le template client. Déclenché
 * par assets/js/hero-title-reveal.js (générique, aucune modif nécessaire).
 */
.client-page__title-blur,
.client-page__title-sharp {
    display: block;
}

.client-page__title-blur {
    filter: blur(28px);
    opacity: 0.28;
}

@property --client-page-title-reveal {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.client-page__title-sharp {
    position: absolute;
    inset: 0;
    --client-page-title-reveal: -10%;
    -webkit-mask-image: linear-gradient(to right, black 0%, black var(--client-page-title-reveal), transparent calc(var(--client-page-title-reveal) + 10%));
    mask-image: linear-gradient(to right, black 0%, black var(--client-page-title-reveal), transparent calc(var(--client-page-title-reveal) + 10%));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Texte du calque net via attr(data-text) plutôt qu'un vrai texte dupliqué
   dans le DOM : évite un H1 "vu en double" par les outils qui lisent le
   textContent sans respecter aria-hidden. */
.client-page__title-sharp::before {
    content: attr(data-text);
}

.hero-reveal.is-visible .client-page__title-blur {
    opacity: 0;
    transition: opacity 500ms ease 600ms;
}

.hero-reveal.is-visible .client-page__title-sharp {
    --client-page-title-reveal: 100%;
    transition: --client-page-title-reveal 2800ms cubic-bezier(0.22, 1, 0.36, 1) 600ms;
}

@media (prefers-reduced-motion: reduce) {
    .client-page__title-blur {
        opacity: 0;
    }

    .client-page__title-sharp {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.client-page__subtitle {
    margin: 0 auto var(--chirripo-space-xl, 3rem);
    max-width: 45ch;
    font-family: var(--chirripo-font-body, sans-serif);
    font-size: 24px;
    color: #f5f5f5;
    /* Fondu léger seul (pas de balayage directionnel comme le titre). */
    opacity: 0;
    filter: blur(6px);
    transform: translateY(12px);
    transition: opacity 900ms ease 600ms, filter 900ms ease 600ms, transform 900ms ease 600ms;
}

.hero-reveal.is-visible .client-page__subtitle {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .client-page__subtitle {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/*
 * La grille remonte sur la zone noire du hero (la première card chevauche
 * la transition) : marge négative plutôt qu'un simple empilement — même
 * technique que la page Portfolio (portfolio.css).
 */
.client-page__grid {
    position: relative;
    z-index: 1;
    margin: -120px auto 80px 0;
    padding: 0 10%;
    background-color: #f5f5f5;
}

.client-page__full,
.client-page__pair {
    margin-bottom: var(--chirripo-space-md, 1.5rem);
}

.client-page__full .client-card__link {
    aspect-ratio: 16 / 9;
}

/* La toute première card remonte encore davantage sur le hero, et la
   ligne suivante referme l'espace ainsi libéré (cf. portfolio.css pour
   l'explication détaillée du même procédé). */
.client-page__full:first-child {
    position: relative;
    top: -10rem;
}

.client-page__full:first-child+.client-page__pair {
    margin-top: -10rem;
}

.client-page__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--chirripo-space-md, 1.5rem);
}

.client-page__pair .client-card__link {
    aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
    /* minmax(0, 1fr), pas 1fr seul (cf. portfolio.css / projects-home pour
       le même piège) : sans ça, la ligne d'étiquettes nowrap de
       .client-card__tags peut étirer la colonne (et l'image) au-delà du
       viewport. */
    .client-page__pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .client-page__grid {
        margin-top: -60px;
    }
}

.client-page__empty {
    text-align: center;
    color: var(--chirripo-color-text-muted, #6a6a6a);
    padding: var(--chirripo-space-xl, 6rem) 0;
}