/* Ariol Auto — home page (RU 3549 / ET 1234 / EN 3602) on native Elementor.
 * Slider, flip cards, two-part headings and photo strip; sizes, colours and fonts stay in the Elementor settings.
 * Every rule is scoped to the home classes (.aa-home-*, .aa-flip, .aa-hl), so nothing else on the site changes. */

/* ---------- Banner slider ----------
 * One slide per screen width; swipe and scroll-snap are native, ariol-home.js adds the arrows, autoplay and loop. */
.aa-home-slider { position: relative; overflow: hidden; }
.aa-home-slider__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.aa-home-slider__track::-webkit-scrollbar { display: none; }
.aa-home-slider__track > .aa-home-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }

.aa-home-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color .2s;
}
.aa-home-slider__arrow:hover { color: #f7a801; background: none; }
/* Dark ring with a white halo: visible on light and dark photos alike. */
.aa-home-slider__arrow:focus-visible { outline: 2px solid #1b242b; outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.aa-home-slider__arrow svg { width: 40px; height: 40px; fill: currentColor; }
.aa-home-slider__arrow--prev { left: 5px; }
.aa-home-slider__arrow--next { right: 5px; }
@media (max-width: 1024px) { .aa-home-slider__arrow svg { width: 30px; height: 30px; } }
@media (max-width: 767px) { .aa-home-slider__arrow { display: none; } }

/* Yellow contact strip (section vbz6u07, the same id on RU/ET/EN): its four columns are too narrow at
   768–1024 px — «info@ariolauto.ee» ran over the next column's clock icon. Two columns per row there. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-vbz6u07 > .elementor-container { flex-wrap: wrap; row-gap: 24px; }
  .elementor-element-vbz6u07 > .elementor-container > .elementor-column { width: 50%; }
}

/* First slide: the big brand line is part of the H1 («Автосервис в Таллинне» + «Ariol Auto»),
   styled like the separate big line of the other slides. */
.aa-home-slide .aa-home-slide__brand {
  display: block;
  margin-top: 3px;
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.3px;
}
@media (max-width: 1024px) { .aa-home-slide .aa-home-slide__brand { margin-top: 0; font-size: 40px; line-height: 1.2; } }
@media (max-width: 767px) { .aa-home-slide .aa-home-slide__brand { font-size: 30px; } }

/* ---------- Service flip cards ----------
 * The front turns away and the back turns in around the vertical axis on hover and on keyboard focus. */
.aa-flip { position: relative; perspective: 1000px; }
.aa-flip > .aa-flip__front,
.aa-flip > .aa-flip__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.5, .12, .46, .88);
}
.aa-flip > .aa-flip__front { z-index: 2; transform: rotateY(0deg); }
.aa-flip > .aa-flip__back { z-index: 1; transform: rotateY(-180deg); }
.aa-flip:is(:hover, :focus-within) > .aa-flip__front { transform: rotateY(180deg); }
.aa-flip:is(:hover, :focus-within) > .aa-flip__back { transform: rotateY(0deg); }
.aa-flip .aa-flip__text p:last-child { margin-bottom: 0; }
.aa-flip .aa-flip__more .elementor-button-wrapper { display: flex; }
/* «Подробнее»: 24 px tall to tap (5 px padding taken back by the margin, so it sits where it did); keyboard focus ring. */
body .elementor .elementor-element.aa-flip__more .elementor-button { line-height: 1; padding-block: 5px; margin-block: -5px; }
.aa-flip .aa-flip__more .elementor-button:focus-visible { outline: 2px solid #1b242b; outline-offset: 3px; box-shadow: 0 0 0 7px #f7a801; }
.aa-flip .aa-flip__more .elementor-button-icon svg { width: 12px; height: 12px; fill: #fff; }
@media (prefers-reduced-motion: reduce) {
  .aa-flip > .aa-flip__front, .aa-flip > .aa-flip__back { transition: none; }
}

/* ---------- Two-part headings ----------
 * The widget's typography is the light part; the bold part differs only in weight, line height and spacing. */
/* Side by side: the parts wrap as whole units, centred like the old widget (a 0.2 em gap = its no-break space). */
.aa-hl:not(.aa-hl--vertical) .elementor-heading-title { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .2em; }
.aa-hl--vertical .aa-hl__part { display: block; }
.aa-hl--vertical .aa-hl__part + .aa-hl__part { margin-top: -4px; }
.aa-hl--vertical.aa-hl--gap3 .aa-hl__part + .aa-hl__part { margin-top: -3px; }
.aa-hl .aa-hl__bold { font-weight: 800; line-height: 1.25; letter-spacing: -.2px; }
.aa-hl--stat .aa-hl__bold { line-height: 1.375; letter-spacing: .9px; }

/* ---------- Photo strip ---------- */
.aa-home-photos .aa-home-photo a { display: block; }
.aa-home-photos .aa-home-photo img { display: block; width: 100%; height: auto; aspect-ratio: 690 / 565; object-fit: cover; }

/* ---------- Small laptops (1025–1199 px) ----------
 * Desktop sizes, but the four-column rows are narrow: card titles and heading parts at 20 px. */
@media (min-width: 1025px) and (max-width: 1199px) {
  body .elementor .elementor-element.aa-flip__title .elementor-heading-title,
  body .elementor .elementor-element.aa-flip__subtitle .elementor-heading-title,
  body .elementor .elementor-element.aa-hl .elementor-heading-title { font-size: 20px; }
}

/* ariol-home: flip-card «more» link */
/* The chevron takes the text colour (orange, white on hover), a little smaller, centred on the text line. */
.aa-flip .aa-flip__more .elementor-button-content-wrapper { align-items: center; gap: 6px; }
.aa-flip .aa-flip__more .elementor-button-icon { display: inline-flex; align-items: center; margin: 0; }
.aa-flip .aa-flip__more .elementor-button-icon svg { width: 9px; height: 9px; fill: currentColor; }