:root{ --bg:#3d3d3d; --logo-bg:#3d3d3d; --fg:#e6e6e6; --muted:#c8c8c8; --accent:#f2f2f2; --maxw:1024px; --gap:12px; --radius:6px; --overlay:rgba(0,0,0,.55); }
*{box-sizing:border-box}
html,body{height:100%}
img{ border:0; }
body{ margin:0; background:var(--bg); color:var(--fg); font:400 16px/1.6 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }
.site-header{ position:sticky; top:0; z-index:50; background:var(--logo-bg); border-bottom:none; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
/* --- BRAND / LOGO (UPRAVENO) --- */
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  color:var(--accent);
  text-decoration:none;
}
.brand-name{
  order:1;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:20px;
  line-height:1;
  color:var(--accent);
}
.brand-mark{
  order:2;
  height:1em;
  width:auto;
  display:inline-block;
  object-fit:contain;
  filter:brightness(10);
  opacity:.95;
  vertical-align:baseline;
}
/* --- /BRAND --- */
.nav{ display:flex; gap:20px; }
/* MENU – jemně menší a tenčí (upraveno) */
.nav a{
  color:var(--accent);
  text-decoration:none;
  font-weight:200; /* původně 350 */
  font-size:13px;  /* původně 14px */
  opacity:.85;
  transition:opacity .18s ease, color .18s ease;
}
.nav a:hover{
  text-decoration:none;
  opacity:1;
  color:#dcdcdc;
}
.hamburger{ display:none; width:44px; height:44px; background:transparent; border:0; position:relative; cursor:pointer; }
.hamburger span{ position:absolute; left:10px; right:10px; height:2px; background:var(--accent); transition:.25s; }
.hamburger span:nth-child(1){ top:14px } .hamburger span:nth-child(2){ top:21px } .hamburger span:nth-child(3){ top:28px }
.hamburger[aria-expanded='true'] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hamburger[aria-expanded='true'] span:nth-child(2){ opacity:0 }
.hamburger[aria-expanded='true'] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

main.container{ padding-top:24px; }
.hero-collage{ display:flex; justify-content:center; margin:24px 0 16px; }

/* >>> HERO KOLÁŽ: větší fotografie (vyšší plocha) bez změny rozvržení
   - základ: aspect-ratio: 4/3
   - držíme plnou šířku v rámci .container (100%), max. šířka omezená
*/
.collage{
  position:relative;
  width:100%;                      /* plná šířka v rámci .container */
  max-width:min(900px,100%);       /* základní limit pro desktop */
  aspect-ratio:4/3;                /* >>> větší (vyšší) plocha */
  overflow:hidden;
  border-radius:8px;
  background:#111;
}

/* Obrázky v koláži – jemnější „zoom“ na větší ploše */
.collage-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity,transform; transform:scale(1.01);
}
.collage-img.is-visible{ opacity:1; transform:scale(1); }

.collage::after{ content:''; position:absolute; inset:0; box-shadow: inset 0 0 60px rgba(0,0,0,.35); pointer-events:none; }

.grid{ display:grid; gap:var(--gap); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width:420px){
  .container{ padding:0 10px; }
  .brand-name{ font-size:18px; }
}

.card{ position:relative; overflow:hidden; border-radius:var(--radius); background:#333; border:none; box-shadow:none; }
.card:focus{ outline:none; }
.card:focus-visible{ outline:2px solid rgba(255,255,255,.3); outline-offset:2px; }
.thumb, .card img{ width:100%; aspect-ratio:4/3; display:block; object-fit:cover; border:none; outline:none; box-shadow:none; }
.overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.25) 60%, rgba(0,0,0,.15)); opacity:0; transition:opacity .2s ease; }
.card:hover .overlay{ opacity:1 }
.card:hover .thumb{ filter:brightness(0.8); }
.overlay .title{ font-size:14px; color:#fff; }

.gallery-meta{ margin:18px 0 10px; color:var(--fg); }
.gallery-meta .g-title{ font-weight:700; letter-spacing:.02em; margin:0 0 6px; font-size:22px; }
.gallery-meta .g-desc{ color:#d0d0d0; margin:0; font-size:14px; }

.viewer{ position:fixed; inset:0; background:rgba(0,0,0,.98); display:none; align-items:center; justify-content:center; z-index:1000; }
.viewer.active{ display:flex }
.viewer-stage{ margin:0; max-width:min(96vw, var(--maxw)); width:100%; text-align:center; }
.viewer-stage img{ max-width:100%; max-height:84vh; object-fit:contain; border-radius:8px; border:none; box-shadow:none; }
.viewer-stage figcaption{ display:none; }
.viewer-close,.viewer-prev,.viewer-next,.viewer-full{
  position:fixed; background:transparent; border:0; color:#fff; font-size:28px; cursor:pointer;
}
.viewer-close{ top:16px; right:20px; }
.viewer-prev{ left:16px; top:50%; transform:translateY(-50%); }
.viewer-next{ right:16px; top:50%; transform:translateY(-50%); }
.viewer-full{ bottom:16px; right:20px; font-size:22px; }

.site-footer{ border-top:none; margin-top:40px; }
.site-footer .container{ padding:16px; color:#d0d0d0; }

/* Mobilní panel menu (hamburger) — layout je definován zde, vzhled pozadí řeší theme.css */
@media (max-width:860px){
  .nav{
    position:absolute;
    top:64px; right:0; left:0;
    background:var(--logo-bg);
    border-bottom:none;
    display:none;
    flex-direction:column;
    padding:10px 16px;
    gap:12px;
  }
  .nav.open{ display:flex }
  .hamburger{ display:block }
}

.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

.contact-list{ list-style:none; padding:0; margin:0; }
.contact-list li{ margin:6px 0; }

/* >>> Desktop: kompromisní výška (mezi původní 3:2 a současnou 4:3)
   - mobil/tablet beze změny
*/
@media (min-width:1024px){
  .hero-collage .collage{
    aspect-ratio:14/10;     /* ≈1.4:1, přesně mezi 3:2 (1.5) a 4:3 (1.333..) */
    max-width:900px;        /* základní limit na běžném desktopu */
  }
}

/* >>> Širší displeje: o chlup menší než 1100px, ale víc než původních 900px */
@media (min-width:1200px){
  .hero-collage .collage{
    aspect-ratio:14/10;     /* držíme kompromisní výšku */
    max-width:1000px;       /* 900 → 1000 (střed mezi 900 a 1100) */
  }
}