/* The same mobile rhythm for advice directories and both article templates. */
/* Reuse the homepage and service-hub rhythm on service details. */
/* Shared mobile rhythm for the two homepages and service directories. */
@media (max-width: 760px) {
  body.home-master-page #main > section:not(.master-hero),
  body.home-master-page #main > .additional-wrap,
  body.home-master-page #main .simple-additional-content > section,
  body.pages-editorial-20261016 main.content-page > .section {
    padding-block: 40px;
  }

  /* Override the earlier !important compact-phone process spacing. */
  body.home-master-page #main .master-process {
    padding-top: 40px !important;
  }

  body.home-master-page #main > .master-hero,
  body.pages-editorial-20261016 main.content-page > .page-hero {
    padding-bottom: 40px;
  }

  /* The Czech hero keeps its spacing in the facts row. */
  body.home-simplified-20261022 #main > .master-hero {
    padding-bottom: 0;
  }

  body.home-simplified-20261022 #main .hero-facts {
    padding-bottom: 40px;
  }

  body.home-master-page #main .master-section-intro {
    margin-bottom: 24px;
  }

  body.home-master-page #main .homepage-service-directory .master-section-intro {
    margin-bottom: 0;
  }

  body.home-master-page #main .homepage-service-directory h2 {
    margin-bottom: 0;
  }

  body.home-master-page #main .homepage-service-directory .section-lead,
  body.home-master-page #main .homepage-service-directory .master-section-intro > p:last-child {
    margin: 12px 0 0;
  }

  body.pages-editorial-20261016 .content-page .service-hub-directory h2 {
    margin-bottom: 12px;
  }

  body.home-master-page #main .homepage-service-directory .illustrated-service-links,
  body.pages-editorial-20261016 .content-page .service-hub-directory .illustrated-service-links {
    margin-block: 24px 0;
  }

  body.home-master-page #main .homepage-service-help {
    margin-top: 24px;
    padding-top: 24px;
  }

  body.home-simplified-20261022 #main .section-mark {
    margin-bottom: 16px;
  }

  body.home-simplified-20261022 #main .price-list {
    margin-top: 24px;
  }

  body.home-simplified-20261022 #main .price-more {
    margin-bottom: 0;
  }

  body.home-simplified-20261022 #main .work-grid {
    gap: 24px;
  }

  body.home-simplified-20261022 #main .process {
    margin-top: 24px;
    padding-bottom: 0;
    gap: 24px;
  }

  body.home-simplified-20261022 #main .simple-additional-content {
    padding-top: 24px;
  }

  body.home-simplified-20261022 #main .simple-additional-content > section:first-child {
    padding-top: 0;
  }

  body.home-simplified-20261022 #main .simple-additional-content > section:last-child {
    padding-bottom: 0;
  }

  body.pages-editorial-20261016 .content-page .page-aside {
    margin-top: 40px;
    padding: 24px;
  }

  body.pages-editorial-20261016 .content-page .page-main h2 {
    margin-block: 32px 12px;
  }

  body.pages-editorial-20261016 .content-page .page-main h2:first-child {
    margin-top: 0;
  }

  body.pages-editorial-20261016 .content-page .journey-panel {
    margin-bottom: 24px;
  }

  body.pages-editorial-20261016 .content-page .journey-panel h2 {
    margin-top: 12px;
  }
}


