/* ========== Proměnné & reset ========== */
:root{
  --bg:#0c0f16;
  --card:#141827;
  --border:#23263a;
  --text:#e7ecf3;
  --muted:#aab0bf;
  --accent:#2f6eea;
  --accent-2:#f2b740;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
small,.small{font-size:.92rem; color:var(--muted)}
hr,.hr{height:1px; background:var(--border); border:0; margin:14px 0}

/* ========== Layout ========== */
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.section{padding:56px 0}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
/* Fotka provozovny – pod adresou, nad mapou */
.provozovna-foto {
  margin: 12px 0 18px;
  text-align: center;
}

.provozovna-foto img {
  width: 60%;
  max-width: 600px;
  border-radius: 14px;
  border: 1px solid #23263a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  height: auto;
}

/* Mobilní verze – přes celou šířku */
@media (max-width: 768px) {
  .provozovna-foto img {
    width: 100%;
    max-width: none;
    border-radius: 12px;
  }
}

.h2{font-size:2rem; margin:0 0 16px}

/* Grid helpers */
.grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:16px;
}
@media (max-width:900px){ .grid{grid-template-columns:repeat(6,1fr)} }
@media (max-width:600px){ .grid{grid-template-columns:repeat(4,1fr)} }

.service-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){ .service-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .service-grid{grid-template-columns:1fr} }
.service-img{border-radius:10px; border:1px solid var(--border)}

/* Buttons */
.button{
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:var(--accent); color:#fff; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 16px rgba(47,110,234,.35);
}
.button:hover{filter:brightness(.95); text-decoration:none}
.button.secondary{background:transparent; color:var(--text); border-color:var(--border)}

/* ========== Header / Nav ========== */
.header{position:sticky; top:0; z-index:50; background:rgba(12,15,22,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; gap:14px; height:56px}
.brand{font-weight:700}
.menu-toggle{display:none; padding:6px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text)}
.header .nav nav{margin-left:auto; display:flex; gap:16px; align-items:center}
.header .nav nav a{color:var(--text); opacity:.9}
.header .nav .cta{background:var(--accent); color:#fff; padding:8px 12px; border-radius:12px}

/* Mobilní menu */
@media (max-width:1024px){
  .menu-toggle{display:inline-block}
  .header .nav nav{
    display:none !important; position:absolute; left:0; right:0; top:56px;
    background:rgba(12,15,22,.98); border-bottom:1px solid var(--border);
    padding:10px 14px; gap:8px; flex-direction:column
  }
  .header .nav nav.open{display:flex !important}
  .header .nav nav a{padding:10px 12px; background:rgba(255,255,255,.06); width:100%; border-radius:12px}
  .nav .cta{width:100%; text-align:center}
}

/* ========== HERO ========== */
.hero{
  /* rezervní barva pod fotkou */
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.45)),
             url("gallery/hero_sstransport_desktop_2560x1000.jpg") center/cover no-repeat;
  border-bottom:1px solid var(--border);
}
.hero__inner{min-height:480px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px}
.hero h1{font-size:3rem; margin:0}
.hero p{font-size:1.2rem; max-width:800px}
@media (max-width:900px){
  .hero{background-image:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.45)),
                         url("gallery/hero_sstransport_mobile_1080x1350.jpg")}
  .hero__inner{min-height:420px}
  .hero h1{font-size:2.2rem}
}

/* ========== Footer ========== */
.footerline{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; border-top:1px solid var(--border); padding:18px 16px}

/* ========== FAB – jen mobil ========== */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:40;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; background:var(--accent); color:#fff; border-radius:999px;
  box-shadow:var(--shadow);
}
@media (min-width:1025px){ .fab{display:none !important} }

/* ========== Cookiebar ========== */
.cookiebar{
  position:fixed; left:12px; right:12px; bottom:10px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(20,24,39,.96); border:1px solid var(--border); border-radius:12px; padding:12px 14px
}
.cookiebar .actions{display:flex; gap:8px; flex-wrap:wrap}

