/* =============================================================================
   about.css — "About" page content
   Used only on pages/about.html.

   This is the CONSOLIDATED final About page, per explicit request: the
   site previously had two versions — the original 3-image "About Me"
   layout and an alternative "About Me 2" layout with one continuous text
   block + a single closing image. The original was deleted and this
   alternative was renamed to become the only About page ("About Me 2" →
   "About"). Component naming reverts to the plain .about__ prefix (no
   longer .about-alt__) now that there's only one About page and no
   naming-collision risk.

   Component ownership:
     .about__content        — plain wrapper around the intro heading +
                               both paragraphs, so they read as one
                               continuous block with no image between them
     .about__intro-heading  — 16px Regular, "Daniel Ortiz Studio" (pink
                               accent) + line break + second line (white),
                               centered on mobile, left-aligned + capped
                               560px on desktop
     .about__intro-heading-accent — "Daniel Ortiz Studio" in the existing
                               pink accent color (var(--color-rose-400))
     .about__body            — body paragraph, 16px Regular ("D16 Regular")
     .about__image-wrap      — positioning/spacing wrapper around the
                               single closing image (mobile scroll-reveal +
                               parallax split, js/home-reveal.js — see that
                               file)
     .about__image           — the photo itself, natural aspect ratio

   Spacing chain, mobile (all margin-top, so every gap is owned by the
   element that follows):
     page-title → intro-heading:  32px desktop / 8px mobile (same
                                   .section-title-bar 72px-zone adjustment
                                   used sitewide for this role)
     intro-heading → paragraph 1: 16px (.about__body, same value as
                                   Process's own intro-heading → intro-body
                                   gap, .process__intro-body)
     paragraph 1 → paragraph 2:   16px (.about__body, same rule — applies
                                   uniformly to every body paragraph in the
                                   continuous block)
     text block → image:          24px mobile / 56px desktop
                                   (.about__image-wrap, same values as
                                   .process__stage-image-wrap)
     image → footer:              64px, mobile AND desktop (see "Footer
                                   spacing" below) — the final distance,
                                   not additional space on top of any
                                   existing margin (there wasn't one).

   Alignment: centered on mobile (text and image both), left-aligned on
   desktop.

   Image sizing, per explicit request: desktop 80% of the column width,
   mobile 90% of the breakout width — see "Image sizing" below. Aspect
   ratio preserved automatically at both sizes (only width changes; height
   stays auto).

   Desktop column width: .content-container is narrowed from its sitewide
   760px default to 700px, left-aligned — identical mechanism to
   process.css / commission.css's own copies of this same rule.
   ============================================================================= */


/* ── Desktop column width ─────────────────────────────────────────────────
 * Same mechanism as process.css / commission.css's own identical rule.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .content-container {
    max-width: 700px;
    align-self: flex-start;
  }
}


/* ── Continuous text block wrapper ────────────────────────────────────────
 * Purely structural — no spacing/styling of its own. Groups the intro
 * heading and both paragraphs so they read as one block; every gap inside
 * it is owned by the element that needs it (see spacing chain above).
 * ────────────────────────────────────────────────────────────────────── */

.about__content {
  width: 100%;
}


/* ── Intro statement ──────────────────────────────────────────────────────
 * "Daniel Ortiz Studio" wrapped in .about__intro-heading-accent (existing
 * pink accent color — var(--color-rose-400)) followed by a manual <br>
 * and then "is a personal exploration of the quiet beauty found in
 * nature" in the base white color, 16px Regular (not bold). Centered on
 * mobile, left-aligned + capped to 560px on desktop.
 * ────────────────────────────────────────────────────────────────────── */

.about__intro-heading {
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px */
  font-weight: 400;                    /* Regular */
  color: var(--color-white);           /* base color for the second line */
  text-align: center;                  /* mobile */
  margin: 0;
  margin-top: var(--space-8);          /* 32px below the page title (desktop value; reduced below for mobile) */
  line-height: 1.5;
}

.about__intro-heading-accent {
  color: var(--color-rose-400);        /* existing pink accent token — same one used by .home-hero__lead */
  font-weight: inherit;
}

/* Mobile only: same .section-title-bar 72px-zone adjustment used
   sitewide by this role (.process__intro-heading, etc.). */
@media (max-width: 1023px) {
  .about__intro-heading {
    margin-top: var(--space-2);        /* 8px — visible gap lands at ~29.6px */
  }
}


/* ── Body paragraphs ──────────────────────────────────────────────────────
 * 16px Regular ("D16 Regular"). Both paragraphs share this one class —
 * margin-top: 16px applies uniformly above each one (intro-heading →
 * paragraph 1, and paragraph 1 → paragraph 2), matching Process's own
 * intro-heading → intro-body gap (.process__intro-body, 16px).
 * ────────────────────────────────────────────────────────────────────── */

