/* el-mina.css — page-specific accents for "El Mina, meine Heimatstadt".
 * Layered on top of styles.css + qisas.css + sammlung.css. The page reuses
 * sammlung's RTL/Arabic-only treatment and adds the navy-and-gold tone
 * established by the SVG cover. */

.el-mina-body {
  background: var(--c-cream);
  overflow-x: hidden;
}

/* Override the qisas-hero-inner grid so el-mina cover gets ~half the hero width
   instead of the default 220-320px column (too small for the wide Promenade). */
.el-mina-body .qisas-hero-inner {
  grid-template-columns: minmax(380px, 560px) 1fr;
}
.el-mina-cover-fig {
  /* Promenade-Cover (2400×1121 ≈ 2.14:1) — natürliches Querformat */
  aspect-ratio: 2400 / 1121;
  width: 100%;
  margin: 0;
}
@media (max-width: 760px) {
  .el-mina-body .qisas-hero-inner { grid-template-columns: 1fr; }
}
.el-mina-cover-fig .qisas-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) brightness(1.0) saturate(1.02);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 14px 30px -14px rgba(15, 42, 64, .35),
    0 30px 60px -28px rgba(15, 42, 64, .28);
}

/* Hero typography — delegated to qisas.css (la-hila-li doctrine).
   qisas.css provides Cormorant for .t-de/.t-en (LTR) and Amiri for .t-ar (RTL).
   Sea-deep title color comes from .el-mina-body override on .poem-title-ar
   plus the data-mode-aware children of .qisas-hero-title. */
.el-mina-body .qisas-hero-title .t-ar { color: var(--c-sea-deep); }
.el-mina-body .qisas-hero-eyebrow { color: var(--c-eyebrow); }

/* Hero — instant render (no entrance cascade) */

@media (prefers-reduced-motion: reduce) {
  .el-mina-body .el-mina-cover-fig,
  .el-mina-body .qisas-hero-eyebrow,
  .el-mina-body .qisas-hero-title,
  .el-mina-body .qisas-hero-sub,
  .el-mina-body .qisas-hero-meta,
  .el-mina-body .qisas-hero-note {
    opacity: 1;
    animation: none;
  }
}

/* Hero — extra warmth that complements the sea-deep cover */
.el-mina-body .qisas-hero {
  background:
    radial-gradient(ellipse at 25% 30%, rgba(201, 166, 107, .12), transparent 60%),
    radial-gradient(ellipse at 75% 75%, rgba(15, 42, 64, .08), transparent 65%),
    linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream) 65%, #EFE4CD 100%);
}

/* About — warm sand with diagonal grain texture, ornament marker on top */
.el-mina-body .about.qisas-about {
  background-color: #EFE4CD;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(15, 42, 64, .035) 0 1px,
      transparent 1px 9px);
  position: relative;
}
.el-mina-body .about.qisas-about::before {
  content: "۞";
  position: absolute;
  top: -.95rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.6rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  background: var(--c-cream);
  color: var(--c-eyebrow);
  font-size: 1.15rem;
  opacity: .85;
  z-index: 1;
}

/* TOC — delegated to styles.css default (la-hila-li doctrine).
   Earlier parchment-cream override stripped for readability:
   blass Cream-on-cream text was nearly invisible. Now uses the same
   dark-paper background as la-hila-li with proper contrast. */

/* TOC layout delegated to styles.css `.toc-list` (la-hila-li doctrine):
   single-column grid, 4-col toc-link (num · DE · meta · AR),
   data-mode visibility rules. Page-specific accents only: */
.el-mina-body .toc-list .toc-link:hover,
.el-mina-body .toc-list .toc-link:focus-visible {
  border-color: var(--c-sea, var(--c-clay));
  box-shadow: 0 10px 22px -14px rgba(15, 42, 64, .25);
}
.el-mina-body .toc-list .toc-link .toc-num { color: var(--c-eyebrow); }

/* Poems main — let styles.css default handle the dark-paper background
   (consistent with la-hila-li). Just keep the padding. */
.el-mina-body main#poems {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  position: relative;
}

/* No `.poem-bg-overlay` override here — styles.css owns it (la-hila-li doctrine):
   warm clay fade tied to --poem-progress-n produces the brown dusk effect. */

/* Poem number with gold glyph — premium catalogue feel */
.el-mina-body .poem-num {
  color: var(--c-eyebrow);
  font-family: var(--sans-ui);
  letter-spacing: .18em;
  font-weight: 600;
}

/* Title typography — gold for AR everywhere on el-mina (hero + poem titles).
   Vorher sea-deep navy — User wuenschte 'gold' wie Memoir-Hero. */
.el-mina-body .poem-title-ar,
.el-mina-body .poem--photo .poem-title-de,
.el-mina-body .poem-title-de {
  color: var(--c-eyebrow) !important;
}
.el-mina-body .qisas-hero-title .t-ar,
.el-mina-body .qisas-hero-title .t-de span[lang="ar"],
.el-mina-body .qisas-hero-title .t-en span[lang="ar"] {
  color: var(--c-eyebrow);
}

/* Footer fade for closure */
.el-mina-body .site-foot {
  background:
    linear-gradient(180deg, var(--c-cream) 0%, #EFE4CD 100%);
  border-top: 1px solid rgba(15, 42, 64, .18);
}

/* Poem foot — back-to-TOC button with navy/gold tint */
.el-mina-body .poem-next--toc {
  color: var(--c-eyebrow);
  border: 1px solid rgba(201, 166, 107, .35);
  border-radius: 999px;
  padding: .6rem 1.4rem;
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  text-decoration: none;
  font-family: var(--sans-ui);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.el-mina-body .poem-next--toc:hover {
  background: var(--c-eyebrow);
  color: var(--c-cream);
  border-color: var(--c-eyebrow);
  transform: translateY(-1px);
}
.el-mina-body .poem-next--toc .t-ar {
  font-family: var(--serif-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: 1rem;
}

/* Poem ornament — gold mark before back-to-TOC button */
.el-mina-body .poem-ornament::after {
  content: "۞";
  font-family: var(--serif-ar);
  font-size: 1.4rem;
  color: var(--c-eyebrow);
  opacity: .55;
  display: block;
  text-align: center;
  margin: 1.5rem 0 .8rem;
}