@media (max-width: 760px) {
  body.pages-editorial-20261016 .content-page .page-hero {
    gap: 24px;
  }

  body.pages-editorial-20261016 .content-page .page-hero .hero-actions {
    margin-top: 24px;
    gap: 12px;
  }

  body.pages-editorial-20261016 .content-page .service-proof-strip {
    padding-top: 24px;
  }

  /* Flow margins give headings one gap, without the old grid gap being added. */
  body.pages-editorial-20261016 .content-page .page-main {
    display: block;
  }

  body.pages-editorial-20261016 .content-page .page-main > :is(p, ul, ol) {
    margin-block: 0 16px;
  }

  body.pages-editorial-20261016 .content-page .page-main > .eyebrow {
    margin-bottom: 0;
  }

  body.pages-editorial-20261016 .content-page .page-main > h3 {
    margin-block: 24px 12px;
  }

  body.pages-editorial-20261016 .content-page .page-main .eyebrow + h2 {
    margin-top: 12px;
  }

  body.pages-editorial-20261016 .content-page .page-main > :first-child {
    margin-top: 0;
  }

  body.pages-editorial-20261016 .content-page .page-main > :last-child {
    margin-bottom: 0;
  }

  body.pages-editorial-20261016 .content-page .article-callout {
    margin-block: 24px;
    padding: 24px;
  }

  body.pages-editorial-20261016 .content-page .article-callout > :last-child {
    margin-bottom: 0;
  }

  body.pages-editorial-20261016 .content-page > .section > .split-layout {
    gap: 24px;
  }
}


/* The legacy article also shows dark-label actions on a dark mobile bar. */
@media (max-width: 900px) {
  body:not(.pages-editorial-20261016) .mobile-sticky-cta > a:not(:first-child) {
    background: #f6f4ed;
    color: #0b0e0c;
  }
}

@media (max-width: 760px) {
  body .content-page:is(.advice-page, .article-page) > .section {
    padding-block: 40px;
  }

  body .content-page:is(.advice-page, .article-page) > .page-hero,
  body .content-page.article-page > .article-intro {
    padding-bottom: 40px;
  }

  body .content-page.article-page .page-main.article-content {
    display: block;
  }

  body .content-page.article-page .article-content > :is(p, ul, ol),
  body .content-page.article-page .article-content > section > :is(p, ul, ol) {
    margin-block: 0 16px;
  }

  body .content-page.article-page .article-content > h2 {
    margin-block: 32px 12px;
  }

  body .content-page.article-page .article-content > h3,
  body .content-page.article-page .article-content > section > h3 {
    margin-block: 24px 12px;
  }

  body .content-page.article-page .article-content > section {
    margin-top: 40px;
  }

  body .content-page.article-page .article-content > section > h2:first-child,
  body .content-page.article-page .article-content > :first-child {
    margin-top: 0;
  }

  body .content-page.article-page .article-content > :last-child,
  body .content-page.article-page .article-content > section > :last-child {
    margin-bottom: 0;
  }

  body .content-page.article-page .article-intro-grid {
    gap: 24px;
  }

  body .content-page.article-page .article-intro h1 {
    margin-bottom: 16px;
  }

  body .content-page.article-page .article-intro .hero-actions {
    gap: 12px;
  }

  body .content-page.article-page :is(.article-answer, .article-checklist, .article-callout) {
    padding: 24px;
  }

  body .content-page.article-page .article-content :is(.article-checklist, .article-callout) {
    margin-block: 40px;
  }

  body .content-page.article-page .article-content :is(.article-checklist, .article-callout) > h2:first-child {
    margin-top: 0;
  }

  body .content-page.article-page .article-content .article-toc {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }

  body .content-page.article-page .article-observations {
    margin-block: 24px;
    gap: 16px;
  }

  body .content-page.article-page .article-observations > div {
    padding: 24px;
  }

  body .content-page.article-page .article-sources {
    margin-top: 40px;
    padding-top: 24px;
  }

  body .content-page.article-page .page-aside {
    margin-top: 40px;
    padding: 24px;
  }

  body .content-page.advice-page :is(.section-heading, .section-header) {
    display: block;
    margin-bottom: 24px;
  }

  body .content-page.advice-page :is(.section-heading, .section-header) h2 {
    margin-block: 0 12px;
  }

  body .content-page.advice-page :is(.section-heading, .section-header) > :last-child {
    margin-bottom: 0;
  }

  body .content-page.advice-page .article-grid {
    gap: 24px;
  }

  body .content-page.advice-page .article-card > div {
    padding: 24px;
  }

  body .content-page.advice-page .article-card h3 {
    margin-block: 12px;
  }

  body .content-page.advice-page .article-card p {
    margin-block: 0 16px;
  }

  body .content-page.advice-page .article-card .eyebrow {
    margin-bottom: 0;
  }

  body .content-page.advice-page .journey-finder {
    margin-block: 24px;
    padding: 24px;
  }

  body .content-page.article-page .article-content > :last-child {
    margin-bottom: 0;
  }
}