.about__body {
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px — "D16 Regular" */
  font-weight: 400;                    /* Regular */
  color: var(--color-gray-100);        /* #B8B8B8 — same body-copy grey token used sitewide */
  text-align: center;                  /* mobile */
  margin: 0;
  margin-top: var(--space-4);          /* 16px above each paragraph */
  line-height: 1.5;
}


/* ── Image wrapper ────────────────────────────────────────────────────────
 * Same wrapper/child split used sitewide (.process__stage-image-wrap) so
 * the CSS-driven reveal transform and the JS-driven parallax transform
 * never fight over the same `transform` property on the same element.
 * ────────────────────────────────────────────────────────────────────── */

.about__image-wrap {
  display: block;
  margin-top: var(--space-6);          /* 24px above the image (mobile base) — same value as .process__stage-image-wrap */
  position: relative;
}

@media (min-width: 1024px) {
  .about__image-wrap {
    margin-top: var(--space-14);       /* 56px — same desktop widening as .process__stage-image-wrap */
  }
}


/* ── Footer spacing ───────────────────────────────────────────────────────
 * 64px of vertical space between the bottom of the image and the footer,
 * per explicit request — the FINAL total distance (there was no prior
 * margin-bottom on this element at all, so this value alone is the whole
 * gap, not an addition on top of anything). Applies to both mobile and
 * desktop (both were requested at the same 64px value), so it's set here
 * once, unconditionally, rather than duplicated inside two separate media
 * queries.
 * ────────────────────────────────────────────────────────────────────── */

.about__image-wrap {
  margin-bottom: var(--space-16);      /* 64px — final distance to the footer, mobile and desktop */
}


/* ── Image ─────────────────────────────────────────────────────────────────
 * height: auto — renders at its own native aspect ratio, never cropped,
 * at any width. img-rounded (globals.css, 4px radius) is left
 * un-overridden.
 * ────────────────────────────────────────────────────────────────────── */

.about__image {
  display: block;
  height: auto;
  border: none;
}


/* ── Image sizing ─────────────────────────────────────────────────────────
 * Mobile: same edge-to-edge breakout base as .home-hero__image
 * ("100% + 48px", cancels .content-area's 24px side padding), reduced to
 * 90% of that breakout width, per explicit request. Centered via
 * margin-left/right: auto rather than the breakout's own negative-margin
 * math, since the image no longer spans full width — standard
 * block-level centering, keeps it centered regardless of exact width.
 *
 * Desktop: reduced to 80% of the 700px content column, per explicit
 * request. margin-left/right: 0 keeps it flush against the column's left
 * edge — "keep its current alignment" (left-aligned, matching the text
 * above/below it and Process's own layout style, unchanged from before
 * this resize).
 *
 * Aspect ratio is preserved automatically at both sizes: only width
 * changes, height stays auto (.about__image's own base rule above).
 * ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .about__image {
    width: calc((100% + (var(--layout-margin) * 2)) * 0.9);   /* 90% of the full breakout width */
    max-width: calc((100% + (var(--layout-margin) * 2)) * 0.9);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .about__image {
    width: 80%;                        /* 80% of the 700px content column */
    max-width: 80%;
    margin-left: 0;
    margin-right: 0;
  }
}


/* ── Desktop text width — intro + body ────────────────────────────────────
 * Same 560px reading width already established on Home/Process for their
 * own intro copy, flush against the column's own left edge (no
 * margin-inline: auto), matching its left-aligned text.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .about__intro-heading,
  .about__body {
    max-width: 560px;
    text-align: left;
  }
}


/* =============================================================================
   Scroll reveal — matches Home/Process exactly. This page links
   js/home-reveal.js directly (broadened to also query the classes below,
   see that file's own header comment) — continuous fade + slight vertical
   movement, both as each block enters AND leaves the viewport, applied at
   every viewport width. Every value below is copied verbatim from
   process.css / home.css's own "Scroll reveal" section; nothing here is a
   new value.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

  .about__image-wrap,
  .about__intro-heading,
  .about__body {
    opacity: 0;
    transform: translateY(16px);
  }

  .about__intro-heading,
  .about__body {
    transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .about__image-wrap {
    transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .about__image-wrap.is-visible,
  .about__intro-heading.is-visible,
  .about__body.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* Reduced motion: still fades in (once, immediately, no observer, no
   parallax — see js/home-reveal.js) so nothing is left permanently
   invisible, but drops the slide and slows to a minimal, non-distracting
   fade. */
@media (prefers-reduced-motion: reduce) {

  .about__image-wrap,
  .about__intro-heading,
  .about__body {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .about__image-wrap.is-visible,
  .about__intro-heading.is-visible,
  .about__body.is-visible {
    opacity: 1;
  }

}