:root {
  --gallery-card-gap: clamp(18px, 2.4vw, 34px);
}


/* =========================================================
   PAGE GALERIE
========================================================= */

.gallery-page {
  width: var(--content);
  margin: 0 auto;

  padding: 12px 0 16px;
}


/* =========================================================
   INTRO
========================================================= */

.gallery-intro {
  display: grid;

  /*
   * Colonne gauche pour le titre,
   * colonne droite suffisamment large
   * pour garder la phrase sur une ligne.
   */
  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: clamp(28px, 4vw, 64px);

  align-items: end;

  padding: 8px 0 14px;

  border-bottom: 1px solid var(--line);
}


.gallery-heading {
  min-width: 0;
}


.gallery-intro h1 {
  margin: 0;

  white-space: pre-line;

  font-size: clamp(
    3rem,
    4.35vw,
    4.35rem
  );

  line-height: 0.88;

  letter-spacing: -0.055em;

  font-weight: 400;
}


.gallery-intro-copy {
  margin: 0 0 1px;

  max-width: none;

  justify-self: end;
  align-self: end;

  color: var(--soft);

  font-size: clamp(
    0.86rem,
    1vw,
    0.98rem
  );

  line-height: 1.4;

  text-align: right;

  /*
   * Une seule ligne sur desktop.
   */
  white-space: nowrap;
}


/* =========================================================
   OUTILS
========================================================= */

.gallery-tools {
  display: grid;

  grid-template-columns:
    minmax(220px, 360px)
    minmax(0, 1fr)
    auto;

  gap: 26px;

  align-items: center;

  padding: 18px 0;

  border-bottom: 1px solid var(--line);
}


/* =========================================================
   RÉSUMÉ
========================================================= */

.gallery-summary {
  min-height: 50px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--line);

  color: var(--muted);

  font-family: var(--mono);

  font-size: 0.6rem;

  text-transform: uppercase;

  letter-spacing: 0.07em;
}


.gallery-summary strong {
  color: var(--text);

  font-weight: 400;
}


/* =========================================================
   RECHERCHE
========================================================= */

.search-field input {
  width: 100%;

  min-height: 38px;

  padding: 0 2px;

  color: var(--text);

  background: transparent;

  border: 0;

  border-bottom: 1px solid #47474d;

  outline: 0;

  border-radius: 0;
}


.search-field input::placeholder {
  color: #707077;
}


.search-field input:focus {
  border-color: var(--accent);
}


/* =========================================================
   FILTRES
========================================================= */

.filter-row {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.filter-button {
  min-height: 30px;

  padding: 6px 10px;

  border: 1px solid var(--line);

  border-radius: 999px;

  color: var(--muted);

  background: transparent;

  font-family: var(--mono);

  font-size: 0.56rem;

  text-transform: uppercase;

  letter-spacing: 0.055em;

  cursor: pointer;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}


.filter-button:hover,
.filter-button:focus-visible {
  color: var(--text);

  border-color: #55555c;
}


.filter-button.is-active {
  color: #0c0c0d;

  border-color: var(--accent);

  background: var(--accent);
}


.results-count {
  margin: 0;

  color: var(--muted);

  font-family: var(--mono);

  font-size: 0.6rem;

  white-space: nowrap;

  text-transform: uppercase;
}


/* =========================================================
   GRILLE DES ŒUVRES
========================================================= */

.artwork-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      34px,
      5vw,
      72px
    )
    var(--gallery-card-gap);

  padding:
    clamp(
      30px,
      4vw,
      48px
    )
    0
    18px;
}


.artwork-card {
  min-width: 0;
}


.artwork-card[hidden] {
  display: none;
}


.artwork-card-link {
  display: block;

  text-decoration: none;
}


/* =========================================================
   IMAGE
========================================================= */

.artwork-card-media {
  position: relative;

  aspect-ratio: 1;

  overflow: hidden;

  background: var(--panel);

  border: 1px solid var(--line);
}


