/* About page — overrides and components not in pro-firmy.css */

/* ─── Hero — plain text, centred ────────────────────────────────────── */
.about-hero {
  padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 7vw, 104px);
  text-align: center;
}
.about-hero .pf-eyebrow { text-align: center; }
.about-hero h1 span { color: inherit; }
.about-hero h1 { max-width: 22ch; margin-inline: auto; }
.about-hero .pf-lead { color: var(--pf-ink); max-width: 58ch; margin-inline: auto; }
.about-actions--center { justify-content: center; }

/* ─── "Jak přemýšlíme" — image bleeds 15% beyond section bounds ─────── */
.about-sec-system { overflow: visible; }

.about-visual-bleed {
  position: relative;
  z-index: 0;
  margin-block: -15%;
  min-width: 0;
}
.about-visual-bleed img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pf-r-lg);
}

/* Team section above covers the top bleed */
#tym { position: relative; z-index: 1; }

/* ─── Team grid (2 equal columns) ──────────────────────────────────── */
.about-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.about-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-r-lg);
  overflow: hidden;
  background: #fff;
}
.about-person__avatar {
  display: grid;
  place-items: center;
  background: var(--pf-blue);
  color: var(--pf-accent);
  aspect-ratio: 4 / 3;
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: 1;
}
.about-person__photo {
  display: block;
  width: 100%;
  height: 600px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
}
.about-person__photo--sergei {
  filter: brightness(1.12) contrast(0.82);
}
.about-person__body { padding: 32px; }
.about-person__body .pf-eyebrow { margin-bottom: 8px; }
.about-person__body h3 { margin: 0 0 16px; }
.about-person__body p { margin: 0; }

.about-values { background: #F4F0ED; }
.about-values .pf-card           { background: #F7EACA; }
.about-values .pf-card--green    { background: #E2E9DA; }
.about-values .pf-card--sand     { background: #DADCE0; }
.about-values .about-card--light  { background: #F1D6D6; }

/* ─── Values grid (4 columns) ──────────────────────────────────────── */
.about-values .pf-card {
  align-items: center;
  text-align: center;
}
.about-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.about-number {
  display: block;
  margin-bottom: 32px;
  color: var(--pf-accent);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.about-card--light { background: #f1f3f4; }

/* ─── "Co nečekat" bullet list ──────────────────────────────────────── */
.about-limits {
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-limits li {
  position: relative;
  padding: 24px 0 24px 26px;
  border-bottom: 1px solid var(--pf-line);
  font-size: 17px;
  line-height: 1.65;
  color: var(--pf-ink);
}
.about-limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 33px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-accent);
}
.about-limits li:first-child { border-top: 1px solid var(--pf-line); }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .about-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .about-grid--2,
  .about-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .about-grid--2 { max-width: 560px; margin-inline: auto; }
  .about-person__body { padding: 24px; }
  .about-number { font-size: 36px; margin-bottom: 24px; }
  .about-actions--center { justify-content: center; }
}
@media (max-width: 600px) {
  .about-hero { padding-top: 16px; }
  .about-hero__card { padding: 40px 24px; border-radius: 24px; }
  .about-number { font-size: 32px; }
  .about-limits li { font-size: 16px; padding-left: 22px; }
}
@media (max-width: 380px) {
  .about-hero__card { padding-inline: 20px; }
}