/* Qisas — chapter reader styles
   Layered on top of styles.css. The Qisas page uses a three-mode language toggle
   (DE / EN / AR) instead of book.html's two-mode toggle, so we re-scope visibility
   inside .qisas-body. */

/* ============== MODE VISIBILITY (All / AR / DE / EN) ============== */
/* "all" — show every language stacked. DOM order is AR → DE → EN. */
html[data-mode="all"] .qisas-body .t-de,
html[data-mode="all"] .qisas-body .t-en,
html[data-mode="all"] .qisas-body .t-ar { display: block !important; }

/* In "all" mode, separate the three language blocks visually */
html[data-mode="all"] .qisas-body .ch-summary + .ch-summary {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(139, 90, 43, .18);
}
html[data-mode="all"] .qisas-body #qisas-preface-body > div + div {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(139, 90, 43, .18);
}

html[data-mode="de"] .qisas-body .t-en { display: none !important; }
html[data-mode="de"] .qisas-body .t-ar { display: none !important; }

html[data-mode="en"] .qisas-body .t-de,
html[data-mode="en"] .qisas-body .t-ar { display: none !important; }
html[data-mode="en"] .qisas-body .t-en { display: block !important; }

html[data-mode="ar"] .qisas-body .t-de,
html[data-mode="ar"] .qisas-body .t-en { display: none !important; }
html[data-mode="ar"] .qisas-body .t-ar { display: block !important; }

/* AR mode flips selected containers to RTL */
html[data-mode="ar"] .qisas-body .qisas-hero-inner,
html[data-mode="ar"] .qisas-body .about-inner,
html[data-mode="ar"] .qisas-body .qisas-preface-body,
html[data-mode="ar"] .qisas-body .qisas-toc,
html[data-mode="ar"] .qisas-body .ch-card { direction: rtl; }

/* Inline t-en/t-de spans inside titles need to be inline-flex friendly */
.qisas-body .qisas-hero-title .t-de,
.qisas-body .qisas-hero-title .t-en,
.qisas-body .qisas-hero-title .t-ar { display: block; }

