/* BestAutoService components */

/* ============ Topbar (dark strip) ============ */
.bas-topbar {
  background: var(--bas-dark);
  color: var(--bas-fg-inverse);
  font-family: var(--bas-font-cap);
  font-size: var(--bas-c-crumbs-fs);
  letter-spacing: 0.02em;
}

.bas-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 38px;
}

.bas-topbar a { opacity: 0.85; }
.bas-topbar a:hover { opacity: 1; }

/* ============ Header ============ */
.bas-header {
  position: sticky;
  top: 0;
  z-index: var(--bas-p-z-header);
  background: var(--bas-surface);
  border-bottom: 1px solid var(--bas-line);
}

.bas-header .bas-burger { display: none; }

.bas-header__actions {
  display: none;
  align-items: center;
  gap: 12px;
}

/* screen-reader / skip link */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--bas-p-z-skip);
  width: auto;
  height: auto;
  clip: auto;
  background: var(--bas-accent);
  color: var(--bas-fg-inverse);
  padding: 10px 16px;
  border-radius: var(--bas-radius-pill);
}

.bas-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bas-p-space-24);
  min-height: var(--bas-header-h);
}

.bas-logo {
  font-family: var(--bas-font-heading);
  font-size: 26px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bas-logo__img {
  height: 40px;
  width: auto;
  display: block;
  background-color: var(--bas-surface);
}

.bas-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
}

.bas-nav a {
  color: var(--bas-fg);
  font-weight: 500;
  font-size: var(--bas-p-fs-15);
}

.bas-nav a:hover { color: var(--bas-accent-ink); }

.bas-nav__drop { position: relative; }

.bas-nav__drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bas-nav__drop.is-open > .bas-nav__drop-toggle {
  color: var(--bas-accent-ink);
  font-weight: 600;
}

.bas-nav__caret {
  display: inline-flex;
  color: var(--bas-accent);
}

.bas-nav__caret svg {
  width: 16px;
  height: 16px;
}

/* floating services dropdown (absolute overlay, never shifts layout) */
.bas-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: var(--bas-surface);
  border-radius: var(--bas-radius);
  box-shadow: var(--bas-p-shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--bas-transition), transform var(--bas-transition), visibility var(--bas-transition);
  z-index: var(--bas-p-z-dropdown);
}

.bas-nav__drop.is-open .bas-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bas-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-height: 500px;
  overflow-y: auto;
}

.bas-dropdown li + li { border-top: 1px solid var(--bas-line); }

.bas-dropdown a,
.bas-dropdown__nolink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--bas-p-radius-lg);
  font-size: var(--bas-p-fs-14);
  color: var(--bas-fg);
}

.bas-dropdown a:hover { background: var(--bas-surface-2); }

.bas-dropdown__go {
  display: inline-flex;
  color: var(--bas-accent);
  flex-shrink: 0;
}

.bas-dropdown__go svg {
  width: 16px;
  height: 16px;
}

/* ============ Buttons ============ */
.bas-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--bas-c-btn-padding-y) var(--bas-c-btn-padding-x);
  border-radius: var(--bas-c-btn-radius);
  font-weight: 600;
  font-size: var(--bas-c-btn-fs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--bas-transition), color var(--bas-transition);
}

.bas-btn--ghost {
  background: transparent;
  color: var(--bas-fg);
  border-color: var(--bas-fg);
}
.bas-btn--ghost:hover { background: var(--bas-fg); color: var(--bas-fg-inverse); }

/* ============ Hero — black full-bleed (frame 17) ============ */
.bas-hero--dark {
  position: relative;
  overflow: hidden;
  background: var(--bas-dark);
  color: var(--bas-fg-inverse);
  padding: 56px 0 64px;
}

.bas-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bas-hero__shade {
  position: absolute;
  inset: 0;
  background: var(--bas-dark);
  opacity: 0.45;
}

.bas-hero__wrap {
  position: relative;
}

.bas-hero__glass {
  max-width: 660px;
  background: var(--bas-c-hero-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bas-c-hero-glass-border);
  border-radius: var(--bas-c-hero-glass-radius);
  box-shadow: var(--bas-p-shadow-md);
  padding: 44px;
}

.bas-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bas-font-cap);
  font-size: var(--bas-p-fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bas-accent);
  margin-bottom: 18px;
}

.bas-hero__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bas-accent);
  flex-shrink: 0;
}

.bas-hero--dark h1 {
  color: var(--bas-fg-inverse);
  font-size: var(--bas-fs-h1);
  line-height: var(--bas-lh-display);
}

.bas-hero__lead {
  color: var(--bas-p-white-80);
  font-size: var(--bas-fs-lead);
  max-width: 560px;
}