/* Shared mobile navigation and enquiry rhythm; desktop layouts stay in their own styles. */
@media (max-width: 900px) {
  body .site-header[data-header] {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    border: 0;
    background: #0b0e0c;
  }

  body.home-simplified-20261022 { padding-top: calc(68px + env(safe-area-inset-top)); }
  html:has(body.home-simplified-20261022) { scroll-padding-top: 84px; }
  body.home-simplified-20261022 #main section[id] { scroll-margin-top: 0; }

  body .site-header .header-inner {
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% - 48px);
    height: 68px;
    min-height: 68px;
    padding-block: 0;
    gap: 12px;
  }

  body .site-header .brand { margin-right: auto; }
  body .site-header .brand img { width: 116px; height: auto; }
  body .site-header .header-actions { display: flex; margin-left: auto; }
  body .site-header .header-phone { display: none; }
  body .site-header .nav-toggle { width: 44px; min-width: 44px; height: 52px; min-height: 52px; }
  body .site-header .language-switch { display: flex; gap: 0; padding: 0; border: 0; background: none; }
  body .site-header .language-switch a { display: grid; place-items: center; min-width: 36px; min-height: 44px; padding: 0; }

  body .site-header #main-nav {
    position: fixed;
    inset: calc(68px + env(safe-area-inset-top)) 0 0;
    width: 100%;
    height: calc(100dvh - 68px - env(safe-area-inset-top));
    min-height: 0;
    max-height: calc(100dvh - 68px - env(safe-area-inset-top));
    margin: 0;
    padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #343a2f;
    border-radius: 0;
    background: #0b0e0c;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  body .site-header #main-nav.is-open { display: flex; flex-direction: column; transform: none; opacity: 1; visibility: visible; }
  body .site-header #main-nav > a {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 56px;
    padding: 12px 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    border-bottom: 1px solid #343a2f;
  }

  body .site-header #main-nav .mobile-nav-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-shrink: 0;
    gap: 12px;
    margin-top: 24px;
    padding: 0;
    border: 0;
  }

  body .site-header #main-nav .mobile-nav-actions a { min-height: 52px; padding: 12px; font-size: 15px; line-height: 1.4; }
  body .site-header #main-nav .mobile-language-links { display: none; }
  body .site-header :is(a, button):focus-visible { outline: 3px solid #f2bf26; outline-offset: 3px; }

  body.home-master-page #main #objednavka .master-enquiry-layout { gap: 24px; }
  body.home-master-page:not(.home-simplified-20261022) #main #objednavka #service-form { padding: 24px; }
  body.home-master-page #main #objednavka #service-form .form-step.is-active {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  body.home-master-page #main #objednavka #service-form .master-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.home-master-page #main #objednavka #service-form :is(label, .master-form-more, .contact-fields-note) { margin: 0; }
  body.home-master-page #main #objednavka #service-form .field-label { display: block; margin: 0 0 8px; color: #0b0e0c; font-size: 16px; line-height: 1.5; font-weight: 700; }
  body.home-master-page #main #objednavka #service-form :is(input:not([type=checkbox]):not([hidden]), select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 14px 12px;
    background: #fff;
    color: #0b0e0c;
    font-size: 16px;
    line-height: 1.5;
  }

  body.home-master-page #main #objednavka #service-form textarea { min-height: 128px; }
  body.home-master-page #main #objednavka #service-form :is(.field-help, .form-submit-note) { color: #54564f; font-size: 14px; line-height: 1.5; }
  body.home-master-page #main #objednavka #service-form #form-message-help { margin: -16px 0 0; }
  body.home-master-page #main #objednavka #service-form .master-form-more { padding: 0; }
  body.home-master-page #main #objednavka #service-form .master-form-more summary { min-height: 48px; padding: 12px 0; font-size: 16px; line-height: 1.5; }
  body.home-master-page #main #objednavka #service-form .master-form-more[open] > label { margin-top: 16px; }
  body.home-master-page #main #objednavka #service-form .consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 14px; line-height: 1.5; }
  body.home-master-page #main #objednavka #service-form :is(.consent, .service-addon-option) > span { display: block; min-width: 0; color: #0b0e0c; }
  body.home-master-page #main #objednavka #service-form .service-addon-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; }
  body.home-master-page #main #objednavka #service-form .service-addon-option[hidden] { display: none; }
  body.home-master-page #main #objednavka #service-form .service-addon-option :is(strong, small) { display: block; line-height: 1.5; }
  body.home-master-page #main #objednavka #service-form .service-addon-option strong { font-size: 16px; }
  body.home-master-page #main #objednavka #service-form .service-addon-option small { margin-top: 4px; font-size: 14px; font-weight: 400; color: #54564f; }
  body.home-master-page #main #objednavka #service-form input[type=checkbox] { width: 22px; height: 22px; min-width: 22px; min-height: 22px; flex: 0 0 22px; padding: 0; }
  body.home-master-page #main #objednavka #service-form .form-actions { margin-top: 24px; }
  body.home-master-page #main #objednavka #service-form [data-submit] { width: 100%; min-height: 56px; font-size: 18px; }
  body.home-master-page #main #objednavka #service-form .form-status:empty { display: none; }
  body.home-master-page #main #objednavka #service-form :is(.home-field-error, .contact-fields-note.is-invalid) { color: #9b1c1c; }

  body.home-simplified-20261022 .enquiry-dialog {
    width: min(680px, calc(100% - 24px));
    max-width: min(680px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    scroll-padding-block: 128px 24px;
  }

  body.home-simplified-20261022 .simple-dialog-heading {
    position: sticky;
    top: -24px;
    z-index: 3;
    margin: -24px -24px 24px;
    padding: 16px 24px;
    border-bottom: 1px solid #d8d8ce;
    background: #f6f4ed;
  }

  body.home-simplified-20261022 .simple-dialog-heading .eyebrow { margin: 0; font-size: 12px; line-height: 1.5; }
  body.home-simplified-20261022 .enquiry-dialog .master-enquiry-copy { margin-bottom: 24px; }
  body.home-simplified-20261022 .enquiry-dialog .master-enquiry-copy h2 { font-size: 30px; }
}

