/* =========================================================
   OPTIMAL_3_B4.2 — nový úvodní obrázek (bronz-legs.png)
   Plošná fotografie místo „okenního“ oblouku v rámečku:
   fotka vyplňuje pravou část úvodu a měkce přechází do
   papírového podkladu. Načítá se až za b42-theme.css.
   ========================================================= */
.hero {
  min-height: clamp(520px, 44vw, 660px);
  display: flex; align-items: center;
  padding: 4.5rem 0 8rem;
  overflow: visible;
}
.hero .wrap { display: block; position: static; width: 100%; }
.hero .wrap > div:first-child { position: relative; z-index: 3; max-width: 44%; }

/* fotografie – bez rámečku, vyplní pravou část úvodu */
.hero-illustration {
  position: absolute; top: 0; right: 0; bottom: 0; width: 66%;
  margin: 0; z-index: 0;
  background: none; border: 0; border-radius: 0; overflow: hidden;
}
.hero-illustration img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; max-height: none; max-width: none; object-fit: cover; object-position: 62% 40%;
  mix-blend-mode: normal; box-shadow: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-composite: intersect;
}
/* jemné zteplení fotky do palety webu */
.hero-illustration::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--b-paper) 0, rgba(249,245,242,0) 40%),
              linear-gradient(0deg, rgba(249,245,242,.55) 0, rgba(249,245,242,0) 22%);
}
/* štítek „30 let s Vámi“ – kulatý, decentní */
.hero-illustration::after {
  content: "30\00000alet\00000as Vámi"; white-space: pre; text-align: center;
  position: absolute; left: auto; top: auto; right: 7%; bottom: 24%; z-index: 2;
  width: 118px; height: 118px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--b-acc); color: var(--b-card);
  font-family: 'Cinzel', serif; font-size: 1.05rem; line-height: 1.15; letter-spacing: .06em;
  text-transform: uppercase; box-shadow: 0 10px 30px rgba(115,48,60,.28);
  outline: 1px solid rgba(255,253,252,.7); outline-offset: -8px;
}

@media (max-width: 1000px) {
  .hero { display: block; min-height: 0; padding: 3.5rem 0 0 }
  .hero .wrap > div:first-child { max-width: none; padding-bottom: 0 }
  .hero-illustration { position: relative; width: 100vw; height: 380px; margin: 1.5rem 0 0 calc(50% - 50vw); right: auto }
  .hero-illustration img {
    object-position: 60% 40%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .hero-illustration::before { background: linear-gradient(0deg, rgba(249,245,242,.5) 0, rgba(249,245,242,0) 20%) }
  .hero-illustration::after { right: 6%; bottom: 14%; width: 96px; height: 96px; font-size: .9rem; left: auto }
}
@media (max-width: 640px) {
  .hero-illustration { height: 320px }
  .hero-illustration img { height: 100% }
}