/* ════════════════════════════════════════════════
   11 — PAGE-SPECIFIC STYLES
   Inner pages, prologue strip, quote intermission,
   companies legacy layout, books strip
   ════════════════════════════════════════════════ */

/* ──────── PROLOGUE STRIP ──────── */
.prologue {
  background: var(--cream);
  padding: 100px 0;
  position: relative;
  text-align: center;
}
.prologue__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.prologue__eyebrow {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  /* No letter-spacing — Arabic letters join; tracking breaks the script.
     No italic — Arabic doesn't have a true italic counterpart.
     No uppercase — Arabic has no letter case. */
  color: var(--maroon);
  opacity: 0.7;
}
.prologue__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.prologue__pillars span {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--maroon);
  padding: 6px 24px;
  position: relative;
}
.prologue__pillars span:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--olive-gold);
  opacity: 0.5;
}
.prologue__body {
  font-family: var(--font-arabic);
  font-size: var(--fs-body-lg);
  line-height: 1.85;
  color: var(--text-dark);
  font-weight: 400;
  max-width: 680px;
}

/* ──────── QUOTE INTERMISSION ──────── */
.quote-section {
  position: relative;
  overflow: hidden;
  background: var(--dark-teal);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  padding: clamp(80px, 12vw, 160px) 32px;
  text-align: center;
}

/* Photo — full-bleed cover, portrait stays visible behind the gradient */
.quote-section__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.quote-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center; /* keeps the portrait in frame on RTL leading edge */
  filter: contrast(1.06) saturate(0.92);
}

/* Dark gradient overlay — radial fade keeps text readable while preserving the photo */
.quote-section__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(43, 58, 53, 0.55) 0%, rgba(27, 38, 34, 0.95) 80%),
    linear-gradient(to bottom, rgba(27, 38, 34, 0.4), rgba(27, 38, 34, 0.85));
  pointer-events: none;
}

.quote-section__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.quote-section__mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(72px, 10vw, 140px);
  line-height: 0.4;
  color: var(--olive-gold);
  opacity: 0.55;
  height: clamp(36px, 5vw, 72px);
  display: flex;
  align-items: flex-end;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.quote-section__text {
  font-family: var(--font-arabic);
  font-size: clamp(26px, 3.4vw, 52px);
  font-weight: 200;
  color: var(--cream);
  line-height: 1.35;
  font-style: normal;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.quote-section__attribution {
  font-family: var(--font-serif);
  /* Renders Arabic ("— خالد محمد العمار الدوسري") — keep upright since the
     font file has no italic axis and Arabic-script italic would be a
     browser-synthesized skew that breaks the calligraphy. */
  font-style: normal;
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--olive-gold);
  letter-spacing: 0.06em;
  margin-top: 8px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .quote-section { padding: 80px 24px; min-height: 60vh; }
  .quote-section__bg img { object-position: center; }
  .quote-section__text { max-width: 100%; }

  /* The desktop overlay was tuned for a landscape photo where text sits in the
     empty right half. On mobile we now serve a portrait crop centered on the
     subject, so we lighten the overlay so he actually shows through. Still
     dark enough to keep the cream quote text legible. */
  .quote-section__overlay {
    background:
      radial-gradient(ellipse at center, rgba(43, 58, 53, 0.30) 0%, rgba(27, 38, 34, 0.78) 85%),
      linear-gradient(to bottom, rgba(27, 38, 34, 0.25), rgba(27, 38, 34, 0.70));
  }

  /* Tighten the prologue's vertical rhythm on mobile — at 375px wide the
     desktop 100px top/bottom padding leaves a gaping void between the hero
     and the first content (PROLOGUE eyebrow) ~184px tall. */
  .prologue { padding: 40px 0 64px; }
  .prologue__inner { gap: 18px; }
}

/* Maroon variant — used as the about-page closer to bookend with the
   page-hero. Same photo backdrop, maroon-tinted overlay so it reads
   differently from the homepage's teal version. */
