/* ==========================================================================
   VNITRNI STRANKY — fotograficke zahlavi a opravdove snimky misto sedych ploch.
   Nacita se za landing.css.
   ========================================================================== */

/* ---------- fotograficke zahlavi stranky ---------- */
.phero{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding-block:clamp(26px,5vw,42px) clamp(44px,8vw,84px);
  min-height:clamp(320px,46vw,460px);
  display:flex; align-items:flex-end;
}
.phero__media{ position:absolute; inset:0; z-index:-1; }
.phero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.phero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(20,17,16,.72) 0%, rgba(20,17,16,.5) 34%,
    rgba(20,17,16,.78) 76%, rgba(20,17,16,.93) 100%);
}
.phero__in{ width:100%; }
.phero h1{ color:#fff; font-size:clamp(2.1rem,7vw,3.8rem); margin:.15em 0 .4em; letter-spacing:-.025em; }
.phero .lead{ color:rgba(255,255,255,.88); max-width:40em; }
.phero .eyebrow{ color:#FF6E96; margin-bottom:.5em; }

.crumbs--on{ display:block; font-size:.74rem; color:rgba(255,255,255,.7); margin-bottom:1.1rem; }
.crumbs--on a{ text-decoration:none; border-bottom:1px solid transparent; color:rgba(255,255,255,.82); }
.crumbs--on a:hover{ border-color:rgba(255,255,255,.6); color:#fff; }
.crumbs--on span{ margin-inline:.5em; opacity:.5; }

/* ---------- fotka v kartach sluzeb ---------- */
.card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.card__img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .card__img{ transition:none } }

/* ---------- velky snimek v obsahu (zakrok, o mne) ---------- */
.svc__shot{ border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-2); }
.svc__img{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; }
@media (min-width:880px){ .svc__img{ aspect-ratio:3/4; } }

/* ---------- mrizka hojeni v galerii ---------- */
.gal{ display:grid; gap:clamp(10px,2vw,18px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .gal{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.shot{ margin:0; min-width:0; }
.shot__img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:var(--radius-lg); background:var(--paper-2);
}
.shot figcaption{
  margin-top:.6rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- fotka na karte clanku ---------- */
.post__media{ aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); }
.post__img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.post:hover .post__img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .post__img{ transition:none } }

/* ---------- uvodni obrazek clanku ---------- */
.artcover{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:clamp(26px,5vw,44px); }
.artcover img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* ---------- drobnosti ---------- */
/* .phead zustava! Stranky zakroku a "O mne" ho porad pouzivaji pro dvousloupcove
   zahlavi s fotkou vedle textu. Skryt ho by ty dve stranky vymazalo. */
.phead{ border-bottom:1px solid var(--line); }

/* seznam "co se dozvite" ma stejne odrazky jako telo clanku, ne systemove tecky */
.promise ul{ list-style:none; margin:0; padding:0; }
.promise li{ position:relative; padding-left:22px; margin-bottom:.55em; }
.promise li:last-child{ margin-bottom:0; }
.promise li::before{
  content:""; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--accent);
}
.artmeta--on{ color:rgba(255,255,255,.8); text-shadow:0 1px 2px rgba(20,17,16,.5); }