/* V3.10 design refresh: fewer "box next to box" layouts, more editorial structure */

:root{
  --soft-line: rgba(24,49,38,.12);
  --soft-cream: #f7f4ea;
}

/* a little more breathing room */
.section-heading{
  margin-bottom: 34px;
}

/* SERVICE + DETAIL SMALL INFO BLOCKS */
.mini-grid{
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid var(--soft-line);
}

.mini-card{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--soft-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 28px 0 !important;
  display: grid !important;
  grid-template-columns: 56px minmax(180px, .85fr) 1.2fr !important;
  gap: 12px 28px !important;
  align-items: start !important;
}

.mini-card span{
  margin-top: 7px;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7f9085 !important;
}

.mini-card h3{
  margin: 0 !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  line-height: .98 !important;
  letter-spacing: -0.05em !important;
}

.mini-card p{
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  max-width: 540px;
}

/* TIMELINE / PROCESS ON SERVICE PAGES */
.timeline{
  display: block !important;
  border-top: 1px solid var(--soft-line) !important;
}

.timeline-step{
  border-right: 0 !important;
  border-bottom: 1px solid var(--soft-line) !important;
  padding: 30px 0 !important;
  display: grid !important;
  grid-template-columns: 56px minmax(180px, .85fr) 1.2fr !important;
  gap: 12px 28px !important;
  align-items: start !important;
}

.timeline-step:last-child{
  border-bottom: 1px solid var(--soft-line) !important;
}

.timeline-step span{
  margin-top: 7px;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7f9085 !important;
}

.timeline-step h3{
  margin: 0 !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  line-height: .98 !important;
  letter-spacing: -0.05em !important;
}

.timeline-step p{
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  max-width: 560px;
}

/* SYSTEM PAGE CATALOG */
.system-catalog{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.catalog-card{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--soft-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 24px 0 !important;
  grid-template-columns: 240px 1fr !important;
  gap: 26px !important;
  align-items: center !important;
}

.catalog-card:last-child{
  border-bottom: 1px solid var(--soft-line) !important;
}

.catalog-card img{
  height: 180px !important;
  border-radius: 26px !important;
}

.catalog-card div{
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 44px 1fr 56px !important;
  grid-template-rows: auto auto !important;
  gap: 8px 18px !important;
  align-items: center !important;
}

.catalog-card span{
  grid-column: 1;
  grid-row: 1 / 3;
  margin-top: 8px;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7f9085 !important;
}

.catalog-card h2{
  grid-column: 2;
  margin: 0 !important;
  font-size: clamp(32px, 4vw, 46px) !important;
  line-height: .98 !important;
  letter-spacing: -0.05em !important;
}

.catalog-card p{
  grid-column: 2;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  max-width: 560px;
}

.catalog-card b{
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: var(--cream) !important;
  display: grid !important;
  place-items: center !important;
}

/* MANUALS SECTION */
.manual-grid{
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid var(--soft-line);
}

.manual{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--soft-line) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 18px 0 !important;
}

.manual img{
  width: 100% !important;
  height: 140px !important;
  object-fit: contain !important;
  padding: 4px !important;
  background: var(--soft-cream) !important;
  border-radius: 20px !important;
}