/* ============== HERO with real cover ============== */
.qisas-hero {
  position: relative;
  background:
    linear-gradient(180deg, #f6efe2 0%, #efe3cd 60%, #e7d6b6 100%);
  color: var(--c-ink);
  padding: clamp(4.5rem, 8vw, 7rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.qisas-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(139, 90, 43, .08), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(15, 42, 64, .06), transparent 65%);
  z-index: -1;
}
.qisas-hero-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.qisas-cover-fig {
  margin: 0;
  position: relative;
  transform: rotate(-1.2deg);
  transition: transform .8s ease;
}
.qisas-cover-fig:hover { transform: rotate(0deg); }
.qisas-cover-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 12px 30px rgba(60,40,15,.18),
    0 30px 60px rgba(60,40,15,.12),
    0 1px 4px rgba(60,40,15,.2);
  background: #fff;
}
.qisas-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.qisas-hero-eyebrow {
  font-family: var(--sans-ui);
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--c-muted);
  margin: 0;
}
.qisas-hero-title {
  margin: 0;
  font-family: var(--serif-de);
  font-weight: 300;
  font-size: clamp(2.4rem, 1.6rem + 4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.qisas-hero-title em {
  font-style: italic;
  color: #8B5A2B;
  font-weight: 400;
}
.qisas-hero-title .t-ar {
  font-family: var(--serif-ar);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.5rem + 3.6vw, 3.8rem);
  line-height: 1.4;
  letter-spacing: 0;
}
.qisas-hero-sub {
  margin: 0;
  font-family: var(--serif-de);
  font-style: italic;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  color: var(--c-ink-2);
}
.qisas-hero-sub .t-ar {
  font-family: var(--serif-ar);
  font-style: normal;
  font-size: clamp(1.18rem, 1.05rem + .4vw, 1.4rem);
}
.qisas-hero-meta {
  margin: .25rem 0 0;
  font-family: var(--sans-ui);
  font-size: .85rem;
  color: var(--c-muted);
  letter-spacing: .04em;
}
.qisas-hero-note {
  margin-top: .75rem;
  font-family: var(--serif-de);
  font-size: .98rem;
  color: var(--c-ink-2);
  max-width: 38rem;
  line-height: 1.6;
}
.qisas-hero-note .t-ar { font-family: var(--serif-ar); }

/* Decorative ornament band below the hero — pulls the top arabesque
   from qisas-page-ornament.png and tiles it horizontally. */
.qisas-ornament-band {
  margin-top: clamp(3rem, 6vw, 5rem);
  height: 38px;
  background-image: url('assets/qisas-page-ornament.png');
  background-position: center top;
  background-size: auto 100%;
  background-repeat: repeat-x;
  opacity: .85;
  filter: sepia(.05) saturate(1.05);
}

@media (max-width: 760px) {
  .qisas-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .qisas-cover-fig {
    max-width: 240px;
    margin: 0 auto;
  }
  .qisas-hero-text { align-items: center; }
  .qisas-hero-note { text-align: center; }
}

/* ============== ABOUT (override portrait) ============== */
.qisas-about .about-portrait img {
  filter: none; /* full color for the recent portrait */
}

/* ============== PREFACE ============== */
.qisas-preface {
  padding: clamp(5rem, 9vw, 7.5rem) var(--gutter);
  background: linear-gradient(180deg, var(--c-cream) 0%, #f5ecdb 100%);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.qisas-preface-inner {
  max-width: 46rem;
  margin: 0 auto;
}
.qisas-preface-body {
  margin-top: 2.5rem;
  font-family: var(--serif-de);
  font-size: clamp(1.05rem, .98rem + .25vw, 1.18rem);
  line-height: 1.8;
  color: var(--c-ink);
}
.qisas-preface-body p { margin: 0 0 1.1em; }
.qisas-preface-body p:last-child { margin-bottom: 0; }
.qisas-preface-body .t-ar {
  font-family: var(--serif-ar);
  text-align: right;
  direction: rtl;
  font-size: clamp(1.18rem, 1.05rem + .35vw, 1.35rem);
  line-height: 2.15;
  letter-spacing: .005em;
}

/* ============== TABLE OF CONTENTS (override) ============== */
.qisas-toc { background: var(--c-cream); }
.qisas-toc .toc-list {
  max-width: 50rem;
  margin: 2.5rem auto 0;
  list-style: none;
  padding: 0;
  display: grid;
  gap: .25rem;
}
.qisas-toc .toc-link {
  display: grid;
  grid-template-columns: 2.4rem 1fr 3rem;
  gap: 1rem;
  padding: .9rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-ink);
  font-family: var(--serif-de);
  align-items: baseline;
  transition: background .25s, color .25s;
}
.qisas-toc .toc-link:hover { background: rgba(139, 90, 43, .07); }
.qisas-toc .toc-num {
  font-family: var(--sans-ui);
  font-size: .82rem;
  letter-spacing: .15em;
  color: var(--c-muted);
}
.qisas-toc .toc-title {
  font-size: clamp(1.05rem, .98rem + .25vw, 1.18rem);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: flex-start;
}
.qisas-toc .toc-title > span { display: block; }
.qisas-toc .toc-title .t-ar {
  font-family: var(--serif-ar);
  font-size: 1.18em;
  line-height: 1.5;
  font-weight: 700;
  color: #1a1a1a;
  align-self: flex-end;
  text-align: right;
  unicode-bidi: isolate;
  direction: rtl;
}
.qisas-toc .toc-title .t-de {
  color: var(--c-ink);
}
.qisas-toc .toc-title .t-en {
  font-style: italic;
  color: var(--c-muted);
  font-size: .92em;
}
.qisas-toc .toc-page {
  font-family: var(--sans-ui);
  font-size: .78rem;
  color: var(--c-muted);
  text-align: right;
  letter-spacing: .04em;
}

/* ============== CHAPTER CARDS ============== */
#chapters {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--c-cream);
}
.ch-card {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter);
  border-top: 1px solid rgba(122, 111, 98, .18);
}
.ch-card:first-child { border-top: 0; }

.ch-ornament {
  height: 28px;
  background-image: url('assets/qisas-page-ornament.png');
  background-position: center top;
  background-size: auto 100%;
  background-repeat: repeat-x;
  opacity: .6;
  margin-bottom: 2.5rem;
}
.ch-card:first-child .ch-ornament { display: none; }

