/*
 * Page-editor media blocks (fleet-page-editor#34): slides, gallery, social icons.
 * Colours only through the tenant's --fleet-* tokens, with neutral fallbacks.
 * Tenant pages carry no theme armour and hello-elementor repaints bare buttons
 * (`[type=button]:hover`, 0-2-0), so every button state is declared here at a
 * higher specificity (0-3-0) — resting, hover, focus and active — never inherited.
 */

/* ---------------- slides ---------------- */
.ff-slides {
    position: relative;
    width: 100%;
    height: var(--ff-slides-height, 100vh);
    overflow: hidden;
    background: var(--fleet-background-color, #111);
}
.ff-slides__track {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* speed="…" (#41) sets --ff-slides-speed for both; unset, the .8s fade / .6s slide stand. */
.ff-slides__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ff-slides-speed, .8s) ease, transform var(--ff-slides-speed, .6s) ease, visibility 0s linear var(--ff-slides-speed, .8s);
}
.ff-slides__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--ff-slides-speed, .8s) ease, transform var(--ff-slides-speed, .6s) ease, visibility 0s;
}
.ff-slides--slide .ff-slides__slide { opacity: 1; transform: translateX(100%); }
.ff-slides--slide .ff-slides__slide.is-before { transform: translateX(-100%); }
.ff-slides--slide .ff-slides__slide.is-active { transform: translateX(0); }
.ff-slides__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.ff-slides__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 48px 24px 64px;
    text-align: center;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.ff-slides__title { margin: 0 0 8px; color: inherit; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.15; }