/* ========== Formulář poptávky ========== */
.quote-form{display:grid; gap:12px}
.quote-form *{min-width:0}
.quote-form label{display:flex; flex-direction:column; gap:6px}
.quote-form input[type="text"],
.quote-form input[type="tel"],
.quote-form input[type="email"],
.quote-form textarea{
  width:100%; border:1px solid var(--border); background:#0f1422; color:var(--text);
  border-radius:10px; padding:10px 12px;
}
.quote-form textarea{min-height:120px; resize:vertical}
.file-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:.95rem}
.file-row input[type="file"]{max-width:260px}
.file-row span{word-break:break-word}
.quote-actions{display:flex; gap:10px}

@media (min-width:900px){
  .quote-form{grid-template-columns:1fr 1fr; gap:14px 16px}
  .quote-form .span-2{grid-column:1 / span 2}
}
@media (max-width:520px){
  .file-row{flex-direction:column; align-items:flex-start}
  .file-row input[type="file"]{max-width:100%}
  .file-row span{width:100%}
  .quote-actions{flex-direction:column}
  .quote-actions .button{width:100%}
}

/* ========== Galerie (mřížka) ========== */
.gallery{
  display:grid; gap:10px;
  grid-template-columns:repeat(4,1fr);
}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:10px; border:1px solid var(--border); cursor:zoom-in}
@media (max-width:1024px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .gallery{grid-template-columns:1fr} .gallery img{height:auto} }

/* ========== LIGHTBOX ========== */
.lb-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex;
  align-items:center; justify-content:center; z-index:1000; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.lb-backdrop.open{opacity:1; pointer-events:auto}
.lb-figure{max-width:96vw; max-height:90vh; position:relative}
.lb-figure img{max-width:96vw; max-height:90vh; border-radius:10px; box-shadow:var(--shadow)}
.lb-close,
.lb-prev,
.lb-next{
  position:absolute; top:12px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:8px 10px; border-radius:10px; cursor:pointer; backdrop-filter:blur(6px)
}
.lb-close{right:12px}
.lb-prev{left:12px; top:50%; transform:translateY(-50%)}
.lb-next{right:12px; top:50%; transform:translateY(-50%)}
.lb-caption{
  margin-top:10px; text-align:center; color:#fff; font-size:.95rem; max-width:90vw; word-break:break-word
}

/* Pomocná třída – uzamčení scrollu při otevřeném lightboxu */
.lb-lock{overflow:hidden}

/* --- FIX: aby se obrázky nikdy nedeformovaly --- */
img, picture {
  display: block;
  max-width: 100%;
}

.service-img {
  width: 100%;
  height: auto !important;    /* přebije případný height:100% odjinud */
  object-fit: cover;          /* když se někde nastaví explicitní výška, udrží poměr */
  aspect-ratio: 3 / 2;        /* rezervuje místo a drží poměr 3:2, žádné skákání layoutu */
}

/* pro jistotu zneplatníme globální height na img, pokud někde je */
img[style*="height"],
.card img {
  height: auto !important;
}

/* Karty služeb – srovnat výšku textu, aby obrázky začínaly ve stejné výšce */
.service-grid .card{
  display: grid;
  grid-template-rows: auto 1fr auto; /* nadpis | text (vyplní zbytek) | obrázek */
}

.service-grid .card h3{
  margin-bottom: 8px;
}

.service-grid .card p{
  margin: 0 0 12px;
}

/* zajistí, že obrázek bude vždy ve 3. řádku (stejná výška startu) */
.service-grid .card picture,
.service-grid .card img{
  grid-row: 3;
  align-self: start;
}
/* HERO – posunout text níž a vyrovnat pro různé displeje */
.hero {
  /* nic nemusíš měnit na pozadí */
}