.quote-section--maroon { background: var(--maroon-deep); }
.quote-section--maroon .quote-section__overlay {
  background:
    radial-gradient(ellipse at center, rgba(108, 26, 49, 0.55) 0%, rgba(58, 14, 26, 0.95) 80%),
    linear-gradient(to bottom, rgba(58, 14, 26, 0.4), rgba(58, 14, 26, 0.85));
}
@media (max-width: 768px) {
  .quote-section--maroon .quote-section__overlay {
    background:
      radial-gradient(ellipse at center, rgba(108, 26, 49, 0.30) 0%, rgba(58, 14, 26, 0.78) 85%),
      linear-gradient(to bottom, rgba(58, 14, 26, 0.25), rgba(58, 14, 26, 0.70));
  }
}

/* Stacked variant — supports multiple blockquotes in a single intermission.
   The about page uses this to show 2 aphorisms back-to-back. */
.quote-section__inner--stack { gap: 36px; }
.quote-section__text--md {
  font-size: clamp(20px, 2.6vw, 36px);
  line-height: 1.45;
  max-width: 22ch;
}
.quote-section__inner--stack .quote-section__text + .quote-section__text {
  /* Subtle separator between stacked quotes — a hairline gold mark */
  position: relative;
  padding-top: 36px;
}
.quote-section__inner--stack .quote-section__text + .quote-section__text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--olive-gold);
  opacity: 0.5;
}

/* ──────── BOOKS STRIP ──────── */
.books-strip {
  background: var(--cream);
  padding: 100px 0;
  position: relative;
}
.books-strip__header {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 32px;
}
.books-strip__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  display: block;
  margin-bottom: 12px;
}
.books-strip__title {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: var(--fs-section);
  color: var(--maroon);
  line-height: 1.1;
}
.books-strip__scroll {
  display: flex;
  gap: 32px;
  justify-content: safe center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 16px 32px 24px;
  scrollbar-width: none;
}
.books-strip__scroll::-webkit-scrollbar { display: none; }
.book-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  text-align: center;
}
.book-card__cover {
  display: block;
  aspect-ratio: 3/4;
  background: var(--maroon-pale, rgba(82,22,36,0.08));
  border: 1px solid rgba(184, 168, 124, 0.3);
  margin-bottom: 16px;
  transition: transform 0.4s ease;
  overflow: hidden;
}
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card:hover .book-card__cover { transform: translateY(-4px); }
.book-card__title {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: 17px;
  color: var(--maroon);
  margin-bottom: 4px;
}
.book-card__year {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
}