@media (max-width: 359px) {
  body .site-header .header-inner { width: calc(100% - 32px); gap: 8px; }
  body .site-header #main-nav .mobile-nav-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile art direction: preserve repair evidence and avoid unnecessary zoom. */
@media (max-width: 760px) {
  body.home-simplified-20261022 .hero .hero-media {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  body.home-simplified-20261022 .hero .hero-media img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin-left: 0;
    object-fit: cover;
    object-position: 50% 78%;
  }
  body.pages-editorial-20261016 main.content-page section.page-hero > img.page-hero-image:not([src*="illustration-"]) {
    height: auto;
    min-height: 0;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
    background: #eeece4;
  }
  body.pages-editorial-20261016 main.content-page article.article-card > img:not([src*="illustration-"]) {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  body.pages-editorial-20261016 main.content-page article.article-card > img[src*="realny-servis-motor"] {
    object-position: 50% 72%;
  }
  body.pages-editorial-20261016 main.content-page.article-page .tyre-hero-photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  body.pages-editorial-20261016 main.content-page.article-page .tyre-hero-photo img.page-hero-image {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  body:not(.pages-editorial-20261016) main.content-page.article-page .page-hero-image {
    object-fit: contain;
    object-position: center;
  }
  body.pages-editorial-20261016 main.content-page .before-after-pair,
  body.home-simplified-20261022 .before-after-pair,
  body.pages-editorial-20261016 main.content-page .repair-photo-story {
    height: auto;
    min-height: 0;
    grid-auto-rows: auto;
    align-items: start;
  }
  body.pages-editorial-20261016 main.content-page .before-after-pair figure,
  body.home-simplified-20261022 .before-after-pair figure,
  body.pages-editorial-20261016 main.content-page .repair-photo-story figure {
    height: auto;
    min-height: 0;
  }
  body.pages-editorial-20261016 main.content-page .repair-photo-story figure > img,
  body.pages-editorial-20261016 main.content-page .before-after-pair figure > img,
  body.home-simplified-20261022 .before-after-pair figure > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
  }
  body.home-simplified-20261022 .work .work-photo {
    height: auto;
    max-height: 360px;
    aspect-ratio: 700 / 623;
    object-fit: contain;
  }
  body .map-privacy-preview > img {
    height: auto;
    min-height: 0;
    aspect-ratio: 30 / 19;
    object-fit: contain;
  }
  body .site-footer .footer-brand img {
    height: auto;
    aspect-ratio: 272 / 115;
    object-fit: contain;
  }
}

/* Reserve the known intrinsic ratio before lazy photographs arrive. */
@media (max-width: 760px) {
  body main img[width="14"][height="14"] { aspect-ratio: auto 14 / 14; }
  body main img[width="16"][height="16"] { aspect-ratio: auto 16 / 16; }
  body main img[width="18"][height="18"] { aspect-ratio: auto 18 / 18; }
  body main img[width="20"][height="20"] { aspect-ratio: auto 20 / 20; }
  body main img[width="22"][height="22"] { aspect-ratio: auto 22 / 22; }
  body main img[width="24"][height="24"] { aspect-ratio: auto 24 / 24; }
  body main img[width="28"][height="28"] { aspect-ratio: auto 28 / 28; }
  body main img[width="32"][height="32"] { aspect-ratio: auto 32 / 32; }
  body main img[width="272"][height="115"] { aspect-ratio: auto 272 / 115; }
  body main img[width="400"][height="300"] { aspect-ratio: auto 400 / 300; }
  body main img[width="480"][height="600"] { aspect-ratio: auto 480 / 600; }
  body main img[width="480"][height="640"] { aspect-ratio: auto 480 / 640; }
  body main img[width="600"][height="600"] { aspect-ratio: auto 600 / 600; }
  body main img[width="640"][height="800"] { aspect-ratio: auto 640 / 800; }
  body main img[width="700"][height="623"] { aspect-ratio: auto 700 / 623; }
  body main img[width="700"][height="721"] { aspect-ratio: auto 700 / 721; }
  body main img[width="700"][height="933"] { aspect-ratio: auto 700 / 933; }
  body main img[width="700"][height="934"] { aspect-ratio: auto 700 / 934; }
  body main img[width="800"][height="600"] { aspect-ratio: auto 800 / 600; }
  body main img[width="840"][height="560"] { aspect-ratio: auto 840 / 560; }
  body main img[width="900"][height="600"] { aspect-ratio: auto 900 / 600; }
  body main img[width="900"][height="900"] { aspect-ratio: auto 900 / 900; }
  body main img[width="1000"][height="1250"] { aspect-ratio: auto 1000 / 1250; }
  body main img[width="1050"][height="1081"] { aspect-ratio: auto 1050 / 1081; }
  body main img[width="1050"][height="1400"] { aspect-ratio: auto 1050 / 1400; }
  body main img[width="1400"][height="788"] { aspect-ratio: auto 1400 / 788; }
  body main img[width="1400"][height="1050"] { aspect-ratio: auto 1400 / 1050; }
}