.hero__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20vh 16px 14vh;   /* top / sides / bottom – text půjde níž */
}

/* větší monitory – malinko méně shora */
@media (min-width: 1280px){
  .hero__inner{ padding: 20vh 16px 14vh; }
}

/* telefony – ať to nezabere moc místa nad přehybem */
@media (max-width: 768px){
  .hero__inner{ padding: 20vh 16px 12vh; }
}
/* Galerie - mobilní verze */
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  object-fit: cover;
  border: 1px solid #23263a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Lehký zoom při kliknutí / hover */
.gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* Zarovnání galerie pro menší obrazovky */
@media (max-width: 768px) {
  .gallery {
    padding: 8px;
  }
}
/* --- GALERIE ÚPRAVA (nový vzhled 2025) --- */
.gallery-wrap {
  padding: 2rem 0 4rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  justify-content: center;
}

.gallery a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid #222;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.gallery img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  background: #0d0f14;
}

@media (max-width: 768px) {
  .gallery img {
    height: auto;
  }
}

/* --- KONEC ÚPRAVY GALERIE --- */






/* === Laura patch: mobile menu to the right & cookiebar === */

/* Show hamburger on mobile and push it to the right */
@media (max-width: 768px){
  .header .wrap, .site-header .container { display:flex; align-items:center; }
  .menu-toggle{ display:block !important; margin-left:auto; }
  .header .nav{ margin-left:auto; }

  /* Right-aligned dropdown panel */
  .header .nav nav{
    position:absolute; right:10px; left:auto !important; top:56px;
    display:none; background:var(--bg, #fff);
    border:1px solid var(--border, #e5e7eb); border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12); padding:.6rem .8rem; min-width: 200px;
  }
  .header .nav nav.open{ display:flex !important; }
  .header .nav nav ul{ display:block; margin:0; padding:0; list-style:none; }
  .header .nav nav li{ text-align:right; margin:.35rem 0; }
}

/* Cookiebar baseline (if not present already) */
#cookiebar{ position:fixed; left:1rem; right:1rem; bottom:1rem; background:#fff;
  border:1px solid var(--border, #e5e7eb); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:1rem; z-index:2000; }
#cookiebar.is-hidden{ display:none !important; }
#cookiebar .small a{ text-decoration:underline; }


/* === Laura patch 2: fixed header on desktop === */
:root { --header-h: 56px; }

@media (min-width: 1024px){
  .header{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--bg, #0b0f14);
    backdrop-filter: blur(8px);
  }
  body { padding-top: var(--header-h); }
  main, .container-page, .page { margin-top: 0; }
  .header .nav nav{ top: var(--header-h); }
}


/* === Laura CTA + Poptávka + footer NAP === */
.top-cta{display:flex; gap:.6rem; margin-left:auto; align-items:center}
.btn{padding:.5rem .9rem; border-radius:10px; text-decoration:none; display:inline-block}
.btn-primary{background:#0b7; color:#fff}
.btn-ghost{border:1px solid #ddd; color:#111; background:#fff}
.section{padding:2rem 0}
.section .container{max-width:1100px; margin:0 auto; padding:0 1rem}
#quote-form .row{margin:.6rem 0}
#quote-form input, #quote-form textarea{width:100%; padding:.55rem .7rem; border:1px solid #ddd; border-radius:10px; font:inherit}
#quote-form .actions{display:flex; gap:.6rem; align-items:center; margin-top:.6rem}
.footer-nap{font-size:.95rem; opacity:.9; margin-top:1rem}
@media(max-width:768px){ .top-cta{display:none} }


/* === Laura patch 3: fixed header on mobile too + hide duplicate footer block === */
:root { --header-h: 56px; }
.header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bg, #0b0f14);
  backdrop-filter: blur(8px);
}
body { padding-top: var(--header-h); }
.header .nav nav{ top: var(--header-h); }
/* Hide the extra footer company box if present */
.footer-nap{ display: none !important; }