/* ──────── PAGE HERO (Inner pages) ──────── */
.page-hero {
  padding: 180px 32px 100px;
  background: var(--maroon);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--maroon-light) 0%, var(--maroon) 60%, var(--maroon-deep) 100%);
  z-index: -1;
}
.page-hero__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-gold);
  display: block;
  margin-bottom: 16px;
}
.page-hero h1 {
  font-family: var(--font-arabic);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ──────── PRESERVED FROM OLD CSS (Companies, About, etc.) ──────── */

.philosophy-section {
  background: var(--dark-teal);
  padding: var(--section-padding) 24px;
  text-align: center;
}
.philosophy-section h3 {
  font-family: var(--font-arabic);
  font-size: 1.6em; font-weight: 700;
  color: var(--cream); margin-bottom: 20px;
  letter-spacing: 0.05em;
}
.philosophy-section p {
  color: rgba(227, 227, 213, 0.85); font-size: 1.05em; line-height: 1.9;
  max-width: 700px; margin: 0 auto 24px;
}
.philosophy-tags {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap; margin-top: 20px;
}
.philosophy-tags span {
  color: var(--cream); font-weight: 500; font-size: 1em;
}
.philosophy-tags span:not(:last-child)::after {
  content: '|'; margin: 0 16px;
  color: var(--olive-gold); font-weight: 400;
}
.philosophy-closing {
  color: rgba(227, 227, 213, 0.75); font-size: 1em; line-height: 1.9;
  max-width: 700px; margin: 16px auto 0;
}

/* About preview (homepage about) */
.about-preview {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 900px; margin: 0 auto;
}
.about-roles {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap; margin-bottom: 40px;
}
.about-roles span {
  color: var(--maroon); font-weight: 700; font-size: 1.1em;
}
.about-roles span:not(:last-child)::after {
  content: '|'; margin: 0 16px;
  color: var(--olive-gold); font-weight: 400;
}
.about-preview__text p {
  color: var(--text-dark); font-size: 1.05em;
  margin-bottom: 16px; line-height: 1.9;
  text-align: center;
}

/* ════════ BIO HERO — editorial full-bleed portrait opener ════════
   Film-poster treatment: a real photograph graded into the maroon brand
   field via a B&W + luminosity blend (resolution-forgiving), the figure
   "emerging" from the colour with a bottom fade so the large calligraphic
   name sits on near-solid maroon for legibility. Replaces the old page-hero
   + composite poster so the page opens with ONE strong cinematic statement
   instead of two stacked maroon blocks. */
.bio-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  background: var(--maroon);
}

/* The photograph, desaturated and blended into the maroon field */
.bio-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bio-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep his face in frame as the section gets wider/taller */
  object-position: center 22%;
  /* Duotone: strip colour, then luminosity-blend over the maroon bg so the
     photo takes on the maroon hue. Softness of the source reads as cinematic
     grade rather than low-res. */
  filter: grayscale(1) contrast(1.06) brightness(0.92);
  mix-blend-mode: luminosity;
  opacity: 0.9;
}

/* Maroon grade — lighter over the face (top), fading to near-solid at the
   bottom where the name sits, plus a slight side vignette */
.bio-hero__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(58, 14, 26, 0.45) 0%,
      rgba(58, 14, 26, 0.10) 28%,
      rgba(58, 14, 26, 0.55) 68%,
      rgba(58, 14, 26, 0.92) 88%,
      var(--maroon-deep) 100%),
    radial-gradient(ellipse at center 35%,
      transparent 35%,
      rgba(58, 14, 26, 0.55) 100%);
}

/* Subtle film grain */
.bio-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bio-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 120px 40px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Top row — kicker (السيرة الذاتية) + Latin eyebrow on opposite edges */
.bio-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.bio-hero__kicker {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  color: var(--olive-gold);
  letter-spacing: 0.02em;
}
.bio-hero__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.72;
}
.bio-hero__eyebrow em { font-style: italic; color: var(--olive-gold); }

/* Bottom title block — big calligraphic name */
.bio-hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.bio-hero__mark {
  width: 120px;
  height: 18px;
  color: var(--olive-gold);
  opacity: 0.8;
}
.bio-hero__mark svg { width: 100%; height: 100%; display: block; }
.bio-hero__name {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: clamp(34px, 5.5vw, 76px);
  line-height: 1.12;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(8, 10, 14, 0.5);
}
.bio-hero__name em {
  font-style: normal;
  color: var(--olive-gold);
}

/* ──────── BIO NARRATIVE — clean editorial column on cream ──────── */
.bio-narrative {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.bio-narrative__chapter {
  display: inline-block;
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  color: var(--maroon);
  opacity: 0.6;
  margin-bottom: 28px;
  position: relative;
  padding-bottom: 16px;
}
.bio-narrative__chapter::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--olive-gold);
}
.bio-narrative__body p {
  font-family: var(--font-arabic);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: 1.95;
  color: var(--text-dark);
  margin: 0 0 18px;
}
.bio-narrative__body p:first-child {
  /* Lead paragraph slightly larger — editorial drop-in */
  font-size: clamp(19px, 1.5vw, 23px);
  color: var(--maroon-deep);
  line-height: 1.8;
}
.bio-narrative__body p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .bio-hero { min-height: 78vh; }
  .bio-hero__inner { padding: 100px 24px 48px; }
  .bio-hero__photo img { object-position: center 18%; }
}