.ch-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: start;
  margin-bottom: 1.6rem;
}
.ch-num {
  font-family: var(--serif-de);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  line-height: 1;
  color: #8B5A2B;
  opacity: .7;
}
.ch-titles {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.ch-title-ar {
  font-family: var(--serif-ar);
  direction: rtl;
  text-align: right;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.6;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0;
}
html[data-mode="ar"] .qisas-body .ch-title-ar { text-align: right; }
.ch-title-de, .ch-title-en {
  font-family: var(--serif-de);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem);
  line-height: 1.25;
  color: var(--c-ink);
  letter-spacing: -.005em;
}
.ch-meta {
  display: flex;
  gap: 1rem;
  margin-top: .35rem;
  font-family: var(--sans-ui);
  font-size: .76rem;
  color: var(--c-muted);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ch-meta .ch-label {
  font-style: normal;
  color: #8B5A2B;
  letter-spacing: .14em;
}

.ch-photo {
  margin: 1.8rem 0 2.2rem;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(60,40,15,.12);
}
.ch-photo img {
  width: 100%;
  display: block;
  height: auto;
  /* No forced aspect — natural ratio of the photo is preserved */
}
.ch-photo figcaption {
  font-family: var(--sans-ui);
  font-size: .78rem;
  color: var(--c-muted);
  letter-spacing: .04em;
  padding: .65rem 1rem;
  background: #fff;
  border-top: 1px solid rgba(122, 111, 98, .15);
}

.ch-summary {
  font-family: var(--serif-de);
  font-size: clamp(1.05rem, .98rem + .25vw, 1.18rem);
  line-height: 1.8;
  color: var(--c-ink);
  max-width: 38rem;
}
.ch-summary p { margin: 0 0 1.1em; }
.ch-summary p:last-child { margin-bottom: 0; }
.ch-summary.t-ar {
  font-family: var(--serif-ar);
  direction: rtl;
  text-align: right;
  font-size: clamp(1.18rem, 1.05rem + .35vw, 1.35rem);
  line-height: 2.15;
  letter-spacing: .005em;
  margin-left: auto;
  margin-right: 0;
}

/* "Read full story" CTA on chapter overview cards */
.ch-read-cta {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.6rem;
  background: #8B5A2B;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--sans-ui);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.ch-read-cta:hover {
  background: #6f4621;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(60, 40, 15, .35);
}
.ch-read-cta-arrow {
  font-size: 1.1rem;
  transition: transform .2s;
}
.ch-read-cta:hover .ch-read-cta-arrow { transform: translateX(3px); }
.ch-read-cta-label .t-ar {
  font-family: var(--serif-ar);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

/* Bookmark indicator on chapter number */
.ch-num {
  position: relative;
}
.ch-bookmark-indicator {
  position: absolute;
  top: -.35em;
  right: -1.3em;
  font-size: .9rem;
  color: #C9A66B;
  text-shadow: 0 1px 2px rgba(60, 40, 15, .15);
}
.ch-card--last-read .ch-bookmark-indicator {
  color: #8B5A2B;
  font-size: 1.1rem;
  text-shadow: 0 0 8px rgba(139, 90, 43, .4);
}
.ch-card--last-read {
  position: relative;
}
.ch-card--last-read::before {
  content: "Zuletzt gelesen";
  position: absolute;
  top: 1.5rem;
  right: var(--gutter);
  font-family: var(--sans-ui);
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #8B5A2B;
  font-weight: 600;
  background: rgba(139, 90, 43, .08);
  padding: .35rem .8rem;
  border-radius: 999px;
}

/* In AR mode, AR-summary stays right-aligned and large */
html[data-mode="ar"] .qisas-body .ch-summary {
  margin-left: auto; margin-right: 0; max-width: 40rem;
}

/* ============== SECTION LABELS (Synopsis / Story) ============== */
.ch-section-label {
  margin: 2.4rem 0 1.4rem;
  font-family: var(--sans-ui);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #8B5A2B;
  font-weight: 600;
  text-align: center;
  position: relative;
  padding: 0 1rem;
}
.ch-section-label::before,
.ch-section-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(2rem, 8vw, 4rem);
  height: 1px;
  background: rgba(139, 90, 43, .3);
}
.ch-section-label::before { left: 0; }
.ch-section-label::after  { right: 0; }
.ch-section-label .t-ar {
  font-family: var(--serif-ar);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.ch-section-label--story { margin-top: 3rem; }

/* ============== STORY BODY ============== */
.ch-body {
  font-family: var(--serif-de);
  font-weight: 300;
  font-size: clamp(1.05rem, .98rem + .25vw, 1.2rem);
  line-height: 1.75;
  color: var(--c-ink);
  max-width: 40rem;
  margin: 0 auto;
}
.ch-body p { margin: 0 0 1.1em; }
.ch-body p:last-child { margin-bottom: 0; }
.ch-body p::first-letter {
  /* drop-cap-ish for first paragraph of each language block */
  /* Subtle — only when ch-body has > 1 paragraphs */
}
.ch-body.t-ar {
  font-family: var(--serif-ar);
  direction: rtl;
  text-align: right;
  font-size: clamp(1.18rem, 1.05rem + .35vw, 1.35rem);
  line-height: 2.15;
  letter-spacing: .005em;
  margin-right: 0;
  margin-left: auto;
}
html[data-mode="ar"] .qisas-body .ch-body { max-width: 42rem; margin-left: auto; margin-right: 0; }

/* Drop-cap on the first paragraph of the Arabic story body */
.ch-body.t-ar > p:first-child::first-letter {
  font-size: 2.4em;
  line-height: .9;
  font-weight: 700;
  color: #8B5A2B;
  margin-left: .15em;
  vertical-align: -0.05em;
}
.ch-body:not(.t-ar) > p:first-child::first-letter {
  font-size: 2.6em;
  line-height: .9;
  font-weight: 400;
  font-style: italic;
  color: #8B5A2B;
  float: left;
  padding-right: .12em;
  margin-top: .08em;
}

.ch-body-pending {
  font-family: var(--serif-de);
  font-style: italic;
  color: var(--c-muted);
  text-align: center;
  font-size: .98rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(139, 90, 43, .06);
  border-radius: 4px;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
.ch-body-pending.t-ar,
.ch-body.t-ar .ch-body-pending {
  font-family: var(--serif-ar);
  direction: rtl;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 600px) {
  .ch-head {
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  .ch-num { font-size: 2.4rem; }
  .qisas-toc .toc-link {
    grid-template-columns: 2rem 1fr;
    gap: .6rem;
  }
  .qisas-toc .toc-page { display: none; }
}