/* ═══════════════════════════════════════════════════════════════
   CINEMATIC MEDIA — shared visual-identity component (2026-09-02)
   Room-by-room rollout, approved by Yousef. Full-bleed photography
   that fades into the page/card cream background (no hard image
   rectangle), with real accessible HTML text overlaid — never text
   baked into the picture.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cm-cream: #FDFBF5;
  --cm-gold: #B48748;
  /* Gold for text laid OVER photography. The brand gold above is a fine
     accent on a solid cream panel, but as 12.5px type on a photograph it
     only reaches ~3.1:1 on cream and ~1.3:1 over a dark frame -- it washed
     out on every light hero on the site (بند 340). This deeper bronze is
     the same hue family and clears 4.5:1 on cream, on a light frame, and
     on a dark frame under the scrim below. Use --cm-gold for accents on
     solid backgrounds; use this for anything sitting on an image. */
  --cm-gold-ink: #7C5518;
  --cm-burgundy: #3A141E;
  --cm-burgundy-soft: rgba(58, 20, 30, .82);
}

/* ── HERO ─────────────────────────────────────────────────────── */
.cm-hero {
  position: relative;
  overflow: hidden;
  background: var(--cm-cream);
  border-bottom: 1px solid rgba(180, 135, 72, .18);
}
.cm-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  max-height: 620px;
  overflow: hidden;
}
.cm-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(253, 251, 245, 0) 0%,
    rgba(253, 251, 245, 0) 44%,
    var(--cm-cream) 94%);
  pointer-events: none;
}
.cm-hero__content {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  padding: 0 24px 42px;
  text-align: center;
  z-index: 2;
}
/* Soft, unobtrusive scrim strictly behind the text — not a hard box.
   Re-centred in بند 340: it used to be an ellipse at 50% 62% falling to
   zero by 72%, which put the kicker -- the topmost line of this block --
   past the falloff, so it sat on bare photograph with no scrim at all
   while the title below it got the benefit. Centring on the block and
   carrying the ramp out to 88% covers all three lines and still dissolves
   with no visible edge. */
.cm-hero__content::before {
  content: "";
  position: absolute;
  inset: -30px -48px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(253, 251, 245, .82) 0%,
    rgba(253, 251, 245, .66) 45%,
    rgba(253, 251, 245, .28) 72%,
    rgba(253, 251, 245, 0) 92%);
  z-index: -1;
  pointer-events: none;
}
.cm-hero__kicker {
  display: block;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cm-gold-ink);
  /* Cream halo: the scrim makes the ground mostly cream, and this keeps
     the letterforms separated from whatever image detail still shows
     through on a busy frame. */
  text-shadow: 0 1px 3px rgba(253, 251, 245, .75);
  font-weight: 600;
  margin: 0 0 14px;
}
.cm-hero__title {
  font-family: "Cormorant Garamond", "EB Garamond", "Georgia", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--cm-burgundy);
  margin: 0 0 16px;
  line-height: 1.08;
}
.cm-hero__verse {
  font-family: "Cormorant Garamond", "EB Garamond", "Georgia", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cm-burgundy-soft);
  margin: 0;
}
/* Same reason as the kicker: 1.15rem non-bold needs 4.5:1, and the brand
   gold gave 3.1:1 on cream. */
.cm-hero__verse-ref { color: var(--cm-gold-ink); font-style: normal; }

@media (max-width: 640px) {
  .cm-hero__media { aspect-ratio: 3 / 4; max-height: 520px; }
  .cm-hero__content { padding: 0 16px 28px; }
  .cm-hero__title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .cm-hero__verse { font-size: 1.02rem; }
}

/* ── FULL-BLEED BREAKOUT (2026-09-03 fix) ────────────────────────
   Atlas / long-form article pages wrap .cm-hero inside the
   constrained .lk-article-shell column (max-width + side padding),
   which boxed the hero image with hard cream-colored edges instead
   of the full-bleed look approved for the room pages (where .cm-hero
   sits unwrapped directly under <body>). This rule breaks the hero
   out to full viewport width wherever it is nested inside
   .lk-article-shell, without requiring any HTML restructuring. */
.lk-article-shell .cm-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── CARD MEDIA (used inside .lk-card) ───────────────────────── */
.cm-card { padding: 0; overflow: hidden; }
.cm-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.cm-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-card__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(253, 251, 245, 0) 0%,
    rgba(253, 251, 245, 0) 46%,
    var(--cm-card-bg, #FFFAEE) 96%);
  pointer-events: none;
}
.cm-card .lk-card-cat {
  display: inline-block;
  margin: 14px 20px 0;
}
.cm-card h3 { margin: 4px 20px 8px; }
.cm-card p { margin: 0 20px 20px; }

@media (max-width: 640px) {
  .cm-card__media { aspect-ratio: 3 / 2; }
}