/* m-home.css: phone route of the home page (W-0056).
   Rule: every visual rule is inside @media (max-width:759px). At >=760px the only thing this file does is hide the
   phone-only blocks (.m-only), so the desktop home renders exactly as before.
   Desktop sections replaced by the phone route carry .d-only (hidden on phones). */

@media (min-width:760px){.m-only{display:none!important}}

@media (max-width:759px){
  .d-only{display:none!important}
  /* 11.10 fix: the phone blocks are styled for the dark «Кино» bands; without their own background they fell on the light
     page colour and the light text became unreadable (contrast 1.03). Dark bands alternate like the desktop home. */
  .home section.m-only{background:var(--bg);color:var(--txt)}
  /* 12.10: pinned by class, not by :nth-of-type(even): a section added in the middle (m-video) must not swap the shades of the rest */
  .home section.m-only.m-find,.home section.m-only.m-master,.home section.m-only.m-start{background:var(--bg2)}
  .home section.m-only.m-price{background:var(--paper);color:var(--ink)}  /* the price block is styled for the light band */
  .m-find .m-h3{margin:32px 0 14px;font-size:22px;line-height:1.2;font-weight:600;color:#fff}
  .m-find .m-tiles{margin-bottom:4px}
  /* generated blocks (inside the generator markers) cannot take a class: hide by id */
  .home #master,.home #sovmestimost{display:none}

  /* ---- 1. first screen: statement + video (the existing hero video) + search ---- */
  .home .hero-home .m-top{padding-top:14px}
  .home .hero-home h1.m-h1{font-size:clamp(34px,9.6vw,42px);line-height:1.1;max-width:none;margin:0 0 8px}
  .home .m-by{margin:0 0 14px;font-size:18px;color:var(--txt-soft)}
  .home .hero-home .hh-grid{padding-top:0;padding-bottom:0}
  .home .hero-home .hh-video{border-radius:10px}
  .home .m-cap{margin:12px 0 0;font-size:14px;line-height:1.5;color:#b5bac1}
  .home .m-cap a{text-decoration:underline}
  .m-find{padding:4px 0 36px}
  .m-find .m-h2{margin-top:16px}
  .m-fallback{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(255,255,255,.06);font-size:17px;font-weight:600;color:#fff}

  /* ---- shared ---- */
  .m-sec{padding:var(--band-y-m) 0;border-top:1px solid var(--line)}
  .m-h2{margin:0 0 20px;font-size:26px;line-height:1.15;font-weight:600}
  .m-link{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:#fff}
  .m-btn{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:16px;border-radius:8px;background:#d6262d;color:#fff;font-size:17px;font-weight:600}

  /* ---- 2. all brands as chips + 6 model tiles ---- */
  .m-chips{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .m-chip{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.04);
    font-family:var(--f-disp);font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:#e9eaec}
  .m-lbl{margin:0 0 12px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-soft)}
  .m-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .m-tiles li{min-width:0}
  .m-tile{display:block;height:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg3)}
  .m-tile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
  .m-tile-n{display:flex;align-items:center;min-height:60px;padding:8px 12px;font-family:var(--f-disp);font-size:17px;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:#fff}

  /* ---- 3. three directions ---- */
  .m-dir-list{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:10px}
  .m-dir{position:relative;display:block;min-height:72px;padding:14px 44px 14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--bg3)}
  .m-dir::after{content:"\203A";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:28px;line-height:1;color:var(--muted)}
  .m-dir b{display:block;margin-bottom:4px;font-family:var(--f-disp);font-size:20px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:#fff}
  .m-dir span{display:block;font-size:16px;line-height:1.45;color:var(--txt-soft)}

  /* ---- 4. master (compact copy of the generated master block) ---- */
  .m-master{padding:36px 0}
  .m-card{background:#fff;color:var(--ink);border-radius:14px;padding:10px 10px 18px}
  .m-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 35%;border-radius:10px}
  .m-card-t{padding:16px 8px 0}
  .m-card .m-h2{color:var(--ink);margin-bottom:12px}
  .m-facts{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
  .m-facts li{position:relative;padding-left:20px;font-size:16px;line-height:1.5;color:#14161a}
  .m-facts li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:#14161a}
  .m-card .m-link{color:var(--ink)}

  /* ---- 5. price ---- */
  .m-price{background:var(--paper);color:var(--ink);border-top:0}
  .m-price .m-h2{color:var(--ink)}
  /* W-0067: one screen (statement with the lowest price, top brands with their «от», the price page); no list of every model */
  .m-plead{margin:0 0 18px;font-size:17px;line-height:1.5;color:#3a3f46}
  .m-pbrands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .m-pb{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:72px;padding:12px 14px;background:#fff;border-radius:12px;color:var(--ink);text-decoration:none;transition:transform .15s}
  .m-pb:active{transform:scale(.97)}
  .m-pb b{font-family:var(--f-disp);font-size:20px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
  .m-pb span{font-family:var(--f-disp);font-size:18px;font-weight:600;color:#c8202a;white-space:nowrap}
  .m-pb:focus-visible{outline:3px solid #14161a;outline-offset:2px}
  .m-note{margin:16px 0 4px;font-size:16px;line-height:1.5;color:#3a3f46}
  .m-price .m-link{color:var(--ink)}

  /* ---- 6. how to start ---- */
  .m-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
  .m-steps li{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:start}
  .m-steps b{font-family:var(--f-disp);font-size:32px;font-weight:600;line-height:1;color:var(--red)}
  .m-steps span{font-size:17px;line-height:1.45;color:#e3e5e8}
  .m-start .msgr7 .cta small{font-size:14px}

  /* ---- 7. three collapsed questions ---- */
  .m-q{border-bottom:1px solid var(--line)}
  .m-q:first-of-type{border-top:1px solid var(--line)}
  .m-q summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 0;font-size:17px;font-weight:600;line-height:1.35;color:#fff;cursor:pointer;list-style:none}
  .m-q summary::-webkit-details-marker{display:none}
  .m-q summary::after{content:"+";flex:0 0 auto;font-size:26px;font-weight:400;line-height:1;color:var(--red)}
  .m-q[open] summary::after{content:"\2212"}
  .m-q p{margin:0 0 16px;font-size:16px;line-height:1.55;color:var(--txt-soft)}
}