/* =========================================================================
   CULTURE & TRADITIONS — "Living traditions, warm and tactile"
   The warmest page: terracotta, gold, wine & cream. Prefix: .cu-
   ========================================================================= */

.cu-hero,
.cu-threads,
.cu-band { position: relative; }

/* =========================================================================
   HERO — candlelit still-life, warm scrim
   ========================================================================= */
.cu-hero {
  min-height: clamp(78vh, 86vh, 880px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--snow);
  isolation: isolate;
}
.cu-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  animation: cu-slow-zoom 22s ease-out forwards;
}
@keyframes cu-slow-zoom { to { transform: scale(1); } }
.cu-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 25% 110%, rgba(58,29,34,.85), transparent 60%),
    linear-gradient(to top, rgba(20,12,8,.92) 0%, rgba(28,16,10,.5) 45%, rgba(40,22,12,.28) 100%);
}
.cu-hero-inner {
  padding-block: clamp(3rem, 9vw, 7rem) clamp(3rem, 8vw, 6rem);
  max-width: 60ch;
}
.cu-hero-kicker { color: var(--gold); }
.cu-hero-title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-block: .5rem .9rem;
  text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
.cu-hero-title::first-letter { color: var(--ice); }
.cu-hero-sub {
  font-family: var(--f-cormorant);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  line-height: 1.45;
  color: rgba(255,247,233,.92);
  max-width: 46ch;
}

/* =========================================================================
   THREADS — characterful warm card layout
   ========================================================================= */
.cu-threads {
  background:
    linear-gradient(180deg, var(--snow), var(--ice-soft) 60%, var(--snow));
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.cu-threads::before {
  /* subtle parchment texture wash */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/gen/texture.jpg');
  background-size: 520px; opacity: .10; mix-blend-mode: multiply;
  pointer-events: none;
}
.cu-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

/* base card */
.cu-card {
  position: relative;
  border-radius: 20px;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  background:
    linear-gradient(155deg, #fffaf0, var(--paper));
  border: 1px solid rgba(58,29,34,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 20px 45px -28px rgba(58,29,34,.55);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cu-card::after {
  /* warm accent edge */
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 5px; background: var(--accent, var(--gold));
  opacity: .85;
}
.cu-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 34px 60px -30px rgba(58,29,34,.6);
}

/* varied spans for character */
.cu-card--lang  { grid-column: span 3; }
.cu-card--food  { grid-column: span 3; }
.cu-card--faith { grid-column: span 2; }
.cu-card--craft { grid-column: span 4; padding: 0; }

/* offset the first card upward for editorial rhythm */
.cu-card--lang  { transform: translateY(-1rem); }
.cu-card--lang:hover { transform: translateY(calc(-1rem - 6px)); }

.cu-card-top {
  display: flex; align-items: center; gap: .85rem;
  margin-block-end: 1.1rem;
}
.cu-icon {
  flex: none;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--accent, var(--gold));
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.9), transparent 70%),
    color-mix(in srgb, var(--accent, var(--gold)) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, var(--gold)) 35%, transparent);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent, var(--gold)) 60%, transparent);
}
.cu-icon svg { width: 27px; height: 27px; }
.cu-tag {
  font-family: var(--f-display);
  font-weight: 600; font-size: .62rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--gold)) 75%, var(--ink));
  opacity: .85;
}
[dir="rtl"] .cu-tag { letter-spacing: .06em; }

.cu-card-t {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  color: var(--deep);
  margin-block-end: .6rem;
}
.cu-card-d {
  color: color-mix(in srgb, var(--ink) 86%, transparent);
  font-size: 1rem;
  max-width: 44ch;
}

/* faith card — slightly raised gold tone background */
.cu-card--faith {
  background: linear-gradient(160deg, #fff7e6, #f6e6c0);
}

/* =========================================================================
   CRAFT card — split with carpet imagery
   ========================================================================= */
.cu-card--craft {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
  background: linear-gradient(155deg, #fdf3e0, var(--paper));
}
.cu-craft-media {
  position: relative;
  min-height: 240px;
  overflow: hidden;
}
.cu-craft-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.cu-card--craft:hover .cu-craft-media img { transform: scale(1.05); }
.cu-craft-media::after {
  /* warm tint over photo */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(58,29,34,.18), transparent 55%);
}
.cu-craft-frame {
  position: absolute; inset: 12px; z-index: 2;
  border: 1px solid rgba(255,244,224,.5);
  border-radius: 8px;
  pointer-events: none;
}
.cu-craft-body {
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  display: flex; flex-direction: column; justify-content: center;
}

/* =========================================================================
   CLOSING BAND — "A model of tolerance"
   ========================================================================= */
.cu-band {
  min-height: clamp(58vh, 64vh, 620px);
  display: flex; align-items: center;
  overflow: hidden;
  color: var(--snow);
  text-align: center;
  isolation: isolate;
}
.cu-band-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
.cu-band-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 120% at 50% 20%, rgba(58,29,34,.55), transparent 70%),
    linear-gradient(180deg, rgba(20,12,8,.72), rgba(40,22,12,.86));
}
.cu-band-inner {
  max-width: 64ch; margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.cu-band-icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  color: var(--gold);
}
.cu-band-icon svg { width: 100%; height: 100%; }
.cu-band-t {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.06;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.cu-band-b {
  font-family: var(--f-cormorant);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem);
  line-height: 1.5;
  color: rgba(255,247,233,.93);
  max-width: 56ch;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 920px) {
  .cu-card--lang  { grid-column: span 3; transform: none; }
  .cu-card--lang:hover { transform: translateY(-6px); }
  .cu-card--food  { grid-column: span 3; }
  .cu-card--faith { grid-column: span 6; }
  .cu-card--craft { grid-column: span 6; }
}

@media (max-width: 560px) {
  .cu-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .cu-card--lang,
  .cu-card--food,
  .cu-card--faith,
  .cu-card--craft { grid-column: 1 / -1; }
  .cu-card--craft {
    grid-template-columns: 1fr;
  }
  .cu-craft-media { min-height: 200px; }
  .cu-hero { min-height: 72vh; }
}