/* ==========================================================================
   ABOUT — first section on mobile (the Figma «Mobile» frame, «Frame 106»)
   --------------------------------------------------------------------------
   Top to bottom: three-line headline with «ФАБРИКА» crossed out →
   portrait → two paragraphs → «Навчання» (two certificates).

   Gaps — the Figma panel values, box to box:
     screen top → headline      56   (55 in Figma — the one rounded value)
     headline   → portrait      22
     portrait   → text          24
     paragraph  → paragraph     16
     text       → «Навчання»    56   (the scale's gap between groups)
     marker     → certificates  16
   ========================================================================== */

.about {
  padding-top: var(--space-between);
}

.about__inner {
  display: flex;
  flex-direction: column;
}

/* --- Headline -------------------------------------------------------------
   One heading, three lines, stacked by the leading alone (no gaps).
   The joke is visual: crossing out «фабрика» turns «Контент-фабрика.
   Стратег.» into «Контент-… стратег». A screen reader can't see a line
   through a word, so it gets the meaning spelled out instead, and the
   drawn version is hidden from it. */

.about__line {
  display: block;
}

/* The crossed-out word. <s> is the HTML element for "no longer accurate"
   — exactly what the line says. Its default strikethrough is replaced by
   the drawn X below. */
.about__struck {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Two accent lines drawn across the word as an X. Coordinates are the
   Figma ones, in a viewBox the size of the word itself (202 × 48 in
   Cormorant Light 44): from x 6 to 204 — a hair past the last letter,
   stopping short of the full stop — between y 9 and 39, about ±8°.
   The SVG stretches with the word (preserveAspectRatio="none"), and the
   stroke stays 1 px whatever the width (vector-effect). */
.about__cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.about__cross line {
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- Portrait -------------------------------------------------------------
   Full field width; the height follows the Figma proportion 350 × 404
   instead of staying fixed, so on 360 the photo is scaled, not cropped
   harder. */

.about__photo {
  margin-top: 1.375rem;                      /* 22, Figma */
}

.about__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 404;
  object-fit: cover;
}

/* --- Text ----------------------------------------------------------------- */

.about__text {
  margin-top: 1.5rem;                        /* 24, Figma */
}

.about__text p + p {
  margin-top: var(--paragraph-spacing);
}

/* --- Training --------------------------------------------------------------
   A short list: each certificate a small landscape card on the left, its
   course and author beside it. The first card is cream on cream, so every
   card gets a hairline edge. A tap opens it full screen (js/lightbox.js). */

.about__edu {
  margin-top: var(--space-between);           /* 56 */
}

.about__edu-head {
  color: var(--color-ink-soft);
}

.about__certs {
  display: grid;
  gap: var(--space-pair);                     /* 16 */
  margin-top: var(--space-pair);
}

.about__cert {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-pair);
  align-content: center;
}

.about__cert picture {
  display: block;
  grid-row: 1 / 3;
  align-self: center;
}

.about__cert img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3000 / 2121;
  box-shadow: 0 0 0 1px var(--color-hairline);
}

.about__cert-name {
  align-self: end;
}

.about__cert-meta {
  align-self: start;
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   DESKTOP (Figma «Section about», 1920)
   Three columns of the field — 608 | 628 | 526 of 1762: the headline runs
   over the first two, the text sits in the first under it, the portrait
   fills the third. Headline top = portrait top.
   The accent ring from Figma («Ellipse 1», 533 × 1001 around the photo —
   not a true ellipse but a drawn loop; its path is the Figma one, exported
   by Figma Reader 1.2.0) is drawn behind the portrait in the photo's own
   proportions, so it scales with it. Its top would reach into the Hero on wide screens; the
   Hero sits above it (z-index) and hides that part, as the frame edge
   does in Figma.
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  /* About opens with 56 of cream, then the bar rides there (menu.css):
     64 for it, then 160 to the headline. A link to #about lands with the
     bar at the top of the screen. */
  .about {
    padding-top: calc(var(--dock-gap) + 4rem + 10rem);   /* air, bar, 160 */
  }

  section.about {                                        /* beats section[id] */
    scroll-margin-top: calc(-1 * var(--dock-gap));       /* land on the bar */
  }

  /* The cross over «фабрика»: 2 px on desktop (Figma), 1 on phones. */
  .about__cross line {
    stroke-width: 2;
  }

  .about__inner {
    display: grid;
    grid-template-columns: minmax(0, 608fr) minmax(0, 628fr) minmax(0, 526fr);
    grid-template-rows: auto auto 1fr;
  }

  .about__title {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .about__photo {
    position: relative;
    isolation: isolate;
    grid-column: 3;
    grid-row: 1 / 4;                            /* beside the headline, the text and the training */
    align-self: start;                          /* the portrait's own height: the loop is drawn in its proportions */
    margin-top: 0;
  }

  /* Headline → text: 120 on the scale. At 1920 that lands the last line
     of text exactly on the portrait's bottom edge (Figma: 189 with the
     smaller 86 headline — the same bottom line). */
  .about__text {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 7.5rem;
  }

  /* Training: under the text, in the text's own column — one reading
     line: text → «Навчання» → the certificates (the middle column beside
     the text is crossed by the portrait's accent loop). Desktop shows them
     as two cards side by side, picture over caption, like the rows of work
     on the cases page (gap 22, caption 16 under the picture). Vadim,
     5 Nov: variant C. */
  .about__edu {
    grid-column: 1;
    grid-row: 3;
    margin-top: var(--space-between);
  }

  .about__certs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.375rem;                            /* 22, the cases grid */
  }

  .about__cert {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
  }

  .about__cert picture {
    grid-row: auto;
  }

  .about__cert-name {
    margin-top: var(--space-pair);            /* 16 */
  }

  .about__ring {
    position: absolute;
    z-index: -1;
    left: -29.85%;                              /* 157 / 526 */
    top: -37.44%;                               /* 228 / 609 */
    width: 101.33%;                             /* 533 / 526 */
    height: 164.37%;                            /* 1001 / 609 */
    overflow: visible;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;                       /* decorative: never takes a click */
  }

  .about__ring path {
    vector-effect: non-scaling-stroke;
  }
}

/* Phones: no ring. */
@media (max-width: 63.99em) {
  .about__ring {
    display: none;
  }
}