/* =============================================================================
 * Rahkar — «درباره ما» (About) page  (rahkarchrome/about.tpl)
 * -----------------------------------------------------------------------------
 * Three stacked blocks: image on top, text underneath. Colours/type come from
 * tokens.css only. RTL-first: logical properties, no *_rtl.css companion
 * (see RAHKAR-THEME-GUIDE.md §4).
 * ========================================================================== */

/* The classic `.card.card-block` padding on #content would inset the page;
   this page spaces itself. */
body.page-about #content.page-content {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.rh-about {
  color: var(--wp--preset--color--text);
  font-weight: var(--rh-fw-base);
}

.rh-about :where(h1, p, figure) {
  margin: 0;
}

.rh-about__media {
  background: var(--wp--preset--color--surface);
}

.rh-about__media img {
  display: block;
  width: 100%;
  height: auto;
}

.rh-about__text {
  display: grid;
  gap: 1.1em;
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--md);
  line-height: 2;
  color: var(--wp--preset--color--text-muted);
}

.rh-about__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: var(--rh-fw-heading);
  line-height: 1.5;
  color: var(--wp--preset--color--text);
}

/* Photo inside a text column (under the founder's intro). The file is a
   transparent PNG-style webp, so no background, no radius: it sits straight
   on the sheet. Phones: edge to edge like every other photo. */
.rh-about__inline {
  margin-block-start: 0.4em;
  margin-inline: calc(50% - 50vw);
}

.rh-about__inline img {
  display: block;
  width: 100%;
  height: auto;
}

/* Every photo runs edge to edge; the text caps its own width. */
.rh-about__media {
  margin-inline: calc(50% - 50vw);
}

/* Header floats over the first photo, same as the homepage hero: #header
   leaves the flow and the page's top spacing goes, so the image starts at y=0.
   The hairline under the header is only for pages that start on plain
   background (header-glass.css), so it goes here too. Needs !important: that
   rule is keyed on `body:not(#index)`, which carries an id's specificity. */
/* 100vw blocks include the scrollbar width; clip (not hidden, which would break
   sticky) stops that from adding a horizontal scrollbar. */
body.page-about {
  overflow-x: clip;
}

body.page-about #header {
  position: fixed;
  inset-inline: 0;
  top: 0;
}

body.page-about #wrapper,
body.page-about #content-wrapper,
body.page-about #main,
body.page-about #content.page-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.page-about .rahkar-site-header,
body.page-about .rahkar-site-header.is-scrolled {
  border-bottom-color: transparent !important;
}

/* Hero photo: edge to edge, capped to the screen height so a tall portrait
   never pushes the text out of sight. It is sticky inside the article, so it
   stays put while the sheet scrolls over it. */
.rh-about__hero {
  position: sticky;
  top: 0;
  z-index: 0;
  margin-inline: calc(50% - 50vw);
  background: var(--wp--preset--color--surface);
}

.rh-about__hero img {
  display: block;
  width: 100%;
  max-height: 100svh;
  object-fit: cover;
  object-position: center top;
}

/* Frosted glass on every photo as its text scrolls over it: growing blur, a
   touch of extra saturation, and a slight zoom so the blurred edges never
   show. --rh-p (0..1) is set per photo by the inline script in about.tpl. */
.rh-about__hero,
.rh-about__media {
  position: relative;
  overflow: hidden;
  --rh-p: 0;
}

.rh-about__hero {
  position: sticky;
}

.rh-about__hero img,
.rh-about__media img {
  filter: blur(calc(var(--rh-p) * 15px)) saturate(calc(1 + var(--rh-p) * 0.18));
  transform: scale(calc(1 + var(--rh-p) * 0.06));
  will-change: filter, transform;
}

/* Milky wash over the blur: what makes it read as glass, not just out of focus. */
.rh-about__hero::after,
.rh-about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 248, calc(var(--rh-p) * 0.2));
  pointer-events: none;
}

/* Text sections: opaque, so they cover whichever photo is pinned behind them.
   The box-shadow/clip-path pair extends the background to the screen edges. */
.rh-about__sheet {
  position: relative;
  z-index: 1;
  padding-block: clamp(32px, 5vw, 64px);
  background: var(--wp--preset--color--base);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--base);
  clip-path: inset(0 -100vmax);
}

.rh-about__sheet:last-child {
  padding-block-end: clamp(48px, 8vw, 112px);
}

/* Phones: photos 2 and 3 pin to the top like the first, and the next text
   scrolls up over them. Capped to the screen height so a tall photo never
   hides its own text. */
@media (max-width: 767px) {
  .rh-about__media {
    position: sticky;
    top: 0;
    z-index: 0;
  }

  .rh-about__media img {
    max-height: 100svh;
    object-fit: cover;
  }
}

/* Desktop: three rows, photo on the physical left, text on the right. The
   grid is explicit (not left to auto-placement) because the page is RTL: column
   1 is the right-hand side. Each photo stays pinned while its text scrolls. */
@media (min-width: 768px) {
  .rh-about {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .rh-about__hero,
  .rh-about__media {
    grid-column: 2;
    position: sticky;
    top: 0;
    align-self: start;
    margin-inline: 0;
  }

  .rh-about__hero img,
  .rh-about__media img {
    height: 100svh;
    max-height: none;
    object-fit: cover;
    object-position: center top;
  }

  .rh-about__sheet {
    grid-column: 1;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: clamp(96px, 10vw, 160px) clamp(32px, 6vw, 112px);
    box-shadow: none;
    clip-path: none;
  }

  .rh-about__sheet:last-child {
    padding-block-end: clamp(96px, 10vw, 160px);
  }

  .rh-about__text {
    margin-inline: 0;
  }

  /* The text column is not centred on the screen here, so the phone's
     full-bleed margins would throw the photo sideways. Column width instead,
     capped in height so the sheet still fits a screen; contain, not cover,
     so nothing of the transparent artwork is cropped. */
  .rh-about__inline {
    margin-inline: 0;
  }

  .rh-about__inline img {
    max-height: 60svh;
    object-fit: contain;
  }

  /* Each photo's grid area runs from its own row to the end, so it stays
     pinned after its text is gone and the next photo slides up over it. */
  .rh-about > :nth-child(1) { grid-row: 1 / -1; }
  .rh-about > :nth-child(2) { grid-row: 1; }
  .rh-about > :nth-child(3) { grid-row: 2 / -1; }
  .rh-about > :nth-child(4) { grid-row: 2; }
  .rh-about > :nth-child(5) { grid-row: 3 / -1; }
  .rh-about > :nth-child(6) { grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-about__hero img,
  .rh-about__media img {
    filter: none;
    transform: none;
  }
}