/* contact pills (2 columns, outline — light hero/dark hero variants) */
.bas-contact-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0 28px;
}

.bas-contact-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--bas-p-white-90);
  color: var(--bas-fg-inverse);
  font-size: var(--bas-p-fs-15);
  transition: background var(--bas-transition);
}

.bas-contact-pill:hover { background: var(--bas-p-white-12); }

.bas-contact-pill__icon {
  display: inline-flex;
  color: var(--bas-accent);
  flex-shrink: 0;
}

.bas-contact-pill__icon svg {
  width: 16px;
  height: 16px;
}

.bas-hero__stats {
  display: flex;
  gap: 28px;
}

.bas-hero__stat-num {
  font-family: var(--bas-font-heading);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  color: var(--bas-fg-inverse);
}

.bas-hero__stat-label {
  color: var(--bas-p-white-65);
  font-size: var(--bas-p-fs-13);
}

/* ============ Contact rows (hero + contacts, design 02) ============ */
.bas-contact-rows {
  display: grid;
  gap: 12px;
  margin: 28px 0 32px;
}

.bas-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bas-fg);
  width: fit-content;
}

.bas-contact-row:hover { color: var(--bas-accent-ink); }

.bas-contact-row__icon {
  width: 16px;
  height: 16px;
  color: var(--bas-accent);
  display: inline-flex;
  flex-shrink: 0;
}

.bas-contact-row__icon svg {
  width: 16px;
  height: 16px;
}

/* (hero stats are defined with the dark hero above) */

/* ============ Marquee (services ribbon) ============ */
.bas-marquee {
  position: relative;
  background: var(--bas-c-marquee-bg);
  color: var(--bas-c-marquee-fg);
  overflow: hidden;
  padding: 14px 0;
}

.bas-marquee__track {
  position: relative;
  display: flex;
  white-space: nowrap;
  font-family: var(--bas-font-cap);
  font-size: var(--bas-c-marquee-fs);
  letter-spacing: var(--bas-p-ls-wider);
  text-transform: uppercase;
  width: max-content;
  animation: bas-marquee 30s linear infinite;
}

.bas-marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 48px;
}

.bas-marquee::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 44%, var(--bas-p-white-22) 50%, transparent 56%);
  animation: bas-marquee-sheen 5s linear infinite;
  pointer-events: none;
}

@keyframes bas-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes bas-marquee-sheen {
  from { transform: translateX(-45%); }
  to { transform: translateX(45%); }
}

@media (prefers-reduced-motion: reduce) {
  .bas-marquee__track { animation: none; }
  .bas-marquee::after { display: none; }
}

/* ============ Services grid (design 02: uppercase titles, go arrow) ============ */
.bas-service-card {
  background: var(--bas-c-card-bg);
  border: 1px solid transparent;
  border-radius: var(--bas-c-card-radius);
  padding: var(--bas-c-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--bas-c-card-gap);
  transition: background var(--bas-transition), border-color var(--bas-transition), transform var(--bas-transition);
}

/* EVERY card turns dark on hover / keyboard focus */
.bas-service-card:hover,
.bas-service-card:focus-visible,
.bas-service-card:focus-within {
  background: var(--bas-c-card-hover-bg);
  border-color: var(--bas-accent);
  color: var(--bas-fg-inverse);
  transform: translateY(-2px);
}

.bas-service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bas-service-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bas-accent);
}

.bas-service-card__icon svg {
  width: 28px;
  height: 28px;
}

.bas-service-card__go {
  color: var(--bas-accent);
  display: inline-flex;
}

.bas-service-card__go svg {
  width: 18px;
  height: 18px;
}

.bas-service-card__title {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  text-transform: uppercase;
}

.bas-service-card__subtitle {
  color: var(--bas-fg-2);
  font-size: var(--bas-fs-caption);
  flex: 1;
}

.bas-service-card:hover .bas-service-card__title,
.bas-service-card:focus-visible .bas-service-card__title,
.bas-service-card:focus-within .bas-service-card__title { color: var(--bas-fg-inverse); }

.bas-service-card:hover .bas-service-card__subtitle,
.bas-service-card:focus-visible .bas-service-card__subtitle,
.bas-service-card:focus-within .bas-service-card__subtitle { color: var(--bas-fg-inverse-soft); }

.bas-service-card:hover .bas-service-card__icon,
.bas-service-card:hover .bas-service-card__go,
.bas-service-card:focus-visible .bas-service-card__icon,
.bas-service-card:focus-visible .bas-service-card__go,
.bas-service-card:focus-within .bas-service-card__icon,
.bas-service-card:focus-within .bas-service-card__go { color: var(--bas-accent-2); }

