/* Additions for the Laravel templates. CSP forbids inline style attributes, so the few inline styles of
   the static V3 prototype live here. No new design. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.drawer .burger{display:inline-flex}
.team__ph img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mbar.mbar--3{grid-template-columns:minmax(0,1fr) auto auto}
.mbar--3 .btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Phones narrower than 360 px (iPhone SE 1st gen, small Android): the V3 header (logo + language + menu
   = ~371 px minimum) made the browser widen the page and show it zoomed out. Same design, tighter. */
@media (max-width:359px){
  .hdr__in{gap:10px}
  .hdr .logo{gap:8px}
  .hdr .logo img{width:34px;height:34px}
  .hdr .logo__n{font-size:15px;letter-spacing:.03em}
  .hdr__m{gap:6px}
  .lang--mob .lang__btn{padding:0 8px}
  .drawer .logo__n{font-size:15px}
  /* long button labels (price card, MyronCars) wrap instead of widening the page */
  .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:10px;max-width:100%}
  .pcard{padding:20px}
  .pack li{flex-wrap:wrap;row-gap:2px}
  .pack span{min-width:0;overflow-wrap:anywhere}
  .pack b{white-space:normal}
  /* very long Russian words in headings ("Представительские") hyphenate instead of overflowing */
  h1,h2,h3{hyphens:manual;overflow-wrap:break-word}
}
/* CMS content blocks (home page), built from V3 tokens */
.cblock__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.cblock__in--text{grid-template-columns:minmax(0,760px)}
.cblock__copy h2{margin-bottom:14px}
.cblock__copy p{color:var(--g700);margin-bottom:14px}
.cblock__copy .btn{margin-top:8px}
.cblock__media img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}
.cblock__video{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--navy)}
.cblock__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cblock--navy{background:var(--navy);color:#fff}
.cblock--navy .cblock__copy h2{color:#fff}.cblock--navy .cblock__copy p{color:rgba(255,255,255,.82)}
@media (max-width:899px){.cblock__in{grid-template-columns:1fr;gap:24px}}
.cms-preview-bar{position:sticky;top:0;z-index:100;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:8px 16px;background:#ffe9a8;color:#3d2f00;font:600 13px/1.4 var(--f-head)}
.cms-preview-bar form{display:inline}.cms-preview-bar button{border:1px solid #3d2f00;background:transparent;border-radius:6px;padding:3px 10px;font:inherit;cursor:pointer}

/* Tablet landscape / small laptops (1024–1279 px): the full menu, contacts and buttons do not fit in one row
   (checked at 1024 px: 1090–1166 px needed, Russian menu at 1200 px: 1230 px). The header switches to the burger, as on tablets;
   the drawer holds the same menu and the floating contact button the contacts. */
@media (min-width:1024px) and (max-width:1279px){
  .nav,.hdr__end,.hcontacts{display:none}
  .burger{display:inline-flex;margin-inline-start:auto}
  .hdr__m{display:flex}
}

/* Closed staging: EN / PL texts shown before editorial review (config myron.translation_review). Not sticky: never covers content. */
.review-bar{padding:6px 16px;background:#fff4d1;color:#4a3b00;font:500 12.5px/1.4 var(--f-body,system-ui);text-align:center;border-bottom:1px solid #f0dc9a}

/* Header menu labels never break ("О / компании"): they keep their width, the right block gives way.
   Long EN / PL column titles in the mega menu may take two balanced lines. */
.nav>a,.nav>.dd>button{white-space:nowrap;flex:none}
.mega h3{text-wrap:balance;line-height:1.3}
.mega__col a{text-wrap:pretty}

/* Narrow phones (checked at 320 px on /uslugi/): section header link goes under the title instead of squeezing it */
@media (max-width:480px){
  .cgroup__h{flex-wrap:wrap;row-gap:4px}
  .cgroup__h h2{hyphens:manual}
}
/* ≤359 px: the image beside the text left ~120 px for titles ("произво-дителей"): cards stack, as on the V3 desktop grid */
@media (max-width:359px){
  .scard{flex-direction:column}
  .scard .scard__img{width:auto;flex:none;aspect-ratio:16/9;min-height:0}
  .scard h3{hyphens:manual}
}
/* ≤400 px: WhatsApp in the bottom bar shows its icon only (aria-label keeps the name), so the main button is not cut off */
@media (max-width:400px){
  .mbar--3 .btn--outline:not(.mbar__more){font-size:0;width:48px;padding:0;gap:0}
  .mbar--3 .btn--outline .ic{font-size:15px}
}

/* Articles on phones: the single column must not grow to the widest content (long contents links, images, tables) */
.article>*{min-width:0}
@media (max-width:1023px){.article{grid-template-columns:minmax(0,1fr)}}
.prose img,.prose video,.prose iframe{max-width:100%;height:auto}
.prose table{display:block;max-width:100%;overflow-x:auto}
.prose a,.toc a{overflow-wrap:anywhere}
/* Breadcrumbs: a long last item wraps instead of widening the page */
.crumbs>*{min-width:0;overflow-wrap:anywhere}
/* ≤359 px: a long single word in a page heading ("Представительские") is hyphenated rather than widening the page */
@media (max-width:359px){h1{hyphens:auto}}
/* Long tokens in migrated article text (links, codes) may break when nothing else fits */
.prose li,.prose p,.prose td,.prose th,.prose h2,.prose h3{overflow-wrap:anywhere}