/* um-cases-port.css — cases/UTP/H1 render-layer styles ported from Mercedes (10.07.2026, BMW panel port Ф6). v1.0.7
   Sections extracted verbatim from MB main.css (.wc-block family) + MB custom.css (.akpp-note, .um-sec rhythm,
   .wc-compact, .wc-tight, .mobile-hide). Colors ride on var(--main-color) so the site brand blue applies. */

/* ========== Why Choose Block (.wc-block) ========== */
.wc-block {
    font-family: MBCorpoS, Arial, sans-serif;
    color: #262626;
}
.wc-heading {
    margin: 18px 0 10px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: #262626;
}
.wc-callout {
    margin: 8px 0;
    padding: 8px 10px;
    background: #f7f7f7;
    border-left: 6px solid var(--main-color);
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    color: #262626;
}
.wc-list {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #262626;
}
.wc-item {
    margin-bottom: 10px;
    padding-left: 0;
}
.wc-item:last-child {
    margin-bottom: 4px;
}
.wc-dot {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
}
.wc-item-content strong {
    font-weight: 600;
}
.wc-cta {
    margin: 16px 0 12px;
    padding: 12px 8px;
    background: #f7f7f7;
    text-align: center;
    border-radius: 8px;
}
.wc-cta-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #262626;
}
.wc-cta-sub {
    margin: 0;
    font-size: 14px;
    color: #555;
}
.wc-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: nowrap;
}
.wc-btn {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700 !important;
    padding: 12px 6px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}
.wc-btn-phone {
    background: var(--main-color) !important;
    color: #fff !important;
}
.wc-btn-phone svg {
    flex-shrink: 0;
}
.wc-btn-tg {
    border: 2px dashed var(--main-color) !important;
    background: transparent;
    color: var(--main-color) !important;
    padding: 12px 10px;
}
.wc-btn-tg svg {
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .wc-heading {
        font-size: 20px;
    }
    .wc-btn {
        font-size: 14px;
        padding: 12px 25px;
    }
}

/* --- accent plaque + section rhythm (from MB custom.css) --- */
  .akpp-note{
    margin:12px 0 10px; padding:10px 12px;
    background:#f7f7f7; border-left:6px solid var(--main-color);
    border-radius:8px;
  }
  .akpp-lead{ margin:0; font-weight:800; }
  /* 04.06.2026 — unified accent section heading: reuses the shared .akpp-note card
     (same component as #STANDARD_BLOCK(strong) and the homepage). Landing pages
     /atf/, /atf/dct/, /transfer-case/ use <h2 class="akpp-note">.
     Typography matched 1:1 to the strong block's .akpp-lead/<strong> (MBCorpoS sans,
     16px, 700, #262626) so the heading looks identical to the homepage card —
     NOT the big serif heading default. Override the theme h2 serif font explicitly. */
  h2.akpp-note{
    font-family:MBCorpoS, Arial, sans-serif !important;
    font-size:16px; line-height:1.5; font-weight:700; color:#262626; text-align:left;
  }

  /* 04.06.2026 — uniform 15px vertical rhythm between landing sections.
     Wrap each top-level section in <div class="um-sec">. flow-root contains the
     section's internal margins; first/last child margins reset so the section box
     hugs its content; exactly 15px between consecutive sections (no margin collapse,
     no spacer blocks needed). Reusable across landings for a uniform structure. */
  .um-sec{ display:flow-root; }
  .um-sec + .um-sec{ margin-top:15px; }
  /* !important to beat inline margins inside std-blocks (e.g. otz CTA margin:12px 0) */
  .um-sec > :first-child{ margin-top:0 !important; }
  .um-sec > :last-child{ margin-bottom:0 !important; }
  /* zero the standard blocks' own inner edge margins so the visible content sits exactly
     15px from the neighbour section: priv box (#spec inline margin:8px 0),
     corp heading (#corps inline margin-top:20px). */
  .um-sec > #spec{ margin-top:0; margin-bottom:0; }
  .um-sec #corps{ margin-top:0 !important; }

/* ===== 14.06.2026 — homepage УТП (why_choose 46613) mobile compaction — ported from test2 ===== */
/* why_choose УТП — compact mobile + semantic headings.
   Final locked values (validated test2 13.06.2026, top→buttons 554–568px).
   Append to custom.css. Scoped to .wc-compact = homepage block 46613 ONLY
   (post 90525 /ac/ /engine-bay/ stays plain .wc-block, untouched).
   Prod: bump custom.css 1.1.12 -> 1.1.13. */
