/* ============================================================
   Chocolata Graphics — pages catégorie (Graphic / Publishing /
   Web design / Motion) : fond sombre, mot géant, grille, bandeau
   ============================================================ */

/* Les couleurs d'accent .cat--<slug> sont définies dans base.css
   (partagées avec le filet de rollover du rail gauche). */

.cat-page {
  --cat-bg: #1f202d;
  --cat-marquee: #47415c;
  overflow: hidden;
  background: var(--cat-bg);
  color: #e9e9ef;
  padding-bottom: 26px;
}

.page-category main {
  background: var(--paper);
}

.page-category :focus-visible {
  outline-color: #f2f2f5;
}

/* ---------- Mot géant (Cormorant) — couleur spécifique catégorie ----------
   Taille et calage : .marquee--giant dans components.css */
.marquee--giant span {
  color: var(--cat-marquee);
}

/* ---------- Intro ---------- */
.cat-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(40px, 6vh, 70px) 24px 0;
}

.cat-hero__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.04em;
}

.cat-hero__intro {
  margin-top: 10px;
}

/* ---------- Grille de projets ---------- */
.works-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vh, 56px);
  margin-top: clamp(48px, 7vh, 80px);
  padding-inline: 24px;
}

.works-set {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vh, 56px);
}

.works-row {
  display: flex;
  justify-content: center;
  gap: var(--work-gap, 17px);
}

/* La petite image de la rangée « grande » s'aligne sur le bas de la grande */
.works-row--feature {
  align-items: flex-end;
}

/* Alternance : grande image à droite une série sur deux */
.works-set--flip .works-row--feature {
  flex-direction: row-reverse;
}

.works-item {
  position: relative; /* ancre le lien étendu du nom */
  margin: 0;
}

/* Cadre 250 × 197 — grande image 518 × 339 (DA). overflow:hidden pour
   contenir le zoom ; isolation pour garder le voile en fondu à l'intérieur. */
.works-item__media {
  position: relative;
  display: block;
  width: var(--thumb-w, 250px);
  max-width: 100%;
  aspect-ratio: 250 / 197;
  overflow: hidden;
  isolation: isolate;
  background: var(--gray-2);
}

.works-item--lg .works-item__media {
  width: var(--thumb-lg-w, 518px);
  aspect-ratio: 518 / 339;
}

/* Vignette : remplit le cadre, cadrage centré.
   <picture> est un conteneur inline par défaut : on le rend bloc plein cadre. */
.works-item__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.works-item__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rollover : voile à la couleur de la rubrique */
.works-item__media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--cat-accent);
  mix-blend-mode: multiply;
  transition: opacity 0.45s ease;
}

@media (hover: hover) {
  .works-item:hover .works-item__thumb {
    transform: scale(1.06);
  }
  .works-item:hover .works-item__media::after {
    opacity: 0.42;
  }
}

.works-item figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.works-item__label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #b4b4c4;
}

.works-item__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #f2f2f5;
}

/* Lien étendu : le nom du projet rend toute la carte cliquable */
.works-item__name::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- View more (chevron dessous, comme la maquette) ---------- */
.more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.3em;
  padding: 8px 4px;
}

.more-btn svg {
  transition: transform 0.3s ease;
}

.more-btn:hover svg {
  transform: translateY(4px);
}

/* ---------- Les 4 catégories en Gotham thin, chacune sa couleur ---------- */
.cat-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(70px, 10vh, 120px);
  padding-inline: 24px;
}

.cat-words .cat-word {
  font-size: clamp(40px, 5.6vw, 86px);
  line-height: 0.8;
  color: var(--cat-accent);
  transition: opacity 0.3s ease;
}

.cat-words .cat-word:hover {
  opacity: 0.72;
}

/* ---------- Contact ---------- */
.cat-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: clamp(56px, 8vh, 96px) auto clamp(56px, 8vh, 90px);
  font-size: 11px;
  letter-spacing: 0.3em;
  padding: 8px 4px;
}

.cat-contact::before {
  content: "";
  width: 46px;
  height: 1px;
  margin-bottom: 6px;
  background: currentColor;
}

.cat-contact svg {
  transition: transform 0.3s ease;
}

.cat-contact:hover svg {
  transform: translateY(4px);
}

/* ---------- Bandeau : placeholders visibles sur fond sombre ---------- */
.page-category .strip__item {
  background: var(--gray-2);
}

/* ---------- Desktop : le bloc de travaux vient couvrir la largeur
   des 4 rubriques du bas (de GRAPHIC à la fin de MOTION).
   Tailles en vw (même base que les mots, dimensionnés en vw) puis
   bornées : elles plafonnent quand les mots plafonnent, l'alignement
   centré tient donc à toutes les largeurs. Repère : 250/17/518 px à
   961px → 334/23/693 px vers 1290px → cap 393/27/815 px. ---------- */
@media (min-width: 961px) {
  .works-grid {
    --thumb-w: clamp(250px, 25.9vw, 393px);
    --work-gap: clamp(17px, 1.76vw, 27px);
    --thumb-lg-w: clamp(518px, 53.7vw, 815px);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* Les rangées passent à la ligne ; la grande vignette (518 px) ne doit pas
     déborder d'un petit écran — elle se cale sur la largeur disponible. */
  .works-grid {
    --thumb-w: min(250px, calc(100vw - 30px));
    --thumb-lg-w: min(518px, calc(100vw - 30px));
  }

  .works-row {
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .works-set--flip .works-row--feature {
    flex-direction: row;
    flex-wrap: wrap-reverse;
  }
}