.bas-service-card:hover .bas-service-card__icon,
.bas-service-card:focus-visible .bas-service-card__icon,
.bas-service-card:focus-within .bas-service-card__icon {
  outline: 1.5px solid var(--bas-accent-2);
  outline-offset: 4px;
}

/* ============ About / trust ============ */
.bas-about__media {
  position: relative;
  border-radius: var(--bas-radius);
  overflow: hidden;
}

.bas-about__media img {
  border-radius: var(--bas-radius);
  width: 100%;
  height: auto;
  aspect-ratio: 28 / 23;
  object-fit: cover;
  display: block;
}

.bas-about__note {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  border: 1px solid var(--bas-c-hero-glass-border);
  border-radius: var(--bas-radius-sm);
  padding: 12px 16px;
  font-size: var(--bas-p-fs-14);
  color: var(--bas-fg-inverse);
  background: var(--bas-c-hero-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--bas-p-shadow-md);
}

.bas-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.bas-trust__item {
  display: grid;
  gap: 10px;
  grid-template-columns: 15px 1fr;
  align-items: start;
}

.bas-trust__marker {
  color: var(--bas-accent);
  display: inline-flex;
  margin-top: 4px;
  flex-shrink: 0;
}

.bas-trust__marker svg {
  width: 20px;
  height: 20px;
}

.bas-trust__title { font-weight: 600; font-size: var(--bas-fs-lead); }
.bas-trust__text { color: var(--bas-fg-2); font-size: var(--bas-fs-small); margin: 0; }

/* ============ Dark section (exhausts) ============ */
.bas-dark__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

.bas-dark .bas-cap { color: var(--bas-info); }
.bas-dark__text { color: var(--bas-fg-inverse); font-size: var(--bas-fs-lead); }

/* dark section has no CTAs in design 02 */

.bas-dark-cards {
  display: grid;
  gap: 16px;
}

.bas-dark-card {
  position: relative;
  overflow: hidden;
  background: var(--bas-dark-2);
  border: 1px solid var(--bas-line-dark);
  border-radius: var(--bas-radius);
  padding: 20px 24px;
}

/* static argon fan: card 1 from top-left, card 2 banded center, card 3 from bottom-right.
   Descendant, not child: on the front page these cards are core blocks, so
   .wp-block-group__inner-container sits between .bas-dark-cards and each card. */
.bas-dark-cards .bas-dark-card:nth-child(1) {
  background: linear-gradient(150deg, var(--bas-p-info-50) 0%, var(--bas-dark-2) 55%);
}

.bas-dark-cards .bas-dark-card:nth-child(2) {
  background: linear-gradient(115deg, var(--bas-dark-2) 0%, var(--bas-p-info-50) 50%, var(--bas-dark-2) 100%);
}

.bas-dark-cards .bas-dark-card:nth-child(3) {
  background: linear-gradient(330deg, var(--bas-p-info-50) 0%, var(--bas-dark-2) 55%);
}

.bas-dark-card__title { font-weight: 600; font-size: var(--bas-p-fs-17); }
.bas-dark-card__text { color: var(--bas-p-white-65); font-size: var(--bas-p-fs-13); margin: 4px 0 0; }

/* ============ Contacts ============ */
.bas-contacts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.bas-contacts__grid h2 { font-size: var(--bas-p-fs-44); }

.bas-contacts__text {
  color: var(--bas-fg);
  font-size: var(--bas-p-fs-16);
}

.bas-contacts__meta { color: var(--bas-fg-2); font-size: var(--bas-p-fs-14); }

.bas-map {
  border-radius: var(--bas-radius);
  overflow: hidden;
  min-height: 380px;
  background: var(--bas-surface-3);
  border: 0;
  width: 100%;
  display: block;
  position: relative;
}

.bas-map-ya {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 640px) {
  /* Narrow screens: the shot is shorter than 380px, so drop the min-height —
     otherwise the surface background shows as an empty strip below the map. */
  .bas-map { min-height: 0; }
  .bas-map-ya { height: auto; }
}

/* ============ Front page rendered from Gutenberg blocks ============ */
/* Page 250 is a core-block document, so every section shell is a wp:group.
   WordPress injects .wp-block-group__inner-container between a group and its
   children at render time — it is not part of the saved markup, which is why the
   editor never shows it. Left as a real box it becomes the one and only grid or
   flex item of .bas-grid--2, .bas-hero__stats, .bas-trust, .bas-dark-cards and
   friends, and every one of those collapses into a single column. Taking it out
   of the box tree restores the exact geometry the template parts had. */
.bas-front .wp-block-group__inner-container {
  display: contents;
}

