/* MACH Content UI — scoped styles for polishing page content without changing text */
/* Scope everything to .mc-scope to avoid conflicts with Shoptet or other pages */
.mc-scope{--accent:#023f78;--text:#1a1c1e;--muted:#6b7280;--panel:#f8f9fa;--border:rgba(0,0,0,.12);--radius:14px;--shadow:0 6px 16px rgba(0,0,0,.06)}

/* Layout & typography */
.mc-scope{color:var(--text);}
.mc-scope .mc-wrap{max-width:1100px;margin-inline:auto;padding-inline:16px}
.mc-scope h1,.mc-scope h2,.mc-scope h3{line-height:1.2;margin:0 0 .5em}
.mc-scope h1{font-weight:800;font-size:clamp(26px,3.4vw,36px);color:var(--accent)}
.mc-scope h2{font-weight:800;font-size:clamp(20px,2.4vw,26px);}
.mc-scope h3{font-weight:700;font-size:clamp(17px,2vw,20px);color:var(--accent)}
.mc-scope p{margin:.5em 0 1em}
.mc-scope ul, .mc-scope ol{margin:.25em 0 1em 1.25em}
.mc-scope li{padding:.25em 0}
.mc-scope strong{font-weight:800}

/* Subtle underline for H2 */
.mc-scope h2{position:relative;padding-bottom:.3em}
.mc-scope h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;background:var(--accent);border-radius:3px}