/* ──────── BIO FEATURE (about page narrative wrapper — divider + stats) ──────── */
.bio-feature {
  background: var(--cream);
  padding: 80px 32px 100px;
  position: relative;
}
.bio-feature__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 72px;
  align-items: start;
}

/* Portrait photo with offset olive-gold accent frame (echoes the homepage
   hero's portrait + logo composite treatment). */
.bio-feature__media {
  margin: 0;
  position: relative;
}
/* ────── BIO COMPOSITE (mini-hero treatment for the bio portrait) ──────
   Replaces the old flat photo card. Mimics the homepage hero composite:
   maroon gradient backdrop + transparent portrait cutout + brand logo
   overlaid as a calligraphic signature. Wrapped in an offset olive-gold
   accent frame so it still reads as a "framed portrait" within the cream
   bio section. */
.bio-feature__composite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;            /* reset <figure>'s 40px UA default lateral margin */
  aspect-ratio: 3 / 4;
  padding: 22px 24px 26px;
  background: radial-gradient(
    ellipse at center 40%,
    var(--maroon-light) 0%,
    var(--maroon) 50%,
    var(--maroon-deep) 100%
  );
  overflow: hidden;
  isolation: isolate;
  /* Subtle inner shadow so the cinematic card has dimension */
  box-shadow: inset 0 0 80px rgba(8, 10, 14, 0.35);
}

/* Subtle film-grain noise — same SVG as the homepage hero, scoped here */
.bio-feature__composite::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.6;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* Najdi pattern ornaments — small olive-gold marks at top + bottom of the
   plate, framing the portrait + logo like a commemorative poster */
.bio-feature__composite-ornament {
  position: relative;
  z-index: 2;
  width: 110px;
  height: 16px;
  color: var(--olive-gold);
  opacity: 0.75;
  flex: 0 0 auto;
}
.bio-feature__composite-ornament svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Portrait — transparent PNG cutout. The source PNG (1500×1000) has the
   figure centered with lots of transparent space around it, so we need both
   a generous max-height AND a transform-scale to visually enlarge Khaled
   to fill the upper plate area. Overflow: hidden on the composite clips
   any tiny spillover. */
.bio-feature__portrait {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 85%;
  object-fit: contain;
  object-position: center top;
  /* Scale the image visually — enlarges the figure since the surrounding
     transparency doesn't matter, while the logo plate below stays put */
  transform: scale(1.30);
  transform-origin: center top;
  filter: contrast(1.04) saturate(1.06);
  inset: auto;
  margin: 0;
}

/* Logo plate — calligraphic name + Latin subtitle, sits BELOW the portrait
   (not overlapping it) as a poster-style title plate */
.bio-feature__logo-overlay {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 82%;
  max-width: 280px;
  height: auto;
  opacity: 0.97;
  pointer-events: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.4));
  /* Reset from previous absolute positioning */
  top: auto;
  left: auto;
  transform: none;
}

/* Offset olive-gold accent frame OUTSIDE the composite card, kept from the
   prior design so the bio still reads as a framed portrait on cream */
.bio-feature__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--olive-gold);
  transform: translate(14px, 14px);
  z-index: -1;
  pointer-events: none;
}

/* Content column — eyebrow / chapter / headline / body */
.bio-feature__content { padding-top: 8px; }

.bio-feature__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.15vw, 17px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  /* Inverse — on cream we want a dark italic accent, not cream */
  color: var(--maroon-deep);
  opacity: 0.78;
  display: block;
}
.bio-feature__eyebrow em {
  font-style: normal;
  color: var(--olive-gold);
}