/* These four were divs or spans in the template parts. As core paragraphs they
   pick up the global `p { margin: 0 0 1em }`, which would open gaps the static
   markup never had. Scoped to .bas-front, so the template parts keep their own
   spacing while they are still around. */
.bas-front .bas-hero__stat-num,
.bas-front .bas-hero__stat-label,
.bas-front .bas-trust__title,
.bas-front .bas-dark-card__title {
  margin: 0;
}

/* The trust title was an inline <span> inside a bare wrapper. As a block it takes
   the body line-height — a 27px box where the font box was 23px — which adds 4px
   to every list item. Inline again, its box matches the old markup to the pixel. */
.bas-front .bas-trust__title {
  display: inline;
}

/* ============ Footer ============ */
.bas-footer {
  background: var(--bas-c-footer-bg);
  color: var(--bas-fg-inverse);
  padding: 56px 0 32px;
}

.bas-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--bas-c-footer-gap);
  margin-bottom: 40px;
}

.bas-footer__text { color: var(--bas-c-footer-text); font-size: var(--bas-c-footer-fs); max-width: 360px; }
.bas-footer__cap { color: var(--bas-c-footer-cap-fg); font-size: var(--bas-p-fs-12); margin-bottom: 14px; }
.bas-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--bas-c-footer-fs); }
.bas-footer a:hover { color: var(--bas-accent); }
.bas-footer__bottom {
  border-top: 1px solid var(--bas-line-dark);
  padding-top: 24px;
  color: var(--bas-p-fg-muted);
  font-size: var(--bas-p-fs-12);
  font-family: var(--bas-font-cap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============ Generic content pages ============ */
/* `.bas-page` always ships together with `.bas-container` on the same element
   (see page.php). Both are single-class specificity and 30-components loads
   after 20-layout, so a `48px 0 80px` shorthand here would silently wipe the
   container's horizontal gutter and leave text flush against the viewport. */
.bas-page {
  padding: 48px var(--bas-gutter) 80px;
}

.bas-page__title { margin-bottom: 32px; }

.bas-page__content a { color: var(--bas-accent-ink); }

/* Native block content (converted from WPBakery) */
.bas-page__content ul.wp-block-list {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  display: grid;
  gap: 10px;
}

.bas-page__content ul.wp-block-list > li {
  position: relative;
  padding-left: 22px;
  line-height: 1.7;
}

.bas-page__content ul.wp-block-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--bas-accent);
}

.bas-page__content .wp-block-image {
  margin: 0 0 1em;
}

.bas-page__content .wp-block-image img {
  border-radius: var(--bas-radius);
}

.bas-page__content p:empty { display: none; }

/* Breadcrumbs (Yoast) on inner pages */
.bas-crumbs {
  font-family: var(--bas-font-cap);
  font-size: var(--bas-c-crumbs-fs);
  letter-spacing: 0.02em;
  color: var(--bas-c-crumbs-fg);
  margin: 0 0 12px;
}

.bas-crumbs a { color: var(--bas-c-crumbs-fg); }
.bas-crumbs a:hover { color: var(--bas-accent-ink); }

/* Core gallery on inner pages — brand radius, Instagram photos */
.bas-page__content .wp-block-gallery img { border-radius: var(--bas-radius); }

/* ============ "Фото работ" — horizontal slider ============
   A row of core/image slides inside one group block, scrolled horizontally
   with CSS scroll-snap. No plugin and no JS: native touch swipe, trackpad
   and keyboard all work.

   WordPress re-adds .wp-block-group__inner-container at render time even with
   "layout":{"type":"default"} saved, so the scroll row lives on that wrapper. */
.bas-slider {
	margin: 0;
}

.bas-slider > .wp-block-group__inner-container {
	display: flex;
	gap: var(--bas-p-space-16);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--bas-line) transparent;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

/* Two slides visible on desktop, one on mobile — the third peeks in and
   signals there is more to scroll. */
.bas-slider .wp-block-image {
	flex: 0 0 calc(56% - var(--bas-p-space-8));
	scroll-snap-align: start;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bas-p-space-8);
}

.bas-slider img {
	width: 100%;
	aspect-ratio: 26 / 15;   /* pen tile 416×240 */
	object-fit: cover;
	border-radius: var(--bas-p-radius-xl);
	background: var(--bas-surface-3);
}

.bas-slider figcaption {
	font-family: var(--bas-font-cap);
	font-size: var(--bas-p-fs-12);
	color: var(--bas-c-crumbs-fg);
	text-align: center;
	line-height: var(--bas-p-lh-body);
}

@media (max-width: 640px) {
	.bas-slider .wp-block-image { flex-basis: 100%; }
}

