/* /o-studiu/  (zf /about, spec 3.7 + 8.1). Page-only; tokens and components come from zf.css. */

/* 1 hero: eyebrow + H1 left, text + buttons right (zf: padding 40 0 80, grid 1fr 1fr gap 64) */
.ab-hero { padding: 40px 0 80px; }
.ab-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ab-hero__k { font-size: 14px; line-height: 20px; color: var(--muted); }
.ab-hero__h { margin-top: 20px; text-wrap: balance; }
.ab-hero__p { margin-bottom: 32px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.ab-hero__btns { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
@media (max-width: 768px) { .ab-hero__grid { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 575px) { .ab-hero { padding: 32px 0; } }

/* bento stats: 1 tall + 2 small + 1 wide (zf: minmax(100px,432px) 1fr, gap 12) */
.ab-stats { margin-top: 64px; display: grid; grid-template-columns: minmax(100px, 432px) 1fr; gap: 12px; }
.ab-stats__r { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ab-stats__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 72px; padding: 24px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.stat__n { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.1; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.stat__s { font-size: 36px; font-weight: 300; color: var(--accent); }
.stat__c { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--text-2); max-width: 300px; }
.stat__pill { align-self: flex-start; position: relative; padding: 6px 14px; border-radius: var(--r-tag); border: 1px solid var(--line); background: var(--card); font-size: 13px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.stat__pill--inv { background: #FAFAFA; border-color: #FAFAFA; color: #010102; }
.stat > * { position: relative; z-index: 1; }
/* tall card: lime/lavender glow rising from the bottom (zf: blurred accent ellipse) */
.stat--tall { min-height: 480px; gap: 174px; }
.stat--tall::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 78%; z-index: 0; filter: blur(30px); pointer-events: none;
  background: radial-gradient(60% 70% at 50% 100%, rgba(173, 150, 241, .85), rgba(88, 246, 177, .45) 55%, transparent 78%); }
.stat--wide { min-height: 244px; flex-direction: row; gap: 24px; align-items: stretch; }
.stat--wide__txt { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; }
.stat__photo { flex: none; width: min(260px, 38%); border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, #AD96F1 0%, #3A2470 70%, #1A1030 100%); font-size: 56px; font-weight: 700; letter-spacing: -.03em; color: rgba(255, 255, 255, .9); }
@media (max-width: 991px) { .ab-stats { grid-template-columns: 1fr; } .stat--tall { min-height: 0; } }   /* 2-up cards were too narrow for '7 500 Kč' */
@media (max-width: 768px) {
  .ab-stats { margin-top: 32px; }
  .stat--tall { gap: 174px; }
  .stat--wide { flex-direction: column; }
  .stat__photo { width: 100%; height: 160px; }
}
@media (max-width: 575px) { .ab-stats__row { grid-template-columns: 1fr; } .stat { gap: 48px; } .stat--tall { gap: 174px; } }

/* 2 belief: H2 left, text right (zf: gap 64, text max 664) */
.ab-split { display: flex; align-items: flex-start; gap: 64px; }
.ab-split__h { flex: 1; font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -.72px; text-wrap: balance; }
.ab-split__p { flex: 1; max-width: 664px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ab-split__p p + p { margin-top: 24px; }
.band--paper .ab-split__p { color: var(--ink-2); }
@media (max-width: 768px) { .ab-split { flex-direction: column; gap: 16px; } }
@media (max-width: 575px) { .ab-split__h { line-height: 36px; } }

/* tool wall: gap-1px hairline shell, 5 -> 4 -> 3 -> 2 cols (zf logo wall) */
.ab-wall { margin-top: 64px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-grid); overflow: hidden; }
.ab-wall li { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 24px; background: var(--bg); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text-2); text-align: center; }
@media (max-width: 1204px) { .ab-wall { grid-template-columns: repeat(4, 1fr); } .ab-wall li:nth-last-child(-n+2) { grid-column: span 2; } }
@media (max-width: 991px) { .ab-wall { grid-template-columns: repeat(3, 1fr); } .ab-wall li:nth-last-child(-n+2) { grid-column: auto; } .ab-wall li:last-child { grid-column: span 3; } }
@media (max-width: 768px) { .ab-wall { grid-template-columns: repeat(2, 1fr); margin-top: 32px; } .ab-wall li:last-child { grid-column: auto; } }

/* 3 three ways: hover-expand strip on paper (zf: flex-grow .5s cubic-bezier(.4,0,.2,1), active 2.15) */
.ab-ways { margin-top: var(--head-gap); display: flex; align-items: stretch; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--r-panel); overflow: hidden; }
.way { flex: 1 1 0; min-width: 0; padding: 24px; display: flex; flex-direction: column; border-right: 1px solid var(--paper-line); min-height: 400px; transition: flex-grow var(--dur-4) var(--ease-flex); }
.way:last-child { border-right: 0; }
.way.is-active { flex-grow: 2.15; }
.way__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; text-align: left; color: var(--ink); }
.way__k { font-size: 13px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.way__ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.way__ic svg { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--accent); fill: none; stroke: #010102; stroke-width: 2; transition: transform .35s ease; }
.way.is-active .way__ic svg { transform: rotate(180deg); }
.way__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.way.is-active .way__body { justify-content: flex-start; margin-top: 45px; }
.way__t { max-width: 420px; font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: -.48px; color: var(--ink); }
.way__d { margin-top: 8px; max-width: 420px; font-size: 16px; line-height: 24px; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.way.is-active .way__d { -webkit-line-clamp: unset; display: block; }
.way__more { max-height: 0; opacity: 0; overflow: hidden; transition: opacity .35s ease, max-height .45s ease; }
.way.is-active .way__more { max-height: 260px; opacity: 1; margin-top: 12px; }
.way__more[inert] { visibility: hidden; }
.way__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 320px; margin-top: 8px; }
.way__stats dt { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.48px; color: var(--ink); }
.way__stats dd { font-size: 16px; line-height: 22px; color: var(--ink-2); }
@media (max-width: 991px) {
  .ab-ways { flex-direction: column; }
  .way { flex: none !important; min-height: 0; gap: 20px; /* QA: flex-basis 0 collapsed the stacked cards to 49 px */ border-right: 0; border-bottom: 1px solid var(--paper-line); }
  .way:last-child { border-bottom: 0; }
  .way__body, .way.is-active .way__body { margin-top: 0; justify-content: flex-start; }
  .way__d { display: block; -webkit-line-clamp: unset; }
  .way__more { max-height: none; opacity: 1; margin-top: 12px; }
  .way__ic svg { transform: rotate(180deg); }
  .way__head { pointer-events: none; }
}

/* 4 display band: lavender, 88/105 statement (zf mission). Orbs sit behind the text; text is #010102 (>= 8.36 on every colour here). */
.ab-band { position: relative; overflow: hidden; padding: 80px 0; background: var(--accent); color: #010102; }
.ab-band .eyebrow { color: #010102; }
.ab-band__in { position: relative; z-index: 1; }
.ab-band__h { max-width: 1024px; margin-top: 24px; margin-bottom: 64px; font-size: clamp(3rem, 1.6rem + 5vw, 5.5rem); line-height: 1.19; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.ab-band__low { display: flex; justify-content: flex-end; align-items: flex-end; }
.ab-band__low > div { max-width: 512px; }
.ab-band__low p { font-size: 16px; line-height: 24px; }
.ab-band__low h3 { margin-top: 24px; font-size: 20px; line-height: 30px; font-weight: 500; }
.orb { position: absolute; z-index: 0; top: 0; left: 0; width: 290px; height: 290px; border-radius: 50%; opacity: .5; pointer-events: none; will-change: transform; }
.orb--1 { background: radial-gradient(circle, #58F6B1 0%, rgba(88, 246, 177, 0) 70%); transform: translate(60vw, 30px); }
.orb--2 { background: radial-gradient(circle, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%); transform: translate(4vw, 220px); }
@media (max-width: 768px) {
  .ab-band { padding: 32px 0; }
  .ab-band__h { font-weight: 500; margin-bottom: 32px; line-height: 1.25; }
  .ab-band__low { justify-content: flex-start; }
}

/* 5 why me (zf six reasons): heading row above the numbered rows */
.ab-why { margin-top: var(--head-gap); }

/* QA 2026-11-04: zf /about at 390 renders section H2 24/32 */
@media (max-width: 575px) { .ab-split__h { font-size: 24px; line-height: 32px; } }