.wc-compact .wc-item-title{font-family:MBCorpoS,Arial,sans-serif;font-size:16px;line-height:1.3;font-weight:700;color:#262626;margin:0 0 2px}
.wc-compact .wc-item-text{color:#262626;font-weight:400;margin:0}
.wc-compact h2.akpp-note{margin:0 0 12px;line-height:1.3}
.wc-compact .wc-cta-title{font-weight:700;margin:0;text-align:center}
@media (max-width:699px){
 .wc-compact .wc-item-text{font-size:15px;line-height:1.35}
 .wc-compact .wc-item{margin-bottom:6px}
 .wc-compact .wc-item:last-child{margin-bottom:0}
 .wc-compact .wc-list{margin:0}
 .wc-compact .wc-cta-title{font-size:12.5px;line-height:1.3}
 .wc-compact .wc-cta{margin:8px 0 6px;padding:8px 12px}
 .wc-compact .wc-buttons{margin:8px 0 0}
 .wc-compact h2.akpp-note{margin:0 0 10px;padding:10px 12px;line-height:1.25}
}

/* mobile-hide hero banner: hide the desktop H1 hero on phones (global; replaces fragile per-page inline <style> that kept getting stripped). 2026-06-14 */
@media (max-width:768px){.mobile-hide{display:none !important}}

/* wc-tight: extra-compact УТП (opt-in via .wc-tight on .wc-block) — ~30-45% tighter vertical gaps than .wc-compact, to fit УТП+CTA+buttons closer to one mobile screen. Overrides .wc-compact (same specificity, later source). 2026-06-14 */
@media (max-width:699px){
 .wc-tight h2.akpp-note{margin:0 0 6px;padding:7px 12px;line-height:1.2}
 .wc-tight .wc-item{margin-bottom:3px}
 .wc-tight .wc-item-title{line-height:1.18;margin-bottom:1px}
 .wc-tight .wc-item-text{line-height:1.22}
 .wc-tight .wc-cta{margin:6px 0 3px;padding:6px 12px}
 .wc-tight .wc-cta-title{line-height:1.2}
 .wc-tight .wc-buttons{margin:5px 0 0}
}

/* 26.06.2026 — um («галочки») УТП: vertical gap between checkmark items so they don't
   glue together (parity with .wc-compact .wc-item ≈10px). Targets ONLY the direct <p>
   bullets that follow the akpp-note heading inside an um-sec. wc-compact uses .wc-list
   (no direct <p> siblings of akpp-note) and ТО uses .uo-to-utp — neither is matched.
   The note plaque (.um-plate > p) is nested, not a sibling, so it is untouched. */
.um-sec > h2.akpp-note ~ p { margin: 0 0 10px; }


/* ── Cases-block section headings — mirror MB .editor h2 proportions (10.07.2026,
   owner: «интервалы как у мерседеса»). BMW main.css has no .editor h2 rules, so
   «Примеры работ» rendered 24px with no bottom margin and looked glued to the
   28px case title. Scoped to the cases headings only — BMW global h2 untouched. ── */
h2.cs-heading{font-size:50px;line-height:60px;text-align:left;margin:0 0 20px;letter-spacing:0}
h2.cs-case-heading{margin-bottom:20px}
@media (max-width:699px){
  h2.cs-heading{font-size:26px;line-height:40px;margin-bottom:18px}
}

/* ── House menu item: hidden in the BURGER only (10.07.2026, owner 16:29: MB's
   horizontal ribbon DOES show the house — earlier «no house on mobile» call was
   burger-only). Ribbon item (.scroll-menu-list-item--um-home-item) stays visible.
   display:none avoids the hidden-item phantom-margin trap. ── */
@media (max-width:768px){
  .nav-item--um-home-item{display:none!important}
}

/* ── Hero title ACF↔template swap (= MB custom.css 18.06 rules; needed by the
   custom_test2.php hero-H1 port, 10.07.2026): wide desktop shows the ACF <h2>,
   narrow desktop windows swap to the template-H1 div; on mobile UA PHP renders
   a real <h1> server-side instead (neither of these two is output). ── */
.um-hero-tpl{display:none}
@media (max-width:768px){.um-hero-acf{display:none}.um-hero-tpl{display:block}}

/* ── Burger dropdown sub-items (10.07.2026, owner: «услуги серым цветом»). BMW burger
   is DARK (MB's is white md-white-header): BMW main.css whitens top-level items via
   .header.open …, but the desktop-dropdown rule (…dropdown-item .nav-menu .nav-item a
   → var(--text-main-color) #262626) is more specific and left sub-items near-invisible
   on black. Whiten them only in the OPEN burger; desktop hover dropdown (white panel,
   dark text) untouched. Second rule = MB custom.css submenu-caps parity (06.07). ── */
.header.open .nav-wrap .nav .nav-item.dropdown-item .nav-menu .nav-item a{color:#fff}
.nav-wrap .nav .nav-item.dropdown-item .nav-menu .nav-item a{text-transform:uppercase}

/* ── Dropdown head hover contrast (11.07.2026). BMW ribbon/burger are DARK (MB's are
   white), so two main.css collisions surface only here:
   1) Desktop sticky ribbon: .header.md-white-header .header__nav.fixed … .nav-item a
      {color:#fff} (0,7,1) outguns the theme hover recolors (0,6,1/0,7,1) — hovering
      «Популярные услуги» opens the light #F5F8F9 panel but the head label stays
      white-on-white. Recolor the head to var(--text-main-color) like the sub-items.
   2) Burger: top-level .dropdown-item:hover{background:#F5F8F9} is not width-scoped —
      tap paints a light plate inside the dark burger while the label stays white
      (same .fixed chain). Kill the plate and pin label/chevron to burger colors. ── */
@media (min-width:769px){
  .header.md-white-header .header__nav .nav-wrap .nav .nav-item.dropdown-item:hover > a,
  .header.md-white-header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item:hover > a{color:var(--text-main-color)}
}
@media (max-width:768px){
  .header .nav-wrap .nav .nav-item.dropdown-item:hover{background-color:transparent}
  .header.md-white-header .header__nav .nav-wrap .nav > .nav-item.dropdown-item:hover > a,
  .header.md-white-header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item:hover > a{color:#fff}
  .header.md-white-header .header__nav .nav-wrap .nav > .nav-item.dropdown-item:hover::after{border-color:#3366cc}
}