/* ============================================================
   michalovytrubky-shop.cz — mt-montaz-1.css — v1
   STRÁNKA: /montaz-a-servis/ (body.in-montaz-a-servis, type-page)
   Page-specific styly. Reuse GLOBÁLNÍch homepage komponent z mt-homepage CSS
   (.mt-section/.mt-container/.mt-section-head/.mt-section-eyebrow/.mt-btn/
   .mt-trust/.mt-service). Tady jen: native-hide + hero + install grid +
   proces + ceník + servis + FAQ + lead form.
   ZÁVISLOST: mt-docs musí mít :not(.in-montaz-a-servis) (jinak generický
   type-page styl bleeduje do landingu). + mt-homepage CSS (globální komponenty).
   ============================================================ */

/* ---- NATIVE HIDE (skryj nativní obsah Stránky; .mt-montaz je sibling před ním) ---- */
body.in-montaz-a-servis #content-wrapper,
body.in-montaz-a-servis .breadcrumbs-wrapper { display: none !important; }
body.in-montaz-a-servis { background: var(--mt-bg, #FFFFFF); }
/* Defensivní (jako homepage): nativní Shoptet patičku pryč + tmavá patička flush
   na poslední (světlou) sekci — žádná mezera dole. mt-footer-10 už #footer skrývá
   globálně, tohle je pojistka + flush margin. */
body.in-montaz-a-servis #footer.footer { display: none !important; }
body.in-montaz-a-servis .mt-footer { margin-top: 0 !important; }

.mt-montaz { display: block; }
.mt-montaz section { box-sizing: border-box; }
.mt-montaz img { max-width: 100%; }

/* ---- HERO ---- */
.mt-ms-hero {
  background: radial-gradient(120% 130% at 50% 0%, var(--mt-primary-bg, #DBEAFE) 0%, var(--mt-bg-soft, #F5F7FB) 55%);
  padding: clamp(48px, 7vw, 90px) 0 clamp(40px, 5vw, 64px);
}
.mt-ms-hero-in { text-align: center; max-width: 820px; }
.mt-ms-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mt-display); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mt-primary);
  background: rgba(0, 82, 218, .08); padding: 7px 14px; border-radius: var(--mt-radius-pill, 999px);
}
.mt-ms-hero h1 {
  font-family: var(--mt-display); font-weight: 800; color: var(--mt-accent);
  font-size: clamp(30px, 5vw, 52px); line-height: 1.1; letter-spacing: -.02em;
  /* v3: 14ch lámalo věty na 4 řádky; <br> v markup = 1 věta na řádek */
  margin: 18px auto 0; max-width: 24ch;
}
.mt-ms-hero h1 em { color: var(--mt-primary); font-style: normal; }
.mt-ms-hero-lead {
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: var(--mt-text-2, #5b6472);
  margin: 18px auto 0; max-width: 60ch;
}
.mt-ms-hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5vw, 56px);
  margin: 28px 0 0;
}
.mt-ms-hstat { display: flex; flex-direction: column; }
.mt-ms-hstat strong { font-family: var(--mt-display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--mt-accent); line-height: 1; }
.mt-ms-hstat span { font-size: 12.5px; color: var(--mt-text-2); margin-top: 5px; }
.mt-ms-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px 0 0; }
/* Hero tlačítka — čitelná na SVĚTLÉM pozadí (banner-primary/ghost z homepage jsou pro tmavé) */
.mt-ms-btn-primary, .mt-ms-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--mt-display); font-weight: 700; font-size: 15px;
  padding: 13px 24px; border-radius: var(--mt-radius, 10px);
  transition: background var(--mt-dur, .2s), color var(--mt-dur, .2s), transform var(--mt-dur, .2s), border-color var(--mt-dur, .2s);
}
.mt-ms-btn-primary { background: var(--mt-primary); color: #FFFFFF; }
.mt-ms-btn-primary:hover { background: var(--mt-primary-deep, #003BA8); color: #FFFFFF; text-decoration: none; transform: translateY(-2px); }
.mt-ms-btn-ghost { background: var(--mt-bg, #FFFFFF); color: var(--mt-primary); border: 1.5px solid var(--mt-border, #D5DEEC); }
.mt-ms-btn-ghost:hover { border-color: var(--mt-primary); color: var(--mt-primary); text-decoration: none; }

/* ---- CO NAINSTALUJEME ---- */
.mt-ms-ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.mt-ms-ins {
  background: var(--mt-bg, #fff); border: 1px solid var(--mt-border-subtle, #E5EAF2);
  border-radius: var(--mt-radius-md, 14px); padding: 24px;
  transition: transform var(--mt-dur, .2s), box-shadow var(--mt-dur, .2s), border-color var(--mt-dur, .2s);
}
.mt-ms-ins:hover { transform: translateY(-3px); box-shadow: var(--mt-shadow-md); border-color: var(--mt-primary); }
.mt-ms-ins-ic {
  width: 84px; height: 84px; border-radius: var(--mt-radius-md, 14px); display: grid; place-items: center;
  background: var(--mt-bg-soft, #F5F7FB); margin-bottom: 14px; overflow: hidden;
}
.mt-ms-ins-ic .mt-il { width: 68px; height: 68px; display: block; }
.mt-ms-ins h3 { font-family: var(--mt-display); font-size: 17px; font-weight: 700; color: var(--mt-accent); margin: 0 0 7px; }
.mt-ms-ins p { font-size: 14px; line-height: 1.55; color: var(--mt-text-2); margin: 0; }

/* ---- JAK TO PROBÍHÁ ---- */
.mt-ms-proces-sec { background: var(--mt-bg-soft, #F5F7FB); }
.mt-ms-proces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.mt-ms-step { background: var(--mt-bg, #fff); border-radius: var(--mt-radius-md, 14px); padding: 24px; position: relative; }
.mt-ms-step-n {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: var(--mt-primary); color: #fff; font-family: var(--mt-display); font-weight: 800; font-size: 18px; margin-bottom: 14px;
}
.mt-ms-step h4 { font-family: var(--mt-display); font-size: 16px; font-weight: 700; color: var(--mt-accent); margin: 0 0 6px; }
.mt-ms-step p { font-size: 13.5px; line-height: 1.5; color: var(--mt-text-2); margin: 0; }

/* ---- CENÍK ---- */
.mt-ms-cenik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.mt-ms-price {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--mt-bg, #fff); border: 1.5px solid var(--mt-border-subtle, #E5EAF2);
  border-radius: var(--mt-radius-md, 14px); padding: 24px;
}
.mt-ms-price-ic { width: 72px; height: 72px; border-radius: var(--mt-radius-md, 14px); display: grid; place-items: center; background: var(--mt-bg-soft, #F5F7FB); overflow: hidden; }
.mt-ms-price-ic .mt-il { width: 58px; height: 58px; display: block; }
.mt-ms-price-name { font-family: var(--mt-display); font-weight: 700; font-size: 15.5px; color: var(--mt-accent); }
.mt-ms-price-val { font-size: 15px; color: var(--mt-text-2); margin-top: auto; }
.mt-ms-price-val strong { font-family: var(--mt-display); font-size: 24px; font-weight: 800; color: var(--mt-primary); }
.mt-ms-cenik-note { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 22px 0 0; font-size: 13.5px; color: var(--mt-text-2); }
.mt-ms-cenik-note .mt-i { color: var(--mt-success, #10B981); }

/* ---- SERVIS ---- */
.mt-ms-servis-sec { background: var(--mt-bg-soft, #F5F7FB); }
.mt-ms-servis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.mt-ms-sv { background: var(--mt-bg, #fff); border-radius: var(--mt-radius-md, 14px); padding: 26px; border: 1px solid var(--mt-border-subtle, #E5EAF2); }
.mt-ms-sv-ic { width: 84px; height: 84px; border-radius: var(--mt-radius-md, 14px); display: grid; place-items: center; background: var(--mt-bg-soft, #F5F7FB); margin-bottom: 14px; overflow: hidden; }
.mt-ms-sv-ic .mt-il { width: 68px; height: 68px; display: block; }
.mt-ms-sv h3 { font-family: var(--mt-display); font-size: 17px; font-weight: 700; color: var(--mt-accent); margin: 0 0 7px; }
.mt-ms-sv p { font-size: 14px; line-height: 1.55; color: var(--mt-text-2); margin: 0; }

/* ---- CROSS-LINK na michalovytrubky.cz ---- */
.mt-ms-xlink-sec { background: var(--mt-bg, #FFFFFF); }
.mt-ms-xlink { display: flex; align-items: center; gap: 20px; background: var(--mt-primary-bg, #DBEAFE); border-radius: var(--mt-radius-md, 14px); padding: 24px clamp(20px, 3vw, 36px); }
.mt-ms-xlink-ic { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--mt-radius, 10px); display: grid; place-items: center; background: var(--mt-bg, #FFFFFF); overflow: hidden; }
.mt-ms-xlink-ic .mt-il { width: 52px; height: 52px; display: block; }
.mt-ms-xlink-tx { flex: 1; min-width: 0; }
.mt-ms-xlink-tx h3 { font-family: var(--mt-display); font-size: 18px; font-weight: 700; color: var(--mt-accent); margin: 0 0 4px; }
.mt-ms-xlink-tx p { font-size: 14px; line-height: 1.5; color: var(--mt-text-2); margin: 0; }
.mt-ms-xlink-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--mt-primary); color: #FFFFFF; text-decoration: none; font-family: var(--mt-display); font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: var(--mt-radius, 10px); transition: background var(--mt-dur, .2s), transform var(--mt-dur, .2s); }
.mt-ms-xlink-btn:hover { background: var(--mt-primary-deep, #003BA8); color: #FFFFFF; text-decoration: none; transform: translateY(-2px); }
@media (max-width: 700px) { .mt-ms-xlink { flex-direction: column; align-items: flex-start; } .mt-ms-xlink-btn { width: 100%; justify-content: center; } }

/* ---- FAQ ---- */
.mt-ms-faq-wrap { max-width: 820px; }
.mt-ms-faq { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.mt-ms-faq-item { background: var(--mt-bg, #fff); border: 1px solid var(--mt-border-subtle, #E5EAF2); border-radius: var(--mt-radius-md, 14px); overflow: hidden; }
.mt-ms-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; font-family: var(--mt-display); font-weight: 700; font-size: 15.5px; color: var(--mt-accent);
}
.mt-ms-faq-item summary::-webkit-details-marker { display: none; }
.mt-ms-faq-chev { color: var(--mt-primary); flex-shrink: 0; transition: transform var(--mt-dur, .2s); }
.mt-ms-faq-item[open] .mt-ms-faq-chev { transform: rotate(180deg); }
.mt-ms-faq-a { padding: 0 22px 20px; }
.mt-ms-faq-a p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mt-text-2); }

/* ---- POPTÁVKA (lead form) ---- */
.mt-ms-lead-sec { background: var(--mt-bg-soft, #F5F7FB); scroll-margin-top: 80px; }
.mt-ms-lead-wrap { max-width: 940px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.mt-ms-lead-head h2 { font-family: var(--mt-display); font-weight: 800; color: var(--mt-accent); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin: 10px 0 0; }
.mt-ms-lead-head h2 em { color: var(--mt-primary); font-style: normal; }
.mt-ms-lead-head > p { font-size: 15px; line-height: 1.6; color: var(--mt-text-2); margin: 14px 0 0; }
.mt-ms-lead-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--mt-display); font-weight: 700; color: var(--mt-primary); text-decoration: none; }
.mt-ms-lead-phone:hover { text-decoration: underline; }
.mt-ms-form { background: var(--mt-bg, #fff); border: 1px solid var(--mt-border-subtle, #E5EAF2); border-radius: var(--mt-radius-md, 14px); padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt-ms-field { display: flex; flex-direction: column; gap: 6px; }
.mt-ms-field-full { grid-column: 1 / -1; }
.mt-ms-field label { font-family: var(--mt-display); font-size: 13px; font-weight: 700; color: var(--mt-accent); }
.mt-ms-field input, .mt-ms-field textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14.5px; color: var(--mt-accent);
  background: var(--mt-bg-soft, #F5F7FB); border: 1.5px solid var(--mt-border-subtle, #E5EAF2);
  border-radius: var(--mt-radius, 10px); padding: 11px 14px; transition: border-color var(--mt-dur, .2s);
}
.mt-ms-field textarea { resize: vertical; }
.mt-ms-field input:focus, .mt-ms-field textarea:focus { outline: none; border-color: var(--mt-primary); }
.mt-ms-field input.is-err, .mt-ms-field textarea.is-err { border-color: var(--mt-danger, #EF4444); }
.mt-ms-submit {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mt-primary); color: #fff; border: 0; cursor: pointer;
  font-family: var(--mt-display); font-weight: 700; font-size: 15px; padding: 13px 20px;
  border-radius: var(--mt-radius, 10px); transition: background var(--mt-dur, .2s), transform var(--mt-dur, .2s);
}
.mt-ms-submit:hover { background: var(--mt-primary-deep, #003BA8); }
.mt-ms-submit:active { transform: scale(.99); }
.mt-ms-submit[disabled] { opacity: .7; cursor: wait; }
.mt-ms-form-note { grid-column: 1 / -1; font-size: 12px; color: var(--mt-text-hint, #8a93a0); margin: 0; }
.mt-ms-thanks { background: var(--mt-bg, #fff); border: 1px solid var(--mt-border-subtle, #E5EAF2); border-radius: var(--mt-radius-md, 14px); padding: 32px 24px; text-align: center; }
.mt-ms-thanks-ic { width: 64px; height: 64px; border-radius: 999px; margin: 0 auto 12px; background: rgba(16, 185, 129, .12); color: var(--mt-success, #10B981); display: grid; place-items: center; }
.mt-ms-thanks h3 { font-family: var(--mt-display); font-size: 20px; font-weight: 800; color: var(--mt-accent); margin: 0 0 8px; }
.mt-ms-thanks p { font-size: 14.5px; line-height: 1.6; color: var(--mt-text-2); margin: 0; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .mt-ms-ins-grid, .mt-ms-proces, .mt-ms-cenik, .mt-ms-servis { grid-template-columns: repeat(2, 1fr); }
  .mt-ms-lead-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mt-ms-ins-grid, .mt-ms-proces, .mt-ms-cenik, .mt-ms-servis { grid-template-columns: 1fr; }
  .mt-ms-form { grid-template-columns: 1fr; }
  .mt-ms-hero-cta a { width: 100%; justify-content: center; }
}

/* ============================================================
   v4: pár s mt-montaz-4.js (viditelný timer fill — transition řídí JS; ceník skryt). v3 :: INTERAKTIVNÍ STEPPER „Jak to probíhá"
   (nahrazuje 4 statické karty .mt-ms-proces — třídy ponechány pro rollback)
   ============================================================ */
.mt-ms-stepper { margin-top: 40px; }
.mt-ms-steptrack {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin: 0 auto; max-width: 860px;
}
.mt-ms-stepline {
  position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 3px;
  background: rgba(37, 48, 65, .12); border-radius: 999px; z-index: 0;
}
.mt-ms-stepfill {
  display: block; height: 100%; width: 0;
  background: var(--mt-primary, #0052DA); border-radius: 999px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.mt-ms-stepbtn {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mt-display);
}
.mt-ms-stepnum {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #FFFFFF; color: var(--mt-accent, #253041);
  border: 2px solid rgba(37, 48, 65, .18);
  font-weight: 800; font-size: 16px;
  transition: background .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1),
              border-color .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
}
.mt-ms-stepbtn:hover .mt-ms-stepnum { border-color: var(--mt-primary, #0052DA); color: var(--mt-primary, #0052DA); }
.mt-ms-stepbtn.is-active .mt-ms-stepnum {
  background: var(--mt-primary, #0052DA); border-color: var(--mt-primary, #0052DA);
  color: #FFFFFF; transform: scale(1.12);
}
.mt-ms-stepbtn.is-done .mt-ms-stepnum {
  background: var(--mt-primary-bg, #DBEAFE); border-color: var(--mt-primary-bg, #DBEAFE);
  color: var(--mt-primary, #0052DA);
}
.mt-ms-steplbl {
  font-size: 13.5px; font-weight: 700; color: var(--mt-text-2, #5b6472);
  transition: color .25s cubic-bezier(.4, 0, .2, 1);
}
.mt-ms-stepbtn.is-active .mt-ms-steplbl { color: var(--mt-accent, #253041); }
.mt-ms-stepbtn:focus-visible .mt-ms-stepnum { outline: 2px solid var(--mt-primary, #0052DA); outline-offset: 3px; }

.mt-ms-steppanels { position: relative; max-width: 860px; margin: 26px auto 0; }
.mt-ms-steppanel {
  display: none;
  background: #FFFFFF; border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  border-radius: var(--mt-radius-md, 12px);
  box-shadow: 0 10px 30px rgba(37, 48, 65, .06);
  padding: 26px 30px;
  grid-template-columns: 116px 1fr; gap: 24px; align-items: center;
}
.mt-ms-steppanel.is-active { display: grid; animation: msStepIn .3s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes msStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.mt-ms-stepil { width: 116px; height: 116px; }
.mt-ms-stepil .mt-il { width: 100%; height: 100%; }
.mt-ms-steptext h3 {
  font-family: var(--mt-display); font-weight: 800; font-size: 20px;
  color: var(--mt-accent, #253041); margin: 0 0 8px;
}
.mt-ms-steptext p { font-size: 15.5px; line-height: 1.65; color: var(--mt-text-2, #5b6472); margin: 0; }

@media (max-width: 760px) {
  .mt-ms-steplbl { display: none; }
  .mt-ms-stepline { top: 20px; }
  .mt-ms-stepnum { width: 40px; height: 40px; font-size: 15px; }
  .mt-ms-steppanel { grid-template-columns: 1fr; text-align: center; padding: 22px 18px; gap: 14px; }
  .mt-ms-stepil { margin: 0 auto; width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-ms-stepfill, .mt-ms-stepnum, .mt-ms-steplbl { transition: none !important; }
  .mt-ms-steppanel.is-active { animation: none !important; }
}

/* ============================================================
   v5 (09. 07. 2026) :: LEAD = e-mail CTA karta (formulář skryt)
   ============================================================ */
.mt-ms-lead-card {
  background: #FFFFFF; border: 1px solid var(--mt-border-subtle, rgba(37, 48, 65, .08));
  border-radius: var(--mt-radius-md, 12px);
  box-shadow: 0 10px 30px rgba(37, 48, 65, .06);
  padding: 34px 36px; text-align: center;
}
.mt-ms-lead-card-ic { width: 96px; height: 96px; margin: 0 auto 14px; }
.mt-ms-lead-card-ic .mt-il { width: 100%; height: 100%; }
.mt-ms-lead-card h3 {
  font-family: var(--mt-display); font-weight: 800; font-size: 22px;
  color: var(--mt-accent, #253041); margin: 0 0 8px;
}
.mt-ms-lead-card p { font-size: 15.5px; line-height: 1.65; color: var(--mt-text-2, #5b6472); margin: 0 0 20px; }
.mt-ms-lead-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 640px) {
  .mt-ms-lead-card { padding: 24px 18px; }
  .mt-ms-lead-ctas a { width: 100%; justify-content: center; }
}