/* =======================================================================
   Konia — About page
   Editorial layout: text hero, portrait beside a first-person story,
   four "what breaks" cards, the resolution, a signature block.

   The founder photo is PORTRAIT (1000x1332). It is deliberately a contained
   column element, never a full-width band: a wide band would crop it to a
   slice of torso and lose both the face and the club jersey.

   Reuses shared tokens + .eyebrow + .section-head + .store.
   `.cta` / `.store-row` are duplicated from index.css so this page needs only
   shared.css + this file (never loaded together, so no collision).

   Updates:
   - 2026-07-31: Initial creation.
   ======================================================================= */

/* ============================ HERO ============================ */
.ab-hero{padding:clamp(64px,9vw,116px) 0 clamp(40px,5vw,64px);background:var(--bg);text-align:center}
.ab-hero .wrap{display:flex;flex-direction:column;align-items:center}
.ab-hero h1{font-size:clamp(38px,6vw,72px);font-weight:800;margin:24px 0 0;text-wrap:balance;color:var(--text);max-width:15ch}
.ab-hero p{margin-top:20px;font-size:clamp(17px,1.5vw,21px);color:var(--text-dim);max-width:600px;text-wrap:pretty}

/* ============================ STORY (photo + prose) ============================ */
.ab-story{padding:clamp(40px,6vw,72px) 0 var(--section-py);background:var(--bg)}
.ab-story__grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,64px);align-items:start}

/* Sticky so the portrait stays with the reader through a long story column. */
.ab-story__photo{position:sticky;top:96px}
.ab-story__photo img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border);display:block}
.ab-story__cap{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.5}
.ab-story__cap a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;transition:color var(--transition)}
.ab-story__cap a:hover{color:var(--green-bright)}

.ab-story__text h2{font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--text);letter-spacing:-.01em;text-wrap:balance}
.ab-story__text p{margin-top:18px;color:var(--text-dim);font-size:16.5px;line-height:1.75;text-wrap:pretty}
.ab-story__text p:first-of-type{margin-top:22px}
.ab-story__text strong{color:var(--text);font-weight:700}
.ab-story__lead{font-size:18.5px !important;color:var(--text) !important}

@media(max-width:900px){
  .ab-story__grid{grid-template-columns:1fr;gap:34px}
  .ab-story__photo{position:static;max-width:420px}
}

/* ============================ WHAT BREAKS ============================ */
.ab-broke{padding:var(--section-py) 0;background:var(--bg-band);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ab-broke__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px;max-width:920px;margin-left:auto;margin-right:auto}
.ab-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;transition:transform .22s,border-color .22s}
.ab-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.ab-card__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-bright);margin-bottom:18px}
.ab-card__ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-card h3{font-size:18px;font-weight:800;color:var(--text)}
.ab-card p{margin-top:10px;color:var(--text-dim);font-size:14.5px;line-height:1.6;text-wrap:pretty}
@media(max-width:760px){.ab-broke__grid{grid-template-columns:1fr}}

/* ============================ THE FIX ============================ */
.ab-fix{padding:var(--section-py) 0;background:var(--bg)}
.ab-fix__inner{max-width:720px;margin:0 auto;text-align:center}
.ab-fix__inner h2{font-size:clamp(26px,3.6vw,42px);font-weight:800;color:var(--text);text-wrap:balance}
.ab-fix__inner p{margin-top:18px;color:var(--text-dim);font-size:clamp(16px,1.45vw,18.5px);line-height:1.75;text-wrap:pretty}

/* ============================ SIGNATURE ============================ */
.ab-sign{max-width:720px;margin:clamp(38px,5vw,56px) auto 0;padding-top:30px;border-top:1px solid var(--border);
         display:flex;align-items:center;gap:18px;justify-content:center;text-align:left}
.ab-sign__pic{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none;border:1px solid var(--border)}
.ab-sign__name{font-size:16.5px;font-weight:800;color:var(--text);line-height:1.3}
.ab-sign__role{margin-top:3px;font-size:14px;color:var(--text-dim);line-height:1.45}
.ab-sign__where{margin-top:2px;font-size:13.5px;color:var(--muted)}
@media(max-width:520px){.ab-sign{flex-direction:column;text-align:center;gap:14px}}

/* ============================ CTA (shared shape with index.css) ============================ */
.cta{position:relative;overflow:hidden;padding:clamp(86px,11vw,150px) 0;text-align:center;background:var(--bg)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:var(--photo-filter)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,.82),rgba(11,14,20,.9)),radial-gradient(120% 80% at 50% 120%,var(--green-soft),transparent 60%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(32px,4.6vw,58px);font-weight:800;text-wrap:balance;color:var(--text)}
.cta p{margin:18px auto 0;color:#C3CAD6;font-size:clamp(16px,1.5vw,20px);max-width:520px}
.store-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px}