.surface-hero::after {
  --surface-hero-watermark: "Thèmes";
}

/* ============ CLUSTER WRAPPER (for alternating bg) ============ */
.cluster-wrap:nth-child(odd) {
  background: var(--surface-secondary-background);
}

.cluster-wrap:nth-child(even) {
  background: var(--surface-tertiary-background);
}

/* ============ CLUSTER ============ */
.cluster {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3.5rem 4rem 3rem;
}

.cluster-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--surface-primary-foreground-muted);
  gap: 2rem;
}

.cluster-header-left {
  flex: 1;
}

.cluster-number {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--secondary-color);
  display: block;
  margin-bottom: 0.25rem;
}

.cluster-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--surface-primary-background);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.cluster-desc {
  font-family: "EB Garamond", serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-color-subtle);
  line-height: 1.5;
}

.cluster-count {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-color-subtle);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============ CARD GRID — uniform 4 columns ============ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1.25rem;
}

/* ============ THEME CARD ============ */
.cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-2);
}

/* Image — 4:3 aspect, sepia-toned like the current site */
.cat-card-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface-primary-foreground);
  border: 1px solid var(--surface-primary-foreground-muted);
}

/* Gold accent bar sweeps in on hover */
.cat-card-img-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--secondary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.cat-card:hover .cat-card-img-wrap::after {
  transform: scaleX(1);
}

.cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(30%) contrast(1.05) brightness(0.95);
  transition:
    transform 0.55s ease,
    filter 0.35s ease;
}

.cat-card:hover .cat-card-img {
  transform: scale(1.04);
  filter: sepia(10%) contrast(1.08) brightness(1);
}

/* Gradient fallbacks per card (colour when image absent) */
.cat-card.fb-1 .cat-card-img-wrap {
  background: linear-gradient(135deg, #3a5070, #1a2a42);
}

.cat-card.fb-2 .cat-card-img-wrap {
  background: linear-gradient(135deg, #5a3820, #2a180a);
}

.cat-card.fb-3 .cat-card-img-wrap {
  background: linear-gradient(135deg, #224530, #0f2018);
}

.cat-card.fb-4 .cat-card-img-wrap {
  background: linear-gradient(135deg, #452020, #200a0a);
}

.cat-card.fb-5 .cat-card-img-wrap {
  background: linear-gradient(135deg, #35354e, #18182e);
}

.cat-card.fb-6 .cat-card-img-wrap {
  background: linear-gradient(135deg, #4e3520, #2a180a);
}

.cat-card.fb-7 .cat-card-img-wrap {
  background: linear-gradient(135deg, #224545, #0a2222);
}

.cat-card.fb-8 .cat-card-img-wrap {
  background: linear-gradient(135deg, #3a2548, #1a0e2a);
}

/* Text below image — parchment background */
.cat-card-body {
  padding: 0.6rem 0.05rem 0.25rem;
}

.cat-card-title {
  font-family: "Playfair Display", serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--surface-primary-background);
  line-height: 1.25;
  margin-bottom: 0.2rem;
  transition: color 0.15s;
}

.cat-card:hover .cat-card-title {
  color: var(--primary-color);
}

.cat-card-meta {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-color-subtle);
  line-height: 1.35;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cluster {
    padding: 3rem 2.5rem;
  }
}

@media (max-width: 750px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.75rem;
  }

  .cluster {
    padding: 2.5rem 1.5rem;
  }
}

@media (max-width: 500px) {
  .cluster {
    padding: 2rem 1rem 1.5rem;
  }
}

/* Mobile list styles (injected by JS) */

@media (max-width: 600px) {
  .category-grid {
    display: none !important;
  }
}

.mobile-list {
  display: none;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 600px) {
  .mobile-list {
    display: flex;
  }
}

.m-strip {
  display: flex;
  text-decoration: none;
  overflow: hidden;
  background: var(--surface-primary-background);
}

.m-swatch {
  flex: 0 0 68px;
  min-height: 72px;
}

.m-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid rgba(201, 150, 12, 0.3);
  overflow: hidden;
  min-height: 72px;
}

.m-title {
  font-family: "Playfair Display", serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--background-color);
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.m-meta {
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(200, 184, 154, 0.6);
}

.m-arrow {
  font-size: 0.72rem;
  color: var(--secondary-color);
  margin-top: 0.3rem;
}

.msw-1 {
  background: linear-gradient(160deg, #2c4a6e, #1a2a42);
}

.msw-2 {
  background: linear-gradient(160deg, #4a2c1a, #2a180a);
}

.msw-3 {
  background: linear-gradient(160deg, #1a3a2a, #0f2018);
}

.msw-4 {
  background: linear-gradient(160deg, #3a1a1a, #200a0a);
}

.msw-5 {
  background: linear-gradient(160deg, #2a2a3e, #18182e);
}

.msw-6 {
  background: linear-gradient(160deg, #3e2a1a, #2a180a);
}

.msw-7 {
  background: linear-gradient(160deg, #1a3a3a, #0a2222);
}

.msw-8 {
  background: linear-gradient(160deg, #2e1e3a, #1a0e2a);
}