/* ==================================================================
   O PROJEKTU — stránka /o-projektu (.op)
   Nasazuje se NAD reseni-v2.css: <main class="rs2 op">. Odtud bere
   barvy, tlačítka (.btn) i pruh referencí (.logos).

   Role stránky: důvěra před rozhodnutím. Lékař váhá, jestli nám dát
   číslo, a jde si ověřit, kdo za webem stojí. Proto je krátká, jádro
   je „kdo za tím stojí" a končí to u kontaktu — ne u dalšího čtení.
   ================================================================== */

/* ── HERO ───────────────────────────────────────────────────── */
.op .op-hero { background:var(--mint-tint); text-align:center; padding:clamp(2.4rem,5.5vw,4rem) 1.5rem clamp(2.2rem,4.5vw,3.2rem); }
.op .op-kicker { display:inline-block; font-size:.85rem; font-weight:700; color:var(--cendre-text); background:#fff; border-radius:999px; padding:.45rem 1.2rem; box-shadow:0 6px 18px -8px rgb(0 29 57 / .18); }
.op .op-hero h1 { font-size:clamp(1.95rem,4.4vw,3.3rem); font-weight:800; letter-spacing:-.04em; line-height:1.08; color:var(--navy); margin:1.25rem auto .9rem; max-width:26ch; text-wrap:balance; }
/* Podtah přes víc řádků. Verze z řešení (absolutní ::after) umí jen jednu
   řádku a musí mít nowrap — tady je zvýrazněná celá věta, takže pruh kreslí
   gradient na pozadí a box-decoration-break ho zkopíruje na každou řádku. */
.op .op-hero h1 .hl { background-image:linear-gradient(to top, rgb(70 205 207 / .35) .34em, transparent .34em); background-repeat:no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:.07em; }
.op .op-lead { color:var(--muted); font-size:clamp(1.02rem,1.6vw,1.16rem); max-width:56ch; margin:0 auto; }
.op .op-cta { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.7rem; }

/* čísla — doklad rozsahu bez jediné věty */
.op .op-nums { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:clamp(1.8rem,4vw,2.6rem) auto 0; }
.op .op-nums li { display:flex; flex-direction:column; gap:.1rem; background:#fff; border:1px solid var(--line); border-radius:16px; padding:.9rem 1.6rem; min-width:9.5rem; box-shadow:0 12px 28px -22px rgb(0 29 57 / .4); }
.op .op-nums b { font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:var(--navy); line-height:1.1; }
.op .op-nums span { font-size:.85rem; color:var(--muted); }

/* ── KDO ZA TÍM STOJÍ — jádro stránky ───────────────────────── */
.op .op-who { background:#fff; padding:clamp(2.6rem,6vw,4rem) clamp(1.2rem,3vw,2.5rem) clamp(1.4rem,3vw,2rem); }
.op .op-who-in { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.4rem,3.5vw,2.6rem); align-items:start; max-width:900px; margin:0 auto; }
.op .op-mark { flex:none; width:11rem; padding:1.1rem 1.3rem; border-radius:18px; background:var(--mint-tint); border:1px solid var(--line); display:grid; place-items:center; }
.op .op-mark img { width:100%; height:auto; }
.op .op-who h2 { font-size:clamp(1.5rem,2.9vw,2.2rem); font-weight:800; letter-spacing:-.035em; color:var(--navy); line-height:1.14; margin-bottom:.8rem; text-wrap:balance; }
.op .op-who p { color:var(--muted); font-size:1rem; margin-bottom:.8rem; max-width:62ch; }
.op .op-who p:last-of-type { margin-bottom:0; }
.op .op-who b { color:var(--navy); }
.op .op-who-link { display:inline-block; margin-top:1.2rem; font-weight:700; font-size:.95rem; color:var(--cendre-text); text-decoration:none; border-bottom:1.5px solid var(--beau); }
.op .op-who-link:hover { border-color:var(--cendre); }

/* Vizitka autora — plochá, bez stínu, ať nekonkuruje logu Aptienu vlevo. */
.op .op-autor { display:flex; align-items:center; gap:1rem; margin:1.6rem 0 0; padding-top:1.3rem; border-top:1px solid var(--line); }
.op .op-autor img { flex:none; width:72px; height:72px; border-radius:50%; object-fit:cover; }
.op .op-autor figcaption { display:flex; flex-direction:column; gap:.1rem; }
.op .op-autor__k { font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--cendre-text); }
.op .op-autor b { font-size:1.05rem; letter-spacing:-.02em; color:var(--navy); }
.op .op-autor__role { font-size:.9rem; color:var(--cendre-text); }
.op .op-autor a { align-self:flex-start; margin-top:.25rem; font-size:.85rem; font-weight:700; color:var(--cendre-text); text-decoration:none; border-bottom:1.5px solid var(--beau); }
.op .op-autor a:hover { border-color:var(--cendre); }

/* ── CO TADY NAJDETE ────────────────────────────────────────── */
.op .op-what { background:var(--beau-tint); padding:clamp(2.4rem,5.5vw,3.8rem) clamp(1.2rem,3vw,2.5rem); }
.op .op-what h2 { text-align:center; font-size:clamp(1.4rem,2.7vw,2rem); font-weight:800; letter-spacing:-.035em; color:var(--navy); margin:0 auto clamp(1.6rem,3.5vw,2.3rem); text-wrap:balance; }
.op .op-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; max-width:1020px; margin:0 auto; }
.op .op-tile { display:flex; flex-direction:column; gap:.4rem; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.55rem 1.35rem; text-decoration:none; transition:border-color .15s ease, translate .15s ease, box-shadow .15s ease; }
.op .op-tile:hover { border-color:var(--cendre); translate:0 -3px; box-shadow:0 22px 44px -26px rgb(0 29 57 / .38); }
.op .op-tile:focus-visible { outline:2px solid var(--cendre); outline-offset:3px; }
.op .op-tile b { color:var(--navy); font-size:1.1rem; letter-spacing:-.02em; line-height:1.2; }
.op .op-tile p { color:var(--muted); font-size:.9rem; line-height:1.5; }
.op .op-tile span { margin-top:auto; padding-top:.9rem; font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cendre-text); }
.op .op-tile:hover span::after { content:" →"; }
/* Třetí dlaždice je ta, kvůli které tu jsme — smí být vidět. */
.op .op-tile--hot { background:var(--navy); border-color:var(--navy); }
.op .op-tile--hot b { color:#fff; }
.op .op-tile--hot p { color:rgb(246 244 239 / .78); }
.op .op-tile--hot span { color:var(--mint); }
.op .op-tile--hot:hover { border-color:var(--turquoise); }

/* ── tichá řádka na konec ───────────────────────────────────── */
.op .op-quiet { margin:clamp(1.6rem,3.5vw,2.4rem) auto clamp(1.6rem,3.5vw,2.6rem); max-width:54ch; padding-inline:1.5rem; text-align:center; font-size:.94rem; color:var(--muted); }
.op .op-quiet a { color:var(--cendre-text); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--beau); }
.op .op-quiet a:hover { border-color:var(--cendre); }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:900px) {
  .op .op-mark { width:9.5rem; }
  .op .op-grid { grid-template-columns:1fr; max-width:34rem; }
  .op .op-who-in { grid-template-columns:1fr; gap:1.2rem; }
}
@media (max-width:640px) {
  .op .op-hero { padding-top:1.9rem; }
  .op .op-nums li { flex:1 1 8rem; min-width:0; padding:.8rem 1rem; align-items:center; text-align:center; }
  .op .op-cta .btn { width:100%; }
}