.bio-feature__chapter {
  display: block;
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  color: var(--maroon);
  opacity: 0.65;
  margin-top: 10px;
}

.bio-feature__headline {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.25;
  color: var(--maroon);
  letter-spacing: -0.005em;
  margin: 18px 0 28px;
}
.bio-feature__headline em {
  font-style: normal;
  font-weight: 600;
  color: var(--olive-gold);
  /* Subtle calligraphic emphasis on the lineage part */
}

.bio-feature__body p {
  font-family: var(--font-arabic);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: 1.85;
  color: var(--text-dark);
  margin: 0 0 16px;
}
.bio-feature__body p:last-child { margin-bottom: 0; }

/* The Najdi divider auto-styles itself; just tighten the padding so the
   transition between bio and the stat band feels intentional, not lonely. */
.bio-feature__divider { padding: 48px 24px 40px; }

/* Full-width stat band — reuses .stat-band from 08-stats.css but allows
   wrapping for the 5 bio stats which is more than the homepage's 3. */
.bio-feature__stats {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}
.stat-band--wrap {
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 56px;
}

/* On cream surfaces, swap the default cream label color (designed for
   dark-photo homepage stat bands) for the muted dark text. Numerals stay
   olive-gold to preserve the brand signature. */
.bio-feature .stat__label { color: var(--text-muted); opacity: 0.85; }
.bio-feature .stat-band > .stat:not(:first-child) {
  border-inline-start-color: rgba(82, 22, 36, 0.12);
}

/* Mobile: stack photo above content, ease padding, reduce frame offset */
@media (max-width: 900px) {
  .bio-feature__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bio-feature__media {
    max-width: 320px;
    margin-inline: auto;
  }
  .bio-feature__media::after { transform: translate(10px, 10px); }
}
@media (max-width: 600px) {
  .bio-feature { padding: 48px 24px 64px; }
  .bio-feature__headline { font-size: clamp(22px, 6vw, 32px); margin: 14px 0 20px; }
  .bio-feature__body p { font-size: 16px; }
  .bio-feature__divider { padding: 28px 16px 20px; }
  .stat-band--wrap { gap: 24px 32px; }
}

.pills { display: flex; gap: 12px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; background: var(--cream);
  border-radius: 30px; font-size: 0.95em;
  color: var(--maroon); font-weight: 500;
  border: 1px solid var(--cream-dark); transition: all 0.3s;
}
.pill:hover { border-color: var(--olive-gold); background: rgba(82, 22, 36, 0.08); }

/* Flag emojis inside pills — WordPress's emoji.css forces height/width to
   1em with !important; we need !important to override and bump to ~1.5em
   so flags read with more presence next to the pill labels. */
.pill img.emoji {
  height: 1.5em !important;
  width: auto !important;
  vertical-align: -0.3em;
}

.timeline { position: relative; max-width: 800px; margin: 0 auto; }
.timeline::before { content: ''; position: absolute; right: 20px; width: 2px; height: 100%; background: var(--cream-dark); }
.tl-item { display: flex; align-items: flex-start; margin-bottom: 32px; position: relative; padding-right: 52px; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--olive-gold); border: 3px solid var(--cream); position: absolute; right: 14px; top: 24px; z-index: 1; }
.tl-content { flex: 1; padding: 24px 28px; background: var(--cream); border: 1px solid var(--cream-dark); transition: border-color 0.3s; }
.tl-content:hover { border-color: var(--olive-gold); }
.tl-year { color: var(--maroon); font-weight: 700; font-size: 0.9em; margin-bottom: 6px; }
.tl-content h4 { font-family: var(--font-arabic); color: var(--maroon); font-size: 1.1em; margin-bottom: 4px; }
.tl-content p { color: var(--text-muted); font-size: 0.9em; }

/* (Old .blockquote-section / .quote-banner rules removed — about page now
   uses the cinematic .quote-section pattern with the --maroon variant.) */