/* Yoast FAQ block rhythm */
.bas-page__content .schema-faq-section { margin-bottom: 24px; }
.bas-page__content .schema-faq-question { display: block; margin-bottom: 4px; }

/* ============ Related-service cards ("Смежные услуги") ============
   Pen frame 33 Related: white cards, radius 16, padding 20, 16px apart.
   Styling lives here rather than inline in post content, so the mobile
   breakpoint can compact them without !important overrides. */
/* Pen frame Related: label = font-body 16 / foreground-primary, arrow = 18 /
   accent-primary. Dark text with only the arrow in orange. */
.bas-rel-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bas-p-space-12);
	padding: var(--bas-p-space-20);
	border-radius: var(--bas-radius);
	background: var(--bas-surface);
	color: var(--bas-fg);
	font-size: var(--bas-p-fs-16);
	line-height: var(--bas-p-lh-tight);
	text-decoration: none;
	box-sizing: border-box;
	transition: background var(--bas-transition), color var(--bas-transition);
}

.bas-rel-card:hover,
.bas-rel-card:focus-visible {
	background: var(--bas-dark);
	color: var(--bas-fg-inverse);
}

.bas-rel-card__go {
	flex-shrink: 0;
	color: var(--bas-accent);
	font-size: var(--bas-p-fs-18);
	line-height: 1;
}

.bas-rel-card:hover .bas-rel-card__go,
.bas-rel-card:focus-visible .bas-rel-card__go {
	color: var(--bas-accent-2);
}

/* Related strip grid ("Смежные услуги" / "Смотрите также"): max 4 cards per
   row on desktop, the rest wrap to the next row in the same columns
   (pen: 16px apart). Scoped with :has(.bas-rel-card) so the "Что делаем"
   checklist strips keep their 2-column flex layout. Pure CSS — no markup
   change, so no invalid blocks in the editor. */
.bas-strip .wp-block-columns:has(.bas-rel-card) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bas-p-space-16);
}

.bas-strip .wp-block-columns:has(.bas-rel-card) > .wp-block-column { min-width: 0; }

.bas-strip .wp-block-column:has(.bas-rel-card) .bas-rel-card { height: 100%; }

@media (max-width: 1024px) {
	.bas-strip .wp-block-columns:has(.bas-rel-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.bas-strip .wp-block-columns:has(.bas-rel-card) {
		grid-template-columns: 1fr;
		gap: var(--bas-p-space-12);
	}
}

/* ============ Service pages: shared crumbs + CTA (single source in page.php) ============ */
/* Pen frame "Crumbs": mono 12px, foreground-secondary, 32px below. */
.bas-service-crumbs {
	font-family: var(--bas-font-cap);
	font-size: var(--bas-c-crumbs-fs);
	color: var(--bas-c-crumbs-fg);
	margin: 0 0 32px;
}

.bas-service-crumbs a { color: var(--bas-c-crumbs-fg); }
.bas-service-crumbs a:hover { color: var(--bas-accent-ink); }

/* Service hero rhythm matches the pen frames:
   Crumbs pad 24 + 32 gap, Page-hero gap 16, section gaps 14–20.
   No bottom padding: the last .bas-strip supplies its own 48 and the dark
   CTA follows immediately (Related pad [48,80] → CTA in the pen). */
.bas-page--service { padding-top: 24px; padding-bottom: 0; }

.bas-page--service .bas-page__content > *:last-child { margin-bottom: 0; }

/* Content headings inside a page body are their own steps: 54px h1 / 32px h2
   per the pen's service frames — not the 64px hero / 52px section sizes. */
.bas-page__content h1 {
	font-size: var(--bas-fs-h1-content);
	line-height: var(--bas-lh-heading);
}

.bas-page__content h2 {
	font-size: var(--bas-fs-h2-content);
	line-height: var(--bas-lh-heading);
}

.bas-page--service .bas-page__content > h2 { margin: 56px 0 16px; }

.bas-strip h2 { margin-bottom: 20px; }

/* ============ Numbered steps ("Как заправляем") ============
   Pen frame 33: full-width rows stacked vertically (Body gap 14). Inside a row
   the number sits on the LEFT spanning both lines — Oswald 30/600, accent
   orange — and the text block on the right: title 17px, desc 14px, gap 4.
   Column gap 16, so the text starts ~28px in.

   WordPress inserts .wp-block-group__inner-container (display:flow-root with
   core's .is-layout-flow) inside every group block at render time, even with
   "layout":{"type":"default"} in the saved markup. The grid therefore has to
   live on that wrapper, not on .bas-steps / .bas-step themselves. */
.bas-steps > .wp-block-group__inner-container {
	display: grid;
	gap: var(--bas-p-space-14);
}

.bas-step > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: var(--bas-p-space-16) 1fr;
	grid-template-areas:
		'num title'
		'num desc';
	column-gap: var(--bas-p-space-16);
	row-gap: var(--bas-p-space-4);
	align-items: start;
}

