/* ============================================================
   MCZ — O MNIE  (o-mnie.css)  ·  mobile-first
   ============================================================ */

.ab{position:relative;padding:7rem 0 5rem}

/* ---------- HERO ---------- */
.ab-hero{text-align:center;max-width:620px;margin:0 auto 3.4rem}
.ab-hero .eyebrow{margin-bottom:1.1rem}
.ab-hero__title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  letter-spacing:-.03em;font-size:clamp(2.4rem,9vw,3.8rem);line-height:1.05}
.ab-hero__title em{font-style:normal;background:var(--grad-warm);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ab-hero__sub{color:var(--muted);font-size:1.02rem;margin-top:.9rem}

/* ---------- WIERSZE TEKST / MEDIA ---------- */
.ab-row{display:flex;flex-direction:column;gap:2.2rem;margin-bottom:3.5rem}
.ab-row:last-child{margin-bottom:0}

.ab-media{border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(155deg,var(--bg-2),var(--ink));
  display:flex;align-items:center;justify-content:center;padding:1.4rem;
  transform-style:preserve-3d}
.ab-media img{width:100%;height:auto;display:block;border-radius:12px}
.ab-media--photo{padding:0}
.ab-media--photo img{border-radius:0}

.ab-kicker{display:block;font-family:'JetBrains Mono',monospace;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:.8rem}
.ab-h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.1;margin-bottom:1.1rem}
.ab-h2 em{font-style:normal;background:var(--grad-warm);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.ab-text p{color:var(--muted);font-size:1rem;margin-bottom:1rem}
.ab-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.6rem}
.ab-tags span{font-family:'JetBrains Mono',monospace;font-size:.8rem;
  padding:.5rem .9rem;border:1px solid var(--line-soft);border-radius:100px;
  background:var(--surface);color:var(--cream)}

/* ---------- RESPONSIVE ---------- */
@media (min-width:920px){
  .ab{padding:9.5rem 0 6rem}
  .ab-hero{margin-bottom:4.5rem}
  .ab-row{flex-direction:row;align-items:center;gap:3.4rem;margin-bottom:5rem}
  .ab-row--rev{flex-direction:row-reverse}
  .ab-text,.ab-media{flex:1}
  .ab-media img{max-height:440px;object-fit:contain}
  .ab-media--photo img{width:100%;height:100%;object-fit:cover}
}