/* Books page (full grid) */
.books-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.article-list { display: flex; flex-direction: column; gap: 16px; }
.article-item { display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: var(--cream); border: 1px solid var(--cream-dark); transition: all 0.3s; }
.article-item:hover { border-color: var(--olive-gold); transform: translateX(-4px); }
.article-item__icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(82, 22, 36, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--maroon); font-size: 1.2em; }
.article-item__title { font-family: var(--font-arabic); font-size: 1.05em; color: var(--maroon); }

/* Media page */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.video-card { background: rgba(255,255,255,0.03); overflow: hidden; border: 1px solid rgba(184, 168, 124, 0.15); transition: all 0.35s; }
.video-card:hover { border-color: var(--olive-gold); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.3); }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-card__title { font-family: var(--font-arabic); color: var(--olive-gold); font-size: 1em; padding: 16px 20px; text-align: center; }

.gallery-category { margin-bottom: 48px; }
.gallery-category:last-child { margin-bottom: 0; }
.gallery-cat-title { font-family: var(--font-arabic); font-size: 1.3em; color: var(--maroon); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--cream-dark); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.gallery-grid img { width: 100%; height: auto; cursor: pointer; transition: all 0.3s; border: 2px solid transparent; }
.gallery-grid img:hover { border-color: var(--olive-gold); transform: scale(1.03); }

/* Contact page */
.contact-content { max-width: 600px; margin: 0 auto; text-align: center; }
.contact-info { margin-bottom: 40px; }
.contact-info__item { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 0; font-size: 1.1em; color: var(--text-muted); }
.contact-info__item svg { width: 20px; height: 20px; color: var(--maroon); }
.contact-info__item a { color: var(--maroon); transition: color 0.3s; }
.contact-info__item a:hover { color: var(--olive-gold); }
.social-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.social-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border: 1.5px solid var(--maroon); color: var(--maroon); font-size: 0.95em; font-weight: 500; transition: all 0.35s; }
.social-link:hover { background: var(--maroon); color: var(--cream); }
.social-link svg { width: 18px; height: 18px; }

/* Companies grid (legacy + new feature variant) */
.companies-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.company-col { text-align: right; }
.company-col__title { font-family: var(--font-arabic); font-size: 1.1em; font-weight: 700; color: var(--maroon); margin-bottom: 16px; }
.company-col__desc { color: var(--text-muted); font-size: 0.93em; line-height: 1.8; margin-bottom: 20px; }

/* Cards grid */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card { background: transparent; border-radius: 0; padding: 24px 0; border: none; border-top: 2px solid var(--olive-gold); transition: all 0.3s ease; }
.card__category { display: inline-block; padding: 0; background: none; color: var(--maroon); border-radius: 0; font-size: 0.85em; font-weight: 600; margin-bottom: 10px; }
.card__title { font-family: var(--font-arabic); font-size: 1.1em; color: var(--text-dark); margin-bottom: 8px; }
.card__desc { color: var(--text-muted); font-size: 0.95em; line-height: 1.7; }
.card--dark { background: rgba(255,255,255,0.03); border-color: rgba(184, 168, 124, 0.2); }
.card--dark:hover { border-color: var(--olive-gold); }
.card--dark .card__title { color: var(--olive-gold); }
.card--dark .card__desc { color: var(--cream); opacity: 0.7; }