.artwork-card-media::after {
  content: "";

  position: absolute;

  inset: 0;

  border: 1px solid transparent;

  pointer-events: none;

  transition:
    border-color 180ms ease;
}


.artwork-card-media img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform 320ms
      cubic-bezier(
        0.2,
        0.7,
        0.2,
        1
      ),
    filter 320ms ease;
}


.artwork-card-link:hover
.artwork-card-media img,
.artwork-card-link:focus-visible
.artwork-card-media img {
  transform: scale(1.018);

  filter: brightness(1.06);
}


.artwork-card-link:hover
.artwork-card-media::after,
.artwork-card-link:focus-visible
.artwork-card-media::after {
  border-color: var(--accent);
}


.artwork-card-link:focus-visible {
  outline: none;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.artwork-card-placeholder {
  width: 100%;

  height: 100%;

  display: grid;

  place-items: center;

  color: #56565d;

  background:
    linear-gradient(
      135deg,
      transparent 0 49.6%,
      #242428 49.8% 50.2%,
      transparent 50.4%
    ),
    var(--panel);

  font-family: var(--mono);

  font-size: clamp(
    1rem,
    3vw,
    2rem
  );
}


/* =========================================================
   LÉGENDE DES CARTES
========================================================= */

.artwork-card-caption {
  display: grid;

  grid-template-columns:
    54px
    minmax(0, 1fr)
    54px;

  gap: 10px;

  align-items: start;

  padding-top: 12px;
}


.artwork-card-caption h2 {
  margin: 0;

  font-size: 0.9rem;

  font-weight: 450;

  line-height: 1.3;

  letter-spacing: -0.02em;

  text-align: center;
}


.artwork-card-number,
.artwork-card-year {
  padding-top: 2px;

  color: var(--muted);

  font-family: var(--mono);

  font-size: 0.56rem;
}


.artwork-card-number {
  color: var(--accent);
}


.artwork-card-year {
  text-align: right;
}


/* =========================================================
   ÉTAT VIDE
========================================================= */

.empty-state {
  margin: 48px 0;

  color: var(--muted);
}


/* =========================================================
   RESPONSIVE — 1160 PX
========================================================= */

@media (max-width: 1160px) {

  .artwork-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }
}


/* =========================================================
   RESPONSIVE — 980 PX
========================================================= */

@media (max-width: 980px) {

  .gallery-intro {
    grid-template-columns:
      minmax(0, 0.75fr)
      minmax(0, 1.25fr);

    gap: 24px;
  }

  .gallery-intro-copy {
    font-size: 0.84rem;
  }
}


/* =========================================================
   RESPONSIVE — 900 PX
========================================================= */

@media (max-width: 900px) {

  .gallery-intro {
    grid-template-columns: 1fr;

    gap: 12px;

    padding: 8px 0 14px;
  }

  .gallery-intro-copy {
    max-width: 38ch;

    justify-self: start;

    text-align: left;

    /*
     * Sur tablette/mobile,
     * retour à la ligne autorisé.
     */
    white-space: normal;
  }

  .gallery-tools {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .results-count {
    justify-self: start;
  }
}


/* =========================================================
   RESPONSIVE — 720 PX
========================================================= */

@media (max-width: 720px) {

  .gallery-page {
    padding-top: 10px;
  }

  .gallery-intro h1 {
    font-size: clamp(
      2.85rem,
      13vw,
      4.25rem
    );
  }

  .artwork-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


/* =========================================================
   RESPONSIVE — 470 PX
========================================================= */

@media (max-width: 470px) {

  .gallery-intro {
    padding-bottom: 14px;
  }

  .gallery-summary {
    min-height: 44px;
  }

  .artwork-grid {
    grid-template-columns: 1fr;

    gap: 38px;

    padding-top: 26px;
  }

  .artwork-card-caption h2 {
    font-size: 0.96rem;
  }
}