.manual span{
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* REALIZACE DETAILS - softer, less boxed */
.project-detail{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.project-head{
  margin-bottom: 20px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--soft-line);
}

/* keep hero cards elegant but a bit lighter */
.detail-copy,
.service-copy{
  box-shadow: 0 18px 44px rgba(16,43,32,.05) !important;
}

@media (max-width: 900px){
  .mini-card,
  .timeline-step{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 22px 0 !important;
  }

  .mini-card span,
  .timeline-step span{
    margin-top: 0;
  }

  .catalog-card{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 20px 0 26px !important;
  }

  .catalog-card img{
    height: 220px !important;
  }

  .catalog-card div{
    grid-template-columns: 34px 1fr 46px !important;
    grid-template-rows: auto auto !important;
    gap: 8px 12px !important;
  }

  .catalog-card h2{
    font-size: 34px !important;
  }

  .manual{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .manual img{
    height: 180px !important;
  }
}

@media (max-width: 700px){
  .section-heading{
    margin-bottom: 24px;
  }

  .mini-card h3,
  .timeline-step h3{
    font-size: 34px !important;
  }

  .mini-card p,
  .timeline-step p,
  .catalog-card p{
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .catalog-card b{
    width: 44px !important;
    height: 44px !important;
  }
}

/* V3.12 – telefony pod kartami na stránce O nás */
.person-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.person-phone{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0 10px 0 6px;
  color:var(--ink);
}

.person-phone small{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7f9085;
}

.person-phone strong{
  font-size:18px;
  letter-spacing:-.02em;
}

.person-phone:hover strong{
  text-decoration:underline;
  text-underline-offset:4px;
}

@media (max-width:700px){
  .person-wrap{
    gap:10px;
  }

  .person-phone{
    padding:0 4px;
  }
}


/* V3.13 – jemné textové a mapové úpravy */
.hero-edge{
  justify-content:flex-start;
}

.map-frame{
  position:relative;
  overflow:hidden;
}

.map-static-link{
  position:relative;
  display:block;
  width:100%;
  height:100%;
}

.map-static-link img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.map-open-note{
  position:absolute;
  right:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(16,43,32,.78);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

@media (max-width:700px){
  .map-open-note{
    right:12px;
    bottom:12px;
    padding:10px 14px;
    font-size:11px;
  }
}


/* V3.14 – interaktivní mapa bez rušivého Google/My Maps chrome.
   Iframe zůstává ovladatelný; pouze jeho okraje s bannerem a tlačítky
   leží mimo ořezávaný viewport mapy. */
.map-frame-clean{
  position:relative !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#163629;
}

.map-frame-clean iframe{
  position:absolute !important;
  width:calc(100% + 170px) !important;
  height:calc(100% + 145px) !important;
  left:-85px !important;
  top:-72px !important;
  margin:0 !important;
  border:0 !important;
  max-width:none !important;
}

@media (max-width:700px){
  .map-frame-clean iframe{
    width:calc(100% + 150px) !important;
    height:calc(100% + 135px) !important;
    left:-75px !important;
    top:-66px !important;
  }
}


/* V3.15 – rozšířená sekce O nás */
.about-story{
  display:grid;
  gap:15px;
  margin-top:26px;
  max-width:620px;
}

.about-story p{
  margin:0 !important;
  display:grid;
  grid-template-columns:10px 1fr;
  gap:14px;
  align-items:start;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.about-dot{
  width:6px;
  height:6px;
  margin-top:10px;
  border-radius:50%;
  background:#78907f;
}

@media (max-width:700px){
  .about-story{
    gap:13px;
    margin-top:22px;
  }

  .about-story p{
    font-size:14px;
    line-height:1.75;
    gap:11px;
  }
}


/* V3.16 – fotografie Milan / Ondřej */
.person-wrap:first-child .person-card img{
  object-position:50% 42%;
}

.person-wrap:last-child .person-card img{
  object-position:50% 34%;
}


/* =========================================================
   V3.19 – mobilní hero: více viditelného videa
   Desktop zůstává beze změny.
   ========================================================= */
@media (max-width:700px){

  /* video je na mobilu důležitější, proto méně tmavý překryv */
  .home-hero{
    min-height:840px !important;
  }

  .hero-video{
    object-position:58% center !important;
  }

  .hero-shade{
    background:
      linear-gradient(180deg,
        rgba(7,24,17,.48) 0%,
        rgba(7,24,17,.20) 38%,
        rgba(7,24,17,.30) 62%,
        rgba(7,24,17,.62) 100%),
      linear-gradient(90deg,
        rgba(7,24,17,.68) 0%,
        rgba(7,24,17,.36) 52%,
        rgba(7,24,17,.08) 100%) !important;
  }

  .hero-content{
    padding-top:128px !important;
    padding-bottom:34px !important;
    gap:16px !important;
  }

  .hero-copy .eyebrow{
    margin-bottom:12px !important;
  }

  .home-hero h1{
    font-size:clamp(43px,12.6vw,54px) !important;
    line-height:.90 !important;
  }

  .hero-lead{
    margin:15px 0 18px !important;
    font-size:13px !important;
  }

  /* Obě hlavní akce zůstávají, ale zabírají jen jeden řádek. */
  .hero-copy .button-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .hero-copy .button-row .btn{
    width:100% !important;
    min-height:47px !important;
    padding:0 10px !important;
    font-size:11px !important;
    white-space:nowrap;
  }

  .hero-copy .btn-light{
    background:rgba(255,255,255,.94) !important;
  }

  .hero-copy .btn-glass{
    background:rgba(10,34,24,.24) !important;
    border-color:rgba(255,255,255,.28) !important;
    backdrop-filter:blur(5px) !important;
    -webkit-backdrop-filter:blur(5px) !important;
  }

  /* Velká informační karta se mění na nízký ovládací panel. */
  .hero-proof{
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:.72fr 1.05fr 1.15fr !important;
    align-items:center !important;
    gap:0 !important;
    padding:7px 8px !important;
    border-radius:18px !important;
    background:rgba(11,35,25,.34) !important;
    border-color:rgba(255,255,255,.18) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
    box-shadow:0 14px 32px rgba(0,0,0,.10) !important;
  }

  .hero-proof > div{
    min-height:48px !important;
    padding:5px 10px !important;
    border-bottom:0 !important;
    border-right:1px solid rgba(255,255,255,.14) !important;
    justify-content:center;
  }

  .hero-proof strong{
    font-size:19px !important;
    line-height:1 !important;
  }

  .hero-proof span{
    font-size:9px !important;
    line-height:1.25 !important;
  }

  .hero-rainbird-proof{
    align-items:flex-start !important;
  }

  .hero-rainbird-proof img{
    width:82px !important;
    max-height:25px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .hero-proof > a{
    grid-column:auto !important;
    min-height:48px !important;
    padding:6px 8px 6px 11px !important;
    font-size:10px !important;
    line-height:1.25 !important;
    align-items:center !important;
  }

  .hero-proof > a b{
    font-size:14px !important;
  }

  /* drobný spodní popisek na mobilu už zbytečně zakrýval video */
  .hero-edge{
    display:none !important;
  }
}

/* Na opravdu úzkých telefonech zůstávají tlačítka pohodlně čitelná. */
@media (max-width:380px){
  .home-hero{
    min-height:820px !important;
  }

  .hero-copy .button-row{
    grid-template-columns:1fr !important;
  }

  .hero-proof{
    grid-template-columns:.7fr 1fr 1fr !important;
  }

  .hero-proof > a{
    font-size:9px !important;
  }
}


/* =========================================================
   V3.20 – mobilní hero: CTA a informační panel níž
   Nadpis DOKONALÁ ZÁVLAHA zůstává přesně na původním místě.
   ========================================================= */
@media (max-width:700px){

  /* Posunujeme jen akční část, ne text hero sekce. */
  .hero-copy .button-row{
    position:relative !important;
    top:170px !important;
    z-index:3 !important;
  }

  .hero-proof{
    position:relative !important;
    top:170px !important;
    z-index:3 !important;
  }
}

/* Na menších displejích trochu menší posun, aby nic nepřeteklo
   do následující sekce. */
@media (max-width:380px){
  .hero-copy .button-row,
  .hero-proof{
    top:145px !important;
  }

  /* ponecháváme dvě tlačítka vedle sebe i zde,
     aby celá akční zóna zůstala nízko a kompaktní */
  .hero-copy .button-row{
    grid-template-columns:1fr 1fr !important;
  }

  .hero-copy .button-row .btn{
    font-size:10px !important;
    padding:0 7px !important;
  }
}


/* V3.21 – online optimalizace */
.hero-fallback{
  background-image:url("image/hero-video-poster.jpg?v=322") !important;
  background-position:center !important;
  background-size:cover !important;
  transition:opacity .25s ease !important;
}
.real-gallery{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.real-gallery button{
  width:100% !important;
  min-width:0 !important;
  aspect-ratio:4/3;
  display:block;
}
.real-gallery img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.map-pan{
  position:relative !important;
  height:580px;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#173629;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.map-pan.is-dragging{cursor:grabbing}
.map-pan-image{
  position:absolute;
  left:0;top:0;
  max-width:none !important;
  width:auto !important;
  height:auto !important;
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
  -webkit-user-drag:none;
}
.map-pan-hint{
  position:absolute;
  right:16px;bottom:16px;
  z-index:2;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(9,34,24,.72);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
  pointer-events:none;
  transition:opacity .25s ease;
}
.map-pan.map-used .map-pan-hint{opacity:0}
@media(max-width:700px){
  .real-gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .real-gallery button{aspect-ratio:1/1.08}
  .map-pan{height:430px;touch-action:pan-y}
  .map-pan-hint{right:12px;bottom:12px;font-size:9px}
}


/* V3.22 – rychlejší start videa + návrat interaktivní mapy */
.hero-media.has-video .hero-fallback,.hero-media[data-hero-video] .hero-fallback{opacity:0 !important;}
.hero-video-single{opacity:1 !important;filter:contrast(1.03) saturate(1.04);backface-visibility:hidden;transform:translateZ(0);}
.hero-video-single.is-ready{opacity:1 !important;}
.map-frame-clean{height:580px !important;}
@media(max-width:700px){.map-frame-clean{height:430px !important;}}
.real-gallery button{background:#eef1ea;}


/* V3.23 – Návrh systému, ovládání a vlastní mapa realizací */
.detail-image-ovladani img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.map-frame-leaflet{
  position:relative;
  height:580px;
  overflow:hidden;
  border-radius:28px;
  background:#143226;
}
#realization-map{
  width:100%;
  height:100%;
  background:#143226;
  touch-action:none;
  cursor:grab;
}
#realization-map:active{cursor:grabbing;}
#realization-map .leaflet-control-attribution{
  background:rgba(8,26,18,.66);
  color:rgba(255,255,255,.66);
  font-size:8px;
  padding:2px 5px;
}
#realization-map .leaflet-control-attribution a{color:rgba(255,255,255,.8);}
#realization-map .leaflet-interactive{pointer-events:none;}
@media(max-width:700px){
  .map-frame-leaflet{height:430px;}
  #realization-map{touch-action:none;}
}


/* V3.24 – ostré AI video, rychlý start a funkční poptávkový formulář */
.form-honeypot{position:absolute !important;left:-10000px !important;width:1px !important;height:1px !important;overflow:hidden !important;}
.form-status{display:none;border-radius:14px;padding:13px 15px;font-size:12px;line-height:1.5;}
.form-status.is-success{display:block;background:#e5f3df;color:#173b29;border:1px solid rgba(23,59,41,.14);}
.form-status.is-error{display:block;background:#fff0ec;color:#7b2e1f;border:1px solid rgba(123,46,31,.14);}
.hero-video-single{will-change:auto;}

/* =========================================================
   V3.28 – mobilní hero: lepší viditelnost trysky a trávníku
   Rozložení textů, tlačítek i proof panelu zůstává beze změny.
   ========================================================= */
@media (max-width:700px){
  /* Posun záběru doleva na hlavní postřikovač v originálním videu. */
  .hero-video,
  .hero-video-single{
    object-position:43% center !important;
  }

  /* Mobilní video bylo zbytečně utopené pod tmavým filtrem. */
  .hero-video-single{
    filter:brightness(1.10) contrast(1.04) saturate(1.08) !important;
  }

  /* Tmavší zůstává hlavně levá část pod textem a spodní akční zóna;
     střed a pravá část nechávají video výrazněji vyniknout. */
  .hero-shade{
    background:
      linear-gradient(180deg,
        rgba(7,24,17,.34) 0%,
        rgba(7,24,17,.08) 36%,
        rgba(7,24,17,.14) 62%,
        rgba(7,24,17,.50) 100%),
      linear-gradient(90deg,
        rgba(7,24,17,.54) 0%,
        rgba(7,24,17,.24) 52%,
        rgba(7,24,17,.04) 100%) !important;
  }

  /* Čitelnost textu i po zesvětlení videa. */
  .hero-copy .eyebrow,
  .home-hero h1,
  .hero-lead{
    text-shadow:0 2px 14px rgba(5,20,14,.58);
  }
}


/* V3.33 – Google My Maps: široký ořez levé části.
   Po kliknutí na bod se interní levý panel Google My Maps otevře,
   ale zůstane mimo viditelný výřez. Mapa samotná zůstává interaktivní. */
.map-frame-google-crop{
  position:relative !important;
  overflow:hidden !important;
  height:580px !important;
  border-radius:28px !important;
  background:#163629 !important;
  isolation:isolate;
}

.map-frame-google-crop iframe{
  position:absolute !important;
  top:-72px !important;
  left:-390px !important;
  width:calc(100% + 500px) !important;
  height:calc(100% + 150px) !important;
  max-width:none !important;
  margin:0 !important;
  border:0 !important;
}

/* Jemný krycí okraj vlevo – schová i případný tenký zbytek Google panelu. */
.map-frame-google-crop::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  background:#163629;
  pointer-events:none;
}

@media(max-width:700px){
  .map-frame-google-crop{
    height:430px !important;
  }

  .map-frame-google-crop iframe{
    top:-68px !important;
    left:-355px !important;
    width:calc(100% + 455px) !important;
    height:calc(100% + 145px) !important;
  }
}


/* V3.34 – realizace: čistý placeholder + přesně vycentrovaný mobilní lightbox */
.project-placeholder .project-head{
  margin-bottom:0;
}

body.lightbox-open{
  overflow:hidden !important;
  overscroll-behavior:none;
}

.lightbox{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
}

.lightbox img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:min(1100px,calc(100vw - 48px)) !important;
  max-height:84vh !important;
  margin:auto !important;
  object-fit:contain !important;
}

.lightbox-close{
  position:fixed !important;
  z-index:5 !important;
  top:calc(16px + env(safe-area-inset-top,0px)) !important;
  right:calc(16px + env(safe-area-inset-right,0px)) !important;
  display:grid !important;
  place-items:center !important;
  width:50px !important;
  height:50px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.32) !important;
  background:rgba(16,43,32,.88) !important;
  color:#fff !important;
  font-size:31px !important;
  font-weight:400 !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.lightbox-close:focus-visible{
  outline:3px solid rgba(216,240,184,.9) !important;
  outline-offset:3px;
}

@media(max-width:700px){
  .lightbox{
    padding:16px !important;
  }

  .lightbox img{
    max-width:calc(100vw - 32px) !important;
    max-height:84vh !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .lightbox-close{
    top:calc(12px + env(safe-area-inset-top,0px)) !important;
    right:calc(12px + env(safe-area-inset-right,0px)) !important;
    width:48px !important;
    height:48px !important;
  }
}


/* V3.35 – mobilní lightbox: viditelný křížek + zavření bez poskoku + bez označení miniatury */
html.lightbox-restoring{
  scroll-behavior:auto !important;
}

.real-gallery button:focus,
.real-gallery button:focus-visible,
.real-gallery button:active{
  outline:none !important;
  box-shadow:none !important;
}

.lightbox{
  z-index:3000 !important;
}

.lightbox img{
  position:relative;
  z-index:1;
}

.lightbox-close{
  position:fixed !important;
  z-index:3100 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:34px !important;
  font-weight:400 !important;
  line-height:1 !important;
  text-align:center !important;
  top:calc(18px + env(safe-area-inset-top,0px)) !important;
  right:calc(18px + env(safe-area-inset-right,0px)) !important;
  color:#fff !important;
  background:rgba(10,27,20,.92) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.34) !important;
}

@media(max-width:700px){
  .lightbox{
    padding:16px 14px !important;
  }

  .lightbox img{
    max-width:calc(100vw - 28px) !important;
    max-height:min(84vh, calc(100svh - 130px)) !important;
    margin-inline:auto !important;
  }

  .lightbox-close{
    top:calc(14px + env(safe-area-inset-top,0px)) !important;
    right:14px !important;
    width:52px !important;
    height:52px !important;
    font-size:36px !important;
  }
}