.bas-step__num {
	grid-area: num;
	align-self: start;
	font-family: var(--bas-font-heading);
	font-size: var(--bas-p-fs-30);
	font-weight: 600;
	line-height: var(--bas-p-lh-heading);
	color: var(--bas-accent);
	margin: 0;
}

.bas-step__title {
	grid-area: title;
	font-size: var(--bas-fs-lead);
	font-weight: 400;
	line-height: var(--bas-p-lh-tight);
	color: var(--bas-fg);
	margin: 0;
}

.bas-step__desc {
	grid-area: desc;
	font-size: var(--bas-fs-small);
	line-height: var(--bas-p-lh-body);
	color: var(--bas-fg-2);
	margin: 0;
}

/* Full-bleed grey strip for service content groups (className, no inline hacks
   so the block validates in the editor). */
.bas-strip {
	background: var(--bas-c-strip-bg);
	box-shadow: 0 0 0 100vmax var(--bas-c-strip-bg);
	clip-path: inset(0 -100vmax);
	padding-top: var(--bas-c-strip-padding-y);
	padding-bottom: var(--bas-c-strip-padding-y);
	box-sizing: border-box;
}

.bas-eyebrow {
	font-family: var(--bas-font-cap);
	font-size: var(--bas-fs-eyebrow);
	color: var(--bas-accent-ink);
	text-transform: uppercase;
	letter-spacing: var(--bas-p-ls-wide);
}

.bas-cta {
	background: var(--bas-c-cta-bg);
	color: var(--bas-c-cta-fg);
	padding: var(--bas-c-cta-padding-y) 0;
}

.bas-cta__title {
	color: var(--bas-c-cta-fg);
	font-size: var(--bas-c-cta-title-fs);
	line-height: 1.1;
	margin: 0 0 12px;
}

.bas-cta__phones {
	color: var(--bas-c-cta-phones-fg);
	font-size: var(--bas-p-fs-16);
	margin: 0;
}

.bas-cta__phones a { color: var(--bas-c-cta-phones-fg); }
.bas-cta__phones a:hover { color: var(--bas-c-cta-fg); }

@media (max-width: 640px) {
	.bas-cta__title { font-size: 26px; }
}

/* ============ Partners (Gutenberg pattern bestautoservice/partners) ============
   WordPress injects .wp-block-group__inner-container between the grid shell
   and the cards at render time, so the grid itself lives on that wrapper —
   same treatment as .bas-slider and .bas-steps above. */
.bas-partners {
  margin: 32px 0 0;
}

.bas-partners > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bas-partners > .wp-block-group__inner-container > .wp-block-group { min-width: 0; }

@media (max-width: 1024px) {
  .bas-partners > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bas-partners > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

.bas-partner {
  background: var(--bas-surface-2);
  border-radius: var(--bas-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 460px;
}

/* Nested .wp-block-group__inner-container wrappers (card → body → text)
   are real boxes at render time; take them out of the box tree so the
   flex column below sees h2 / p / .bas-partner__site directly —
   same treatment as .bas-front. */
.bas-partner > .wp-block-group__inner-container,
.bas-partner__body > .wp-block-group__inner-container {
  display: contents;
}

.bas-partner__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.bas-partner h2,
.bas-partner h3 {
  margin: 0;
  font-family: var(--bas-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  min-height: 2.6em; /* ровняем начало текста во всех карточках */
}

.bas-partner p { margin: 0; }

.bas-partner p:not(.bas-partner__site) {
  color: var(--bas-fg-2);
  font-size: 14px;
}

.bas-partner__site {
  font-weight: 600;
  font-size: 15px;
}

/* Ссылка всегда внизу карточки (card — flex-колонка). */
.bas-partner .bas-partner__site {
  margin: auto 0 0;
  padding-top: 8px;
}

.bas-partner__site a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bas-partner__site a::after {
  content: '\2197';
  color: var(--bas-accent);
}

/* ============ Partners: media cards (page 992) ============
   Карточки 1–2: фото на весь фон, текст — на стеклянной плашке
   с blur, прижатой к низу. Высота ряда задаётся min-height,
   grid stretch выравнивает карточки. */
.bas-partner--media {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: var(--bas-fg-inverse);
}

/* Фото — обычным блоком из редактора, растянуто на карточку. */
.bas-partner--media .bas-partner__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.bas-partner--media .bas-partner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Затемнение низа под плашкой — читаемость текста. */
.bas-partner--media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(20 20 20 / 0) 35%, rgb(20 20 20 / 0.45));
  pointer-events: none;
}

.bas-partner--media .bas-partner__body {
  flex: none;
  position: relative;
  margin: auto 16px 16px;
  padding: 20px 22px;
  background: var(--bas-p-black-50);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bas-c-hero-glass-border);
  border-radius: var(--bas-radius);
  box-shadow: var(--bas-p-shadow-md);
}

