/* ==========================================================================
   Section: Editorial — "زیبایی آرام‌تر از آن است که فریاد بزند"
   Soft charcoal. One composition: the still life is the ground, the sentence
   rests on its calm wall, and the hand overlaps its edge like a second print
   laid on the first — reaching toward the empty dish.
   Geometry uses container units (cqw) of .editorial__grid so the overlap is
   the same at every width.
   WordPress: template-parts/editorial.php
   ========================================================================== */

.editorial {
  padding-block: var(--s-9) var(--s-10);
}

.editorial .kicker {
  --kicker-color: var(--c-paper-muted);
  margin-block-end: var(--s-7);
}

.editorial__grid {
  container-type: inline-size;
}

.editorial__stage {
  position: relative;
}

/* ---- Mobile: sentence → still life → hand overlapping its lower corner ---- */
.editorial__words {
  display: grid;
  gap: var(--s-5);
  margin-block-end: var(--s-7);
}

.editorial__quote {
  font-size: var(--t-quote);
  font-weight: var(--w-light);
  line-height: 1.85;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-inline-size: 13em;
}

.editorial__rule {
  block-size: var(--hairline);
  inline-size: 4rem;
  background: var(--c-rule-dark);
}

.editorial__still {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  --frame-bg: #c8ab8e;
}

.editorial__hands {
  position: relative;
  z-index: 1;
  inline-size: 60cqw;
  aspect-ratio: 4 / 5;
  /* rises over the velvet at the bottom-right of the still life (the dish stays clear) */
  margin-block-start: -10.5cqw;
  margin-inline-start: 0;                         /* physical right in RTL */
  margin-inline-end: auto;
  --frame-bg: #c7a58a;
  /* a thin band of the page colour separates the two prints
     (a border, not a shadow: the reveal's clip-path would cut a shadow off) */
  border: 0.375rem solid var(--c-charcoal-soft);
  background-clip: content-box;
}

/* ---- Wide screens: one overlapping spread -------------------------------- */
@media (min-width: 64em) {
  .editorial__stage {
    /* still: 62cqw × 41.3cqw · hand: 30cqw × 37.5cqw from 25cqw down
       (overlapping the still's left edge by 4cqw, short of the dish) */
    block-size: 62.5cqw;
  }

  .editorial__still {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;                        /* physical right */
    inline-size: 62cqw;
  }

  /* the sentence sits on the calm wall in the still life's right half */
  .editorial__words {
    position: absolute;
    z-index: 2;
    inset-block-start: 4.5cqw;
    inset-inline-start: 3.5cqw;
    inline-size: 26cqw;
    margin: 0;
    color: var(--c-ink);
  }

  .editorial__quote {
    font-size: clamp(1.375rem, 0.9rem + 1vw, 1.875rem);
  }

  .editorial__words .editorial__rule {
    background: rgb(17 17 17 / 0.35);
    inline-size: 5rem;
  }

  /* the hand overlaps the still life's left edge, fingers toward the dish */
  .editorial__hands {
    position: absolute;
    inset-block-start: 25cqw;
    inset-inline-end: 12cqw;                      /* physical left */
    inline-size: 30cqw;
    margin: 0;
    border-width: 0.5rem;
  }

  /* The charcoal sentence is only legible on the light still life beneath it,
     never on the page tone (cream → charcoal). Keep it hidden until the
     image's reveal has finished, then fade it in on top of the image. */
  .js .editorial__grid:has(.editorial__still:not(.is-visible)) .editorial__words [data-reveal] {
    opacity: 0;
    transform: none;
  }

  .js .editorial__grid:has(.editorial__still.is-visible) .editorial__words [data-reveal] {
    transition-delay: 1400ms;
  }
}