/* About "O mně" (step 4.13, approved variant B2): typographic, no photo and no cards. The first paragraph is a
   larger statement with a gradient rule and the name in the accent gradient; the other three follow below a thin
   line, each with a small gradient diamond. Up to 1099 px one column; from 1100 px two columns 5 : 7, paragraph 2 on
   the left, 3 and 4 in the wider right column. The paragraphs keep their reading order in the markup.
   No glow of its own (approved change, 2026-11-06): the one in the design lightened the page backdrop behind the
   muted paragraphs below 4.5 : 1, and moved higher it dimmed the gradient word of the heading. */
/* A word wider than its box (only with strongly enlarged text) breaks instead of sticking out */
.about { padding-block: var(--space-section); overflow-wrap: break-word; }
.about h2 { overflow-wrap: anywhere; }

.about-text { margin-top: var(--space-12); }
.about-text p { max-width: 36em; font-size: var(--text-lg); line-height: 1.7; color: var(--color-muted); }

.about-text .about-intro {
  position: relative;
  max-width: 26em;
  padding-left: var(--space-8);
  font: 500 clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem) / 1.35 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.about-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-violet), var(--color-cyan), var(--color-lime));
}

.about-columns {
  display: grid;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
}
.about-columns p { max-width: 36em; }
/* Small gradient marker above each paragraph, the same diamond as in the benefits band */
.about-columns p::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 0 var(--space-4) 2px;
  border-radius: 2px;
  rotate: 45deg;
  background: var(--gradient-accent);
}

@media (width >= 1100px) {
  .about-columns { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8) var(--space-16); align-items: start; }
  .about-columns p:nth-child(1) { grid-area: 1 / 1 / span 2; }
  .about-columns p:nth-child(2) { grid-area: 1 / 2; }
  .about-columns p:nth-child(3) { grid-area: 2 / 2; }
}
@media (width < 1100px) {
  .about-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .about-columns p { max-width: 38em; }
}
@media (max-width: 640px) {
  .about-text .about-intro { padding-left: 20px; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.5rem); }
}