@media (max-width: 1024px) {
  .companies-grid { grid-template-columns: repeat(2, 1fr); }
  .bio-section { grid-template-columns: 260px 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .companies-grid { grid-template-columns: 1fr; }
  .bio-section { grid-template-columns: 1fr; }
  .bio-image { max-width: 300px; margin: 0 auto; }
  .bio-stats { justify-content: center; }
  .page-hero { padding: 130px 24px 60px; }
  .cards-grid { grid-template-columns: 1fr; }
  .tl-item { padding-right: 44px; }
  .videos-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .social-links { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .bio-stats { flex-direction: column; gap: 20px; align-items: center; }
  .gallery-grid { grid-template-columns: 1fr; }
  .pills { justify-content: center; }
  .philosophy-tags { flex-direction: column; gap: 12px; }
  .philosophy-tags span:not(:last-child)::after { display: none; }
}

/* ──────── PHOTO LIBRARY (مكتبة الصور) ──────── */
.photo-library { background: var(--cream); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px 28px;
  margin: 0;
  padding: 0;
}

.photo-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: transparent;
}

.photo-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(82, 22, 36, 0.06);
  border: 1px solid rgba(184, 168, 124, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.photo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.photo-card__media:hover {
  box-shadow: 0 18px 40px -20px rgba(8, 10, 14, 0.35);
  transform: translateY(-3px);
}
.photo-card__media:hover img { transform: scale(1.04); }

.photo-card__media--placeholder {
  background:
    repeating-linear-gradient(45deg, rgba(184,168,124,0.10) 0 6px, transparent 6px 12px),
    rgba(82, 22, 36, 0.04);
}

.photo-card__caption {
  padding: 14px 4px 0;
}
.photo-card__title {
  font-family: var(--font-arabic);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  color: var(--maroon);
  margin: 0 0 6px;
}
.photo-card__desc {
  font-family: var(--font-arabic);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  /* Cap caption to 3 lines so a long description doesn't blow up grid rows.
     The full text is still readable via the linked lightbox open (full image)
     and in the admin. Bump this if your client wants longer captions. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.photo-library__empty {
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-arabic);
  padding: 40px 0;
}

@media (max-width: 768px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 20px; }
}
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: 1fr; gap: 28px; }
  .photo-card__media { aspect-ratio: 3 / 2; }
}

/* ──────── INTERESTS SECTION (about page — cinematic horse photo bg) ──────── */
.interests-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--near-black);
  /* Match the homepage feature section padding so this reads as a cinematic
     intermission, not just an inline block of pills */
  padding: clamp(80px, 12vw, 140px) 32px;
  text-align: center;
}

.interests-section__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.interests-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the rider's face + horse's head in frame on the leading (RTL) edge
     across viewport widths */
  object-position: 70% center;
  filter: contrast(1.04) saturate(0.95);
}

.interests-section__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Lightened so the horse photo reads more clearly. Still dark enough at the
     edges (top/bottom) to keep the cream title + pills + intro paragraph
     legible against the photo. */
  background:
    radial-gradient(ellipse at center, rgba(8, 10, 14, 0.25) 0%, rgba(8, 10, 14, 0.65) 80%),
    linear-gradient(to bottom, rgba(8, 10, 14, 0.20), rgba(8, 10, 14, 0.55));
  pointer-events: none;
}

.interests-section__content {
  position: relative;
  z-index: 1;
}

/* Override the inherited cream defaults for this dark-bg section */
.interests-section .section-title {
  color: var(--cream);
}
.interests-section .section-line {
  background: var(--olive-gold);
  opacity: 0.85;
}
.interests-section .section-intro,
.interests-section .section-intro strong {
  color: var(--cream);
  opacity: 0.92;
}
.interests-section .section-intro strong {
  color: var(--olive-gold);
  font-weight: 500;
}

/* Pills on the dark backdrop need their own treatment — the cream-on-cream
   default disappears. Make them translucent with a gold outline. */
.interests-section .pill {
  background: rgba(8, 10, 14, 0.45);
  border-color: rgba(184, 168, 124, 0.4);
  color: var(--cream);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.interests-section .pill:hover {
  border-color: var(--olive-gold);
  background: rgba(82, 22, 36, 0.45);
}

@media (max-width: 768px) {
  .interests-section { padding: 64px 24px; }
  /* Mobile: shift the photo crop slightly so the horse's eye stays in frame
     when the viewport is portrait */
  .interests-section__bg img { object-position: 65% center; }
}