/* Links & buttons */
.mc-scope a{color:var(--accent);text-decoration:none}
.mc-scope a:hover{text-decoration:underline}
.mc-scope .btn{display:inline-block;padding:.6em 1.1em;border-radius:999px;border:1px solid var(--accent);color:#fff;background:var(--accent);text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
.mc-scope .btn--ghost{background:transparent;color:var(--accent)}

/* Cards & info boxes (wrap any paragraph group in .mc-card or .mc-box) */
.mc-scope .mc-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin:12px 0}
.mc-scope .mc-box{border-left:4px solid var(--accent);background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:12px 0}
.mc-scope .mc-box.info{border-left-color:#0ea5e9}
.mc-scope .mc-box.success{border-left-color:#22c55e}
.mc-scope .mc-box.warn{border-left-color:#eab308}

/* Grid utility for two columns on desktop (keeps single column on mobile) */
.mc-scope .mc-columns{display:grid;gap:12px}
@media (min-width:860px){.mc-scope .mc-columns{grid-template-columns:1fr 1fr}}

/* Definition list look (use simple <p><span class="key">…</span> …) */
.mc-scope .key{display:inline-block;min-width:110px;color:var(--muted);font-weight:600}

/* Tables (if used in text pages) */
.mc-scope table{width:100%;border-collapse:collapse;margin:10px 0}
.mc-scope th{background:#e9ecef;text-align:left}
.mc-scope th, .mc-scope td{padding:10px;border-bottom:1px dashed var(--border)}
.mc-scope tbody tr:hover{background:rgba(0,0,0,.03)}

/* Address & contact styling */
.mc-scope address{font-style:normal;line-height:1.6}
.mc-scope .contact-list{list-style:none;margin:0;padding:0}
.mc-scope .contact-list li{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px dashed var(--border)}
.mc-scope .contact-list li:first-child{border-top:0}
.mc-scope .label{min-width:80px;color:var(--muted)}

/* Spacing helpers (optional) */
.mc-scope .mt-0{margin-top:0}.mc-scope .mb-0{margin-bottom:0}.mc-scope .mt-1{margin-top:.5rem}.mc-scope .mb-1{margin-bottom:.5rem}.mc-scope .mt-2{margin-top:1rem}.mc-scope .mb-2{margin-bottom:1rem}

/* Optional: subtle horizontal rule */
.mc-scope hr{border:none;border-top:1px solid var(--border);margin:14px 0}
/* === Vozový park – fotky aut === */
.mc-scope .car-photo {
  width: 100%;
  border-radius: 10px;
  margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  object-fit: cover;
  max-height: 200px;
}
html {
  scroll-behavior: smooth;
}
/* === Lepší tlačítka na mobilu === */
.mc-scope .mc-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* základ */
.mc-scope .btn{
  padding:14px 18px;
  min-height:48px;                 /* pohodlný tap target */
  border-radius:12px;               /* méně „přefouklý“ tvar než pill */
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* ghost varianta trochu výrazněji */
.mc-scope .btn.btn--ghost{
  background:#fff;
  border:2px solid #023f78;
}

/* MOBIL: tlačítka pod sebe a na celou šířku */
@media (max-width:600px){
  .mc-scope .mc-actions{flex-direction:column}
  .mc-scope .mc-actions .btn{
    width:100%;
    margin:0;                      /* žádné mačkání vedle sebe */
  }
}

/* Pokud nemáš obal .mc-actions, páka „bez HTML úprav“: */
@media (max-width:600px){
  .mc-scope .mc-card .btn{
    display:block;
    width:100%;
    margin:0 0 10px 0;
  }
  .mc-scope .mc-card .btn:last-child{margin-bottom:0}
}
/* === Mobilní odsazení mezi tlačítky === */
@media (max-width:600px){
  .mc-scope .mc-actions{
    flex-direction:column;
    gap:18px;           /* zvětší mezery mezi tlačítky */
  }
  .mc-scope .btn{
    width:100%;
    margin:0 0 10px 0;
  }
}
/* === Fix mezer u tlačítek, když jsou zabalené v <p> uvnitř .mc-actions === */

/* Mobil – tlačítka pod sebe s mezerou */
@media (max-width:600px){
  .mc-scope .mc-actions p{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;      /* mezera mezi tlačítky */
    margin:12px 0 0 0 !important;
  }
  .mc-scope .mc-actions p .btn{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }
}

/* Desktop – hezky vedle sebe s rozestupy */
@media (min-width:601px){
  .mc-scope .mc-actions p{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:14px !important;
    margin:12px 0 0 0 !important;
  }
  .mc-scope .mc-actions p .btn{
    width:auto !important;
    margin:0 !important;
  }
}
/* === Vozový park – tři auta vedle sebe na desktopu === */
.mc-scope .mc-vozovy-park {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 700px) {
  .mc-scope .mc-vozovy-park {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mc-scope .mc-vozovy-park {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Karty vozového parku */
.mc-scope .mc-vozovy-park .mc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.mc-scope .mc-vozovy-park .mc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Obrázek vozidla */
.mc-scope .mc-vozovy-park .car-photo {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

/* Nadpisy a text */
.mc-scope .mc-vozovy-park h3 {
  color: var(--accent);
  margin: 0.6em 0 0.3em;
}

/* === Vozový park: 1–2–3 sloupce, odolné pro Shoptet === */
.mc-scope .mc-vozovy-park{
  display:grid !important;
  gap:18px !important;
  grid-template-columns:1fr !important; /* mobil */
}

/* tablet */
@media (min-width:700px){
  .mc-scope .mc-vozovy-park{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* desktop */
@media (min-width:1024px){
  .mc-scope .mc-vozovy-park{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

/* když Shoptet obalí položky do <p>, udělej ho „průchozí“ pro grid */
.mc-scope .mc-vozovy-park > p{
  display:contents !important;
  margin:0 !important;
}

/* samotná karta uvnitř gridu */
.mc-scope .mc-vozovy-park .mc-card{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  height:100% !important;
}

/* obrázek vozu – jednotná výška a ořez */
.mc-scope .mc-vozovy-park .car-photo{
  width:100% !important;
  height:190px !important;
  object-fit:cover !important;
  border-bottom:1px solid rgba(0,0,0,.1) !important;
}

/* bezpečnostní síť: pokud by Shoptet vkládal <br> nebo .row kolem karet */
.mc-scope .mc-vozovy-park br{display:none !important;}
.mc-scope .mc-vozovy-park .row{display:contents !important;}
/* === Lift efekt pro karty lidí (dispečeři + řidiči) === */
@media (hover:hover) {
  .mc-scope .mc-people .mc-card {
    transition: transform .2s ease, box-shadow .2s ease;
    will-change: transform;
  }
  .mc-scope .mc-people .mc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }
}

/* Přístupnost: klávesnice / dotykové zaostření zvýrazní stejně */
.mc-scope .mc-people .mc-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.1);
  outline: none;
}

/* Respektuje preferenci omezených animací */
@media (prefers-reduced-motion: reduce) {
  .mc-scope .mc-people .mc-card {
    transition: none;
  }
}
/* === Sekce sklady – layout a hover efekt === */
.mc-scope .mc-sklady {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .mc-scope .mc-sklady { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mc-scope .mc-sklady { grid-template-columns: repeat(2, 1fr); }
}

.mc-scope .mc-sklady .mc-card {
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.mc-scope .mc-sklady .mc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.mc-scope .mc-sklady .car-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  margin-top: 10px;
}