/* ==========================================================================
   About Us page — two alternating text/photo rows (story, process) under
   the page-header, same structural idea as css/pitch.css (text column +
   visual column, order flipped on the second row), plus a full-width
   statement paragraph between them and a closing CTA band reusing the
   shared .cta-liquid fire-hover button.
   ========================================================================== */

/* padding-top matches every other inner page's own top section (Shop,
   Blog, Portfolio, Product, Services, the Blog article template) —
   var(--space-16), the same fixed gap below .page-header's own hairline
   everywhere; bottom padding is unrelated and stays as it was. */
.about-story {
  position: relative;
  background-color: #0c0c10;
  background-image: radial-gradient(circle at 12% 10%, rgba(91, 42, 134, 0.16), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(255, 122, 26, 0.1), transparent 32%);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Magazine float-wrap: the image floats to one side and ALL of the row's
   text — heading, body paragraphs and the closing statement — flows as one
   continuous block around it, at every screen size. The image must sit
   BEFORE the copy in the DOM (it does) so the text that follows wraps it. */
.about__row {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Clear the float so the next row (and the section below) starts clean. */
.about__row::after {
  content: "";
  display: block;
  clear: both;
}

.about__row + .about__row {
  margin-top: 64px;
}

/* Heading sits on its own line at the top of each row (a direct child of
   .about__row, before the floated image) — margin-bottom gives it space
   from the image/text that wraps below it. */
.about__title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.about__text {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.about__text + .about__text {
  margin-top: var(--space-4);
}

/* --- Visual column --- */

.about__visual {
  float: right;
  width: 44%;
  max-width: 620px;
  /* small top nudge so the image top lines up with the heading's cap
     height rather than its line-box top; bottom + inner margins give the
     wrapping text room to breathe around it. */
  margin: 6px 0 var(--space-5) var(--space-10);
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Reverse row: image floats to the LEFT instead, text wraps on its right. */
.about__row--reverse .about__visual {
  float: left;
  margin: 6px var(--space-10) var(--space-5) 0;
}

/* Images always keep their own aspect ratio — they scale proportionally
   with the column width and are never cropped or stretched. (Explicitly
   requested for every version, desktop included: the old fixed-height
   `object-fit: cover` changed the visible crop as the column resized,
   which read as the image's proportions changing.) */
.about__visual img {
  width: 100%;
  height: auto;
  display: block;
}

.about__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5, 5, 6, 0.55) 100%);
  pointer-events: none;
}

/* Closing statement is now just the last paragraph of the copy (it carries
   .about__text too), so it flows and wraps the image like the rest — only
   its emphasised span keeps a distinct treatment. */
.about__statement span {
  color: var(--color-text);
  font-weight: 600;
}

/* Multi-paragraph text block (editor: Enter makes a new paragraph). Each <p>
   reads exactly like a single .about__text. */
.about__prose {
  margin-top: var(--space-5);
}
.about__prose p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.about__prose p + p {
  margin-top: var(--space-4);
}

/* Bullet list ("пункти через крапку"): same rhythm as .about__text. The bullet
   colour is per-list via the --bullet variable (set inline from the editor). */
.about__list {
  margin-top: var(--space-5);
  padding-left: 1.25em;
  list-style: disc;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.about__list li {
  margin-top: var(--space-2);
}
.about__list li::marker {
  color: var(--bullet, #8a5cff);
}

/* Full-width image item — spans the whole row (not floated); clears any float
   above it so it always starts on its own full-width line. */
.about__figure {
  clear: both;
  width: 100%;
  margin: var(--space-6) 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.about__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* Quote / callout — same look as the article pull-quote (left brand-gradient
   line). The line colour can be overridden inline (border-image:none +
   border-left-color) from the editor. */
.about__quote {
  clear: both;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid transparent;
  border-image: var(--gradient-brand) 1;
  background: var(--color-bg-elevated);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.about__quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

/* Inline links inside page copy — colour + underline are configurable per block
   via --rm-link / --rm-link-ul; the .rm-links-plain modifier drops the underline. */
.about-story a {
  color: var(--rm-link, #ff9a4a);
  text-decoration: underline;
  text-decoration-color: var(--rm-link-ul, currentColor);
  text-underline-offset: 2px;
  transition: color var(--duration-fast, 0.2s) ease;
}
.about-story.rm-links-plain a {
  text-decoration: none;
}
.about-story a:hover {
  color: var(--rm-link, #ffb877);
  filter: brightness(1.12);
}
.about-cta__title a,
.about-cta__text a {
  color: #ff9a4a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The block editor's "text colour" format outputs <mark class="has-inline-color">;
   strip the browser's default yellow highlight so only the chosen colour shows. */
.has-inline-color,
mark.has-inline-color {
  background: transparent;
}


/* --- Closing CTA band --- */

/* No top divider of its own — .trust (css/trust.css) right above it
   already closes with its own thin gray border-bottom, so a second,
   colored gradient line here just doubled up right next to it. */
.about-cta {
  position: relative;
  background-color: #0a0a0d;
  padding-block: var(--space-16);
  text-align: center;
}

.about-cta__title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  max-width: 640px;
  margin-inline: auto;
}

.about-cta__text {
  margin: var(--space-5) auto 0;
  max-width: 520px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.about-cta__cta-wrap {
  display: inline-block;
  margin-top: var(--space-8);
}

/* Mobile: no float/wrap. The image now sits AFTER the heading in the DOM
   (it comes before it, so text can wrap it on desktop/tablet), so switch
   the row to a flex column and use `order` to lay it out heading -> image
   (full width) -> body text. (Tablet keeps the float-wrap above.) */
@media (max-width: 767px) {
  .about__row {
    display: flex;
    flex-direction: column;
  }
  .about__title {
    order: 1;
  }
  .about__visual,
  .about__row--reverse .about__visual {
    order: 2;
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 var(--space-5);
  }
  .about__copy {
    order: 3;
  }
}

/* Tablet/mobile only: the section gets side padding so the heading/text no
   longer touch the screen edges, and the closing CTA button spans the full
   work area. The wrap drops its own side padding — the section now provides
   it — so the button lines up with the padded heading. (Image aspect-ratio
   handling is global now — see .about__visual img above.) Desktop keeps its
   inline centred button. */
@media (max-width: 1024px) {
  .about-cta {
    padding-inline: var(--container-pad);
  }

  .about-cta__cta-wrap {
    display: block;
    width: 100%;
    max-width: var(--container-max);
    margin: var(--space-8) auto 0;
    padding-inline: 0;
  }

  .about-cta__cta-wrap .btn {
    width: 100%;
  }
}

/* Per-row text/image balance (chosen in the block). Desktop/tablet only —
   the image is the floated column, so a narrower image = more room for text,
   and vice-versa. On mobile every image is full-width (rule above), so these
   are scoped to ≥768px and never touch the phone layout. Default (no class)
   stays at 44%. */
@media (min-width: 768px) {
  .about__row--img-xs .about__visual { width: 28%; }
  .about__row--img-sm .about__visual { width: 36%; }
  .about__row--img-lg .about__visual { width: 54%; }
  .about__row--img-xl .about__visual { width: 64%; }
}