.ff-slides__text  { margin: 0 0 16px; color: inherit; font-size: clamp(1rem, 1.6vw, 1.25rem); }
.ff-slides .ff-slides__button,
.ff-slides .ff-slides__button:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 24px;
    box-sizing: border-box;
    border: 1px solid var(--fleet-primary-color, #2271b1);
    border-radius: 6px;
    background: var(--fleet-primary-color, #2271b1);
    color: var(--fleet-on-primary, #fff);
    font-weight: 600;
    text-decoration: none;
}
.ff-slides .ff-slides__button:hover {
    background: var(--fleet-button-hover-color, var(--fleet-primary-color, #135e96));
    border-color: var(--fleet-button-hover-color, var(--fleet-primary-color, #135e96));
    color: var(--fleet-on-button-hover, var(--fleet-on-primary, #fff));
}
.ff-slides .ff-slides__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ff-slides .ff-slides__arrow,
.ff-slides .ff-slides__arrow:hover,
.ff-slides .ff-slides__arrow:focus,
.ff-slides .ff-slides__arrow:active {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 0;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    /* Parlay: the accent at 30% (#E0A2414D). */
    color: color-mix(in srgb, var(--fleet-primary-color, #fff) 30%, transparent);
    font-size: 40px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
}
.ff-slides .ff-slides__arrow:hover { color: var(--fleet-primary-color, #fff); background: rgba(0, 0, 0, .15); }
.ff-slides .ff-slides__arrow:focus-visible { outline: 2px solid var(--fleet-primary-color, #fff); outline-offset: 2px; }
.ff-slides__arrow--prev { left: 12px; }
.ff-slides__arrow--next { right: 12px; }

.ff-slides__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.ff-slides .ff-slides__dot,
.ff-slides .ff-slides__dot:hover,
.ff-slides .ff-slides__dot:focus,
.ff-slides .ff-slides__dot:active {
    /* 24px hit area around a 10px dot. */
    width: 24px;
    height: 24px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 5px, transparent 5.5px);
    box-shadow: none;
    cursor: pointer;
}
.ff-slides .ff-slides__dot[aria-current="true"] {
    background: radial-gradient(circle, var(--fleet-primary-color, #fff) 0 5px, transparent 5.5px);
}
.ff-slides .ff-slides__dot:focus-visible { outline: 2px solid var(--fleet-primary-color, #fff); outline-offset: 0; }

/* background="1" (#41): a decorative layer filling the parent, under whatever
   follows it there. :where() keeps the parent and sibling rules at zero
   specificity, so any positioning a page sets itself still wins. */
.ff-slides.ff-slides--background {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: auto;
    pointer-events: none;
}
:where(:has(> .ff-slides--background)) { position: relative; isolation: isolate; }
:where(.ff-slides--background ~ *) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .ff-slides__slide, .ff-slides__slide.is-active { transition: none; }
}

/* ---------------- hero ----------------
 * Slides and content share one grid cell: the hero is at least the stable screen
 * height (100svh) and grows with its content, so an expanding form never spills
 * out of it (#39 — replaces the "Hero Slide Resize FiX" and "Window Size" snippets). */
.ff-hero {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}
.ff-hero > .ff-hero__media,
.ff-hero > .ff-hero__content { grid-area: 1 / 1; min-width: 0; }
.ff-hero__media .ff-slides { height: 100%; }
.ff-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 110px 5% 70px;   /* header clearance; 60px + 10 below the form, as the snippet kept */
    box-sizing: border-box;
    pointer-events: none;      /* swipes and arrows reach the slides… */
}
.ff-hero__content > * { pointer-events: auto; }   /* …except where there is content */
.ff-hero__title {
    margin: 0 0 12px;
    text-align: center;
    color: #fff;
    font-size: clamp(25px, 4.3vw, 55px);
    font-weight: 700;
    line-height: clamp(37.5px, 5.6vw, 71.5px);
}
.ff-hero__text {
    margin: 0 0 24px;
    text-align: center;
    color: #fff;
    font-size: clamp(20px, 1.72vw, 22px);
    line-height: 1.3;
}
@media (max-width: 767px) {
    .ff-hero__content { justify-content: flex-start; padding: 200px 10px 60px; }
}
/* The dots and arrows stay above the content layer. */
.ff-hero .ff-slides__arrow, .ff-hero .ff-slides__dots { z-index: 3; }

/* ---------------- fixed background (utility) ----------------
 * class="ff-fixed-bg" style="--ff-bg:url(…)" — a background that stays put while
 * the page scrolls, INCLUDING on iOS, where background-attachment: fixed is
 * ignored: the section clips a position:fixed layer to its own box. Elementor
 * sections did this with per-element custom CSS plus a browser-sniffing snippet;
 * clip-path makes the sniffing unnecessary (#39). */
.ff-fixed-bg { position: relative; clip-path: inset(0); isolation: isolate; }
.ff-fixed-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--ff-bg-overlay, transparent);
}
.ff-fixed-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: var(--ff-bg);
    background-position: var(--ff-bg-position, center center);
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---------------- testimonials ----------------
 * [ff_testimonials] reuses the slides markup. Stacked in one grid cell, every quote
 * is laid out at once, so the carousel is as tall as the longest quote and does not
 * jump as it rotates; the fade still comes from .ff-slides__slide's opacity. */
.ff-slides.ff-slides--quotes {
    height: auto;
    overflow: visible;
    background: transparent;
    padding: 0 56px;
    box-sizing: border-box;
}
.ff-slides--quotes .ff-slides__track { display: grid; height: auto; }
.ff-slides--quotes .ff-slides__slide { position: relative; inset: auto; grid-area: 1 / 1; padding: 10px; }
.ff-quote { margin: 0; padding: 0; border: 0; text-align: center; }
.ff-quote__text {
    margin: 0;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.5;
    color: var(--fleet-text-white, #fdfdfd);
}
.ff-slides--italic .ff-quote__text { font-style: italic; }
.ff-quote__name {
    margin-top: 25px;
    font-size: clamp(18px, 1.75vw, 22px);
    color: var(--fleet-text-white, #fff);
}
/* Elementor's carousel arrows: small chevrons in the accent at ~59%. */
.ff-slides.ff-slides--quotes .ff-slides__arrow,
.ff-slides.ff-slides--quotes .ff-slides__arrow:hover,
.ff-slides.ff-slides--quotes .ff-slides__arrow:focus,
.ff-slides.ff-slides--quotes .ff-slides__arrow:active {
    color: color-mix(in srgb, var(--fleet-primary-color, #fff) 59%, transparent);
    font-size: 28px;
    background: transparent;
}
.ff-slides.ff-slides--quotes .ff-slides__arrow:hover { color: var(--fleet-primary-color, #fff); }
.ff-slides--quotes .ff-slides__arrow--prev { left: 0; }
.ff-slides--quotes .ff-slides__arrow--next { right: 0; }
.ff-slides--quotes .ff-slides__dots { position: static; margin-top: 16px; }

/* ---------------- rating ---------------- */
.ff-rating { display: flex; gap: var(--ff-rating-gap, 10px); color: var(--fleet-primary-color, #e0a241); }
.ff-rating--center { justify-content: center; }
.ff-rating--right  { justify-content: flex-end; }
.ff-rating__star { width: var(--ff-rating-size, 20px); height: var(--ff-rating-size, 20px); fill: currentColor; }
.ff-rating__star--empty,
.ff-rating__bg { opacity: .3; }
.ff-rating__fg { clip-path: inset(0 50% 0 0); }

/* ---------------- gallery ---------------- */
.ff-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-gallery-gap, 5px);
}
.ff-gallery__item {
    position: relative;
    flex: calc(var(--ff-ar, 1.5) * 1000) 1 calc(var(--ff-ar, 1.5) * var(--ff-row-h, 380px));
    height: var(--ff-row-h, 380px);
    min-width: 0;
    margin: 0;
    overflow: hidden;
}
@media (max-width: 1024px) {
    .ff-gallery__item { flex-basis: calc(var(--ff-ar, 1.5) * var(--ff-row-h-tablet, 270px)); height: var(--ff-row-h-tablet, 270px); }
}
@media (max-width: 767px) {
    .ff-gallery__item { flex-basis: calc(var(--ff-ar, 1.5) * var(--ff-row-h-mobile, 130px)); height: var(--ff-row-h-mobile, 130px); }
}
.ff-gallery__link { display: block; height: 100%; }
.ff-gallery__link:focus-visible { outline: 2px solid var(--fleet-primary-color, #2271b1); outline-offset: 2px; }
.ff-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
/* media.js sets each image's size once it has measured the rows. */
.ff-gallery.is-justified .ff-gallery__item { flex: 0 0 auto; }
.ff-gallery__item[hidden] { display: none; }
.ff-gallery__item { border-radius: var(--ff-gallery-radius, 0); }
/* Soaks up the leftover width so the last row keeps its row height. */
.ff-gallery__spacer { flex: 999999 1 0; height: 0; }

/* ---------------- social icons ---------------- */
.ff-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ff-social--center { justify-content: center; }
.ff-social--right  { justify-content: flex-end; }
.ff-social__item { margin: 0; padding: 0; }
.ff-social .ff-social__icon,
.ff-social .ff-social__icon:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 0.4em padding around the icon, as the Elementor widget; never under 44px when it is a link. */
    width: calc(var(--ff-social-size, 20px) * 1.8);
    height: calc(var(--ff-social-size, 20px) * 1.8);
    border-radius: 50%;
    background: var(--fleet-primary-color, #2271b1);
    color: var(--fleet-on-primary, #fff);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.ff-social a.ff-social__icon { min-width: 44px; min-height: 44px; }
.ff-social--rounded .ff-social__icon { border-radius: 6px; }
.ff-social--square .ff-social__icon  { border-radius: 0; }
.ff-social--none .ff-social__icon    { background: transparent; color: var(--fleet-primary-color, #2271b1); }
.ff-social .ff-social__icon:hover {
    background: var(--fleet-button-hover-color, var(--fleet-primary-color, #135e96));
    color: var(--fleet-on-button-hover, var(--fleet-on-primary, #fff));
}
.ff-social--outline .ff-social__icon,
.ff-social--outline .ff-social__icon:visited { background: transparent; color: var(--fleet-primary-color, #2271b1); }
.ff-social--outline .ff-social__icon:hover { background: rgba(255, 255, 255, .22); color: var(--fleet-primary-color, #2271b1); }
.ff-social .ff-social__icon:focus-visible { outline: 2px solid var(--fleet-primary-color, #2271b1); outline-offset: 2px; }
.ff-social__svg { width: var(--ff-social-size, 20px); height: var(--ff-social-size, 20px); }