.bas-partner--media .bas-partner__body h2 {
  color: var(--bas-fg-inverse);
}

.bas-partner--media .bas-partner__body p:not(.bas-partner__site) {
  color: var(--bas-p-white-80);
}

.bas-partner--media .bas-partner__site a {
  color: var(--bas-accent-2);
}

/* ============ Drive video (/contact) ============
   Vertical story-style video: fixed 300x600, cropped to fill,
   centered figure. The core video block does not support a custom
   className, so the styles are scoped to the contact page body class
   instead of the generic .has-custom-css marker. */
.bas-contact-page .wp-block-video.has-custom-css {
  width: 300px;
  max-width: 100%;
  margin: 16px 0 40px;
}

.bas-contact-page .wp-block-video.has-custom-css video {
  width: 300px;
  max-width: 100%;
  height: 600px;
  object-fit: cover;
  aspect-ratio: auto; /* core style puts 16:9 — the file is vertical, size comes from the explicit dims */
  border-radius: var(--bas-radius-sm);
  box-shadow: var(--bas-p-shadow-md);
}

@media (max-width: 640px) {
  /* Phone: full-width frame, never taller than the screen, centered.
     object-fit stays cover, so the max-height clamp crops the sides
     instead of stretching the picture. */
  .bas-contact-page .wp-block-video.has-custom-css {
    width: 100%;
    margin: 16px auto 40px;
  }

  .bas-contact-page .wp-block-video.has-custom-css video {
    width: 100%;
    height: auto;
    max-height: 100vh; /* fallback */
    max-height: 100dvh;
  }
}

@media (max-width: 640px) {
  .bas-partner { min-height: 400px; }
}

@media (max-width: 1024px) {
  .bas-dark__grid,
  .bas-contacts__grid { grid-template-columns: 1fr; }
}

/* ============ Lead form (/contact) ============
   Plain HTML form, [bas_contact_form] shortcode. No JS: admin-post
   round-trip with query flags (bas_sent / bas_err). */
.bas-form {
  background: var(--bas-surface-2);
  border-radius: var(--bas-radius);
  border: 1px solid var(--bas-line);
  padding: 24px;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}

.bas-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 640px) {
  .bas-form__row { grid-template-columns: 1fr; }
}

.bas-form__field {
  margin: 0;
  display: grid;
  gap: 6px;
}

.bas-form__field label {
  font-size: 14px;
  font-weight: 600;
}

.bas-form__field input[type='text'],
.bas-form__field input[type='tel'],
.bas-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bas-line);
  border-radius: var(--bas-radius-sm, 10px);
  background: var(--bas-surface);
  font: inherit;
  font-size: 16px; /* ≥16px — iOS не зумит фокус */
}

.bas-form__field input:focus,
.bas-form__field textarea:focus {
  outline: 2px solid var(--bas-accent);
  outline-offset: 1px;
  border-color: var(--bas-accent);
}

.bas-form__consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--bas-fg-muted-strong);
}

.bas-form__consent input { margin-top: 3px; width: auto; }

.bas-form__actions {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bas-form__submit {
  border: 0;
  border-radius: var(--bas-radius-sm, 10px);
  background: var(--bas-accent-ink);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  cursor: pointer;
}

.bas-form__submit:hover { filter: brightness(1.05); }
.bas-form__submit:focus-visible { outline: 2px solid var(--bas-accent-2); outline-offset: 2px; }

.bas-form__note { font-size: 14px; color: var(--bas-fg-muted-strong); }

/* honeypot */
.bas-form__honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* admin-post round-trip notices carry the same classes */
p.bas-form__success {
  background: var(--bas-surface-2);
  border-left: 4px solid var(--bas-success);
  padding: 16px 20px;
  border-radius: var(--bas-radius);
  margin: 24px 0 0;
  font-weight: 600;
}

p.bas-form__error {
  background: var(--bas-surface-2);
  border-left: 4px solid var(--bas-danger);
  padding: 16px 20px;
  border-radius: var(--bas-radius);
  margin: 24px 0 0;
}

/* ============ Footer widget areas ============
   Columns are CMS-editable (Внешний вид → Виджеты). WP block widgets
   print their own classes here — map them onto the footer styles. */
.bas-footer__col .wp-block-heading,
.bas-footer__col .widget-title,
.bas-footer__col h2.widgettitle {
  color: var(--bas-c-footer-cap-fg);
  font-size: var(--bas-p-fs-12);
  margin: 0 0 14px;
}

.bas-footer__col .menu,
.bas-footer__col .menu ul,
.bas-footer__col .wp-block-list,
.bas-footer__col .wp-block-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--bas-c-footer-fs);
}

.bas-footer__col .menu li .sub-menu { gap: 6px; margin-top: 6px; padding-left: 12px; }

.bas-footer__col .widget_nav_menu .menu > li { margin: 0; }

.bas-footer__col .wp-block-image,
.bas-footer__col figure.wp-block-embed {
  margin: 0 0 12px;
}

.bas-footer__col .wp-block-image img {
  height: auto;
  max-width: 100%;
  display: block;
}

.bas-footer__col .wp-block-paragraph,
.bas-footer__col .wp-block-quote {
  margin: 0 0 12px;
  font-size: var(--bas-c-footer-fs);
}


/* Archive/search templates use the same spacing and surfaces as service pages. */
.bas-post-list { display: grid; gap: var(--bas-p-space-32); }
.bas-post-card { padding-block: var(--bas-p-space-24); border-bottom: 1px solid var(--bas-line); }
.bas-post-card img { max-height: 360px; width: auto; margin-block: var(--bas-p-space-16); border-radius: var(--bas-radius); }
.bas-search-form { display: flex; flex-wrap: wrap; gap: var(--bas-p-space-12); margin-block: var(--bas-p-space-24); }
.bas-search-form label { flex: 1 1 240px; }
.bas-search-form input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--bas-line); border-radius: var(--bas-radius); font: inherit; }
.bas-page .nav-links { display: flex; flex-wrap: wrap; gap: var(--bas-p-space-12); margin-block: var(--bas-p-space-24); }
.bas-page .page-numbers { padding: 8px 12px; border: 1px solid var(--bas-line); border-radius: var(--bas-radius); }
.bas-page .page-numbers.current { background: var(--bas-fg); color: var(--bas-fg-inverse); }

/* Карточки отзывов (Яндекс Карты / Google) — блок «Отзывы клиентов» на /about/. */
.bas-review { display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: var(--bas-p-space-20); border: 1px solid var(--bas-line);
  border-radius: var(--bas-radius); background: var(--bas-surface); }
.bas-review__rating { display: flex; align-items: baseline; gap: 8px; }
.bas-review__score { font-family: var(--bas-font-heading); font-size: 34px; line-height: 1; color: var(--bas-fg); }
.bas-review__stars { color: var(--bas-accent); letter-spacing: 2px; }
.bas-review__stars .is-half { opacity: .45; }
.bas-review__source { font-family: var(--bas-font-cap); font-size: var(--bas-p-fs-12);
  color: var(--bas-fg-2); text-transform: uppercase; letter-spacing: var(--bas-p-ls-wide); }
.bas-review__quote { font-size: var(--bas-p-fs-15); line-height: var(--bas-p-lh-body); color: var(--bas-fg-2); }
.bas-review__author { color: var(--bas-fg); font-weight: 600; }
.bas-review__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.bas-review__btn { display: inline-block; padding: 8px 14px; border-radius: var(--bas-radius-pill);
  border: 1px solid var(--bas-line); font-size: var(--bas-p-fs-13); color: var(--bas-fg); text-decoration: none; }
/* Специфичность выше, чем у .bas-page__content a — иначе ссылка в тексте
   красит кнопку в accent-ink и текст на акцентной заливке пропадает.
   Акцент-ink, а не брендовый акцент: белый текст 13px на брендовом акценте
   даёт 3.11:1, на accent-ink — 5.18:1 (AA для мелкого текста, см. 00-tokens.css). */
.bas-review .bas-review__btn { color: var(--bas-fg); }
.bas-review .bas-review__btn--primary { background: var(--bas-accent-ink); border-color: var(--bas-accent-ink); color: var(--bas-fg-inverse); }
.bas-review > p { margin: 0; }
@media (max-width: 640px) { .bas-review__score { font-size: 28px; } }

/* Карточки преимуществ — блок «Наши преимущества» в серой полосе на /about/. */
.bas-adv {
  height: 100%;
  padding: var(--bas-p-space-16);
  border: 1px solid var(--bas-line);
  border-radius: var(--bas-radius);
  background: var(--bas-surface);
}
.bas-adv p { margin: 0 0 var(--bas-p-space-12); }
.bas-adv p:last-child { margin-bottom: 0; }