/* Rattil Hero Carousel
 * Elementor-native responsive hero carousel.
 * v1.4 keeps the carousel height stable across slides and adds responsive sizing controls.
 */

.rattil-hero {
    --rattil-content-width: 56%;
    --rattil-columns-gap: 40px;
    --rattil-highlight-color: #e2a900;
    --rattil-hero-min-height: 526px;
    --rattil-hero-fixed-height: 526px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.rattil-hero *,
.rattil-hero *::before,
.rattil-hero *::after {
    box-sizing: border-box;
}

.rattil-hero__inner {
    position: relative;
    width: 100%;
    margin-inline: auto;
}

.rattil-hero__swiper,
.rattil-hero__slide {
    width: 100%;
}

.rattil-hero__slide {
    height: auto;
}

.rattil-hero__slide-inner {
    display: flex;
    align-items: center;
    gap: var(--rattil-columns-gap);
    width: 100%;
    min-width: 0;
    min-height: var(--rattil-hero-min-height, 0px);
}

/* Stable-height carousel modes.
 * Equal mode is the default: JS measures the tallest natural slide once per
 * breakpoint and all slides use that exact height. This prevents the section
 * from jumping when moving between image and text-only slides.
 */
.rattil-hero--height-equal .rattil-hero__swiper {
    height: var(--rattil-hero-equal-height, var(--rattil-hero-min-height, auto));
}

.rattil-hero--height-equal .swiper-wrapper,
.rattil-hero--height-equal .rattil-hero__slide {
    height: 100%;
}

.rattil-hero--height-equal .rattil-hero__slide-inner {
    height: 100%;
    min-height: 0;
}

.rattil-hero--height-fixed .rattil-hero__swiper {
    height: var(--rattil-hero-fixed-height, 526px);
}

.rattil-hero--height-fixed .swiper-wrapper,
.rattil-hero--height-fixed .rattil-hero__slide {
    height: 100%;
}

.rattil-hero--height-fixed .rattil-hero__slide-inner {
    height: 100%;
    min-height: 0;
}

.rattil-hero--height-adaptive .rattil-hero__slide-inner {
    min-height: var(--rattil-hero-min-height, 0px);
}

.rattil-hero__content {
    flex: 0 1 var(--rattil-content-width);
    width: var(--rattil-content-width);
    min-width: 0;
    position: relative;
    z-index: 2;
}

.rattil-hero__visual {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Desktop slide layouts. */
.rattil-hero__slide--image_left .rattil-hero__visual {
    order: 1;
}

.rattil-hero__slide--image_left .rattil-hero__content {
    order: 2;
}

.rattil-hero__slide--image_top .rattil-hero__slide-inner,
.rattil-hero__slide--image_bottom .rattil-hero__slide-inner,
.rattil-hero__slide--center_no_image .rattil-hero__slide-inner {
    flex-direction: column;
    justify-content: center;
}

.rattil-hero__slide--image_top .rattil-hero__visual {
    order: 1;
}

.rattil-hero__slide--image_top .rattil-hero__content {
    order: 2;
}

.rattil-hero__slide--image_bottom .rattil-hero__content {
    order: 1;
}

.rattil-hero__slide--image_bottom .rattil-hero__visual {
    order: 2;
}

.rattil-hero__slide--image_top .rattil-hero__content,
.rattil-hero__slide--image_bottom .rattil-hero__content,
.rattil-hero__slide--center_no_image .rattil-hero__content {
    width: 100%;
    max-width: 860px;
    flex-basis: auto;
    text-align: center;
    margin-inline: auto;
}

.rattil-hero__slide--image_top .rattil-hero__visual,
.rattil-hero__slide--image_bottom .rattil-hero__visual {
    width: 100%;
    align-items: center;
}

/* Alignment rows make every major element independently positionable. */
.rattil-hero__badge-row,
.rattil-hero__description-row,
.rattil-hero__image-badge-row {
    display: flex;
    width: 100%;
    min-width: 0;
}

.rattil-hero__badge-row,
.rattil-hero__description-row {
    justify-content: flex-start;
}

.rattil-hero__image-badge-row {
    justify-content: center;
}

.rattil-hero__slide--center_no_image .rattil-hero__badge-row,
.rattil-hero__slide--center_no_image .rattil-hero__description-row,
.rattil-hero__slide--image_top .rattil-hero__badge-row,
.rattil-hero__slide--image_top .rattil-hero__description-row,
.rattil-hero__slide--image_bottom .rattil-hero__badge-row,
.rattil-hero__slide--image_bottom .rattil-hero__description-row {
    justify-content: center;
}

.rattil-hero__slide--center_no_image .rattil-hero__actions,
.rattil-hero__slide--center_no_image .rattil-hero__rating,
.rattil-hero__slide--image_top .rattil-hero__actions,
.rattil-hero__slide--image_top .rattil-hero__rating,
.rattil-hero__slide--image_bottom .rattil-hero__actions,
.rattil-hero__slide--image_bottom .rattil-hero__rating {
    justify-content: center;
}

.rattil-hero__badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e8c86c;
    line-height: 1.2;
}

.rattil-hero__badge-icon,
.rattil-hero__image-badge-icon,
.rattil-hero__button-icon,
.rattil-hero__arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.rattil-hero__badge-icon svg,
.rattil-hero__image-badge-icon svg,
.rattil-hero__button-icon svg,
.rattil-hero__arrow-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.rattil-hero__title {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.rattil-hero__title-part,
.rattil-hero__highlight {
    display: inline;
}

.rattil-hero__highlight {
    color: var(--rattil-highlight-color);
}

.rattil-hero__highlight--underline {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-skip-ink: auto;
}

.rattil-hero__description {
    width: 100%;
    margin-top: 0;
    line-height: 1.7;
}

.rattil-hero__actions {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}

.rattil-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    text-decoration: none;
    line-height: 1.2;
    font-weight: 700;
    border: 1px solid transparent;
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.rattil-hero__button:hover,
.rattil-hero__button:focus-visible {
    transform: translateY(-1px);
}

.rattil-hero__button--primary {
    box-shadow: 0 8px 18px rgba(198, 148, 0, 0.18);
}

.rattil-hero__button--secondary {
    border-width: 1px;
    border-style: solid;
}

.rattil-hero__rating {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.35;
}

.rattil-hero__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    letter-spacing: 0;
}

.rattil-hero__star {
    display: inline-flex;
    line-height: 1;
}

.rattil-hero__star-icon,
.rattil-hero__star-icon svg {
    display: inline-flex;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.rattil-hero__rating-score,
.rattil-hero__rating-highlight {
    font-weight: 800;
}

.rattil-hero__rating-copy {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: inherit;
}

.rattil-hero__image-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    transform: translateZ(0);
}

.rattil-hero__image-wrap--float {
    animation: rattilHeroFloat var(--rattil-float-duration, 4s) ease-in-out infinite;
    will-change: transform;
}

.rattil-hero__image {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.rattil-hero__image-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    line-height: 1.2;
}

.rattil-hero__arrow {
    position: absolute;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(45, 36, 18, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.rattil-hero__arrow:hover,
.rattil-hero__arrow:focus-visible {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 6px 16px rgba(45, 36, 18, 0.12);
}

.rattil-hero__arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.rattil-hero__pagination {
    position: absolute !important;
    z-index: 10;
    left: 50% !important;
    width: auto !important;
    transform: translateX(-50%);
}

.rattil-hero__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 4px !important;
    opacity: 1;
    transition: width 180ms ease, border-radius 180ms ease, background-color 180ms ease;
}

.rattil-hero__pagination .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 99px;
}

/* Content entrance animation runs only when its slide is active. */
.rattil-hero__content[data-animation]:not([data-animation='none']) {
    opacity: 0;
}

.rattil-hero__slide.swiper-slide-active .rattil-hero__content[data-animation='up'] {
    animation: rattilHeroInUp var(--rattil-content-duration, 650ms) cubic-bezier(.2,.7,.2,1) both;
}

.rattil-hero__slide.swiper-slide-active .rattil-hero__content[data-animation='down'] {
    animation: rattilHeroInDown var(--rattil-content-duration, 650ms) cubic-bezier(.2,.7,.2,1) both;
}

.rattil-hero__slide.swiper-slide-active .rattil-hero__content[data-animation='left'] {
    animation: rattilHeroInLeft var(--rattil-content-duration, 650ms) cubic-bezier(.2,.7,.2,1) both;
}

.rattil-hero__slide.swiper-slide-active .rattil-hero__content[data-animation='right'] {
    animation: rattilHeroInRight var(--rattil-content-duration, 650ms) cubic-bezier(.2,.7,.2,1) both;
}

.rattil-hero__content[data-animation='none'] {
    opacity: 1;
}

@keyframes rattilHeroFloat {
    0%, 100% { transform: translate3d(0, calc(var(--rattil-float-distance, 10px) * -0.5), 0); }
    50% { transform: translate3d(0, calc(var(--rattil-float-distance, 10px) * 0.5), 0); }
}

@keyframes rattilHeroInUp {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rattilHeroInDown {
    from { opacity: 0; transform: translate3d(0, -28px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rattilHeroInLeft {
    from { opacity: 0; transform: translate3d(28px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rattilHeroInRight {
    from { opacity: 0; transform: translate3d(-28px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Tablet: defaults stay close to desktop, but every slide can independently
 * move its image left/right/top/bottom or hide it. Elementor responsive style
 * controls remain able to override these defaults.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    .rattil-hero__slide-inner {
        --rattil-columns-gap: 28px;
    }

    .rattil-hero__title {
        font-size: clamp(34px, 5vw, 48px);
    }

    .rattil-hero__tablet-image--top .rattil-hero__slide-inner,
    .rattil-hero__tablet-image--bottom .rattil-hero__slide-inner {
        flex-direction: column;
        justify-content: center;
    }

    .rattil-hero__tablet-image--top .rattil-hero__content,
    .rattil-hero__tablet-image--bottom .rattil-hero__content,
    .rattil-hero__tablet-image--hide .rattil-hero__content {
        width: 100%;
        max-width: 860px;
        flex: 0 0 auto;
        margin-inline: auto;
    }

    .rattil-hero__tablet-image--top .rattil-hero__visual,
    .rattil-hero__tablet-image--bottom .rattil-hero__visual {
        width: 100%;
        flex: 0 0 auto;
    }

    .rattil-hero__tablet-image--top .rattil-hero__visual {
        order: 1;
    }

    .rattil-hero__tablet-image--top .rattil-hero__content {
        order: 2;
    }

    .rattil-hero__tablet-image--bottom .rattil-hero__content {
        order: 1;
    }

    .rattil-hero__tablet-image--bottom .rattil-hero__visual {
        order: 2;
    }

    .rattil-hero__tablet-image--left .rattil-hero__slide-inner,
    .rattil-hero__tablet-image--right .rattil-hero__slide-inner {
        flex-direction: row;
    }

    .rattil-hero__tablet-image--left .rattil-hero__content,
    .rattil-hero__tablet-image--right .rattil-hero__content {
        width: var(--rattil-content-width);
        max-width: none;
        flex: 0 1 var(--rattil-content-width);
        margin-inline: 0;
    }

    .rattil-hero__tablet-image--left .rattil-hero__visual,
    .rattil-hero__tablet-image--right .rattil-hero__visual {
        width: auto;
        flex: 1 1 auto;
    }

    .rattil-hero__tablet-image--left .rattil-hero__visual,
    .rattil-hero__tablet-image--right .rattil-hero__content {
        order: 1;
    }

    .rattil-hero__tablet-image--left .rattil-hero__content,
    .rattil-hero__tablet-image--right .rattil-hero__visual {
        order: 2;
    }

    .rattil-hero__tablet-image--hide .rattil-hero__visual {
        display: none;
    }
}

/* Mobile defaults mirror the supplied UI, while Elementor responsive controls
 * can override alignment, spacing, button direction/width and image sizing.
 */
@media (max-width: 767px) {
    .rattil-hero {
        overflow: hidden;
    }

    .rattil-hero__slide-inner {
        flex-direction: column;
        justify-content: flex-start;
    }

    .rattil-hero__content,
    .rattil-hero__slide--image_left .rattil-hero__content,
    .rattil-hero__slide--image_top .rattil-hero__content,
    .rattil-hero__slide--image_bottom .rattil-hero__content {
        width: var(--rattil-content-width);
        max-width: none;
        flex: 0 0 auto;
        margin-inline: auto;
        text-align: center;
    }

    .rattil-hero__visual,
    .rattil-hero__slide--image_left .rattil-hero__visual {
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
    }

    .rattil-hero__mobile-image--bottom .rattil-hero__content {
        order: 1;
    }

    .rattil-hero__mobile-image--bottom .rattil-hero__visual {
        order: 2;
    }

    .rattil-hero__mobile-image--top .rattil-hero__visual {
        order: 1;
    }

    .rattil-hero__mobile-image--top .rattil-hero__content {
        order: 2;
    }

    .rattil-hero__mobile-image--hide .rattil-hero__visual {
        display: none;
    }

    .rattil-hero__badge-row,
    .rattil-hero__description-row,
    .rattil-hero__image-badge-row {
        justify-content: center;
    }

    .rattil-hero__title {
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.015em;
    }

    .rattil-hero__description {
        font-size: 14px;
        line-height: 1.7;
    }

    .rattil-hero__actions {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }

    .rattil-hero__button {
        width: 100%;
        min-height: 48px;
    }

    .rattil-hero__rating {
        justify-content: center;
    }

    .rattil-hero__visual {
        align-items: center;
    }

    .rattil-hero__image {
        max-width: 100%;
    }

    .rattil-hero__arrow {
        display: none;
    }

    .rattil-hero--mobile-arrows .rattil-hero__arrow {
        display: inline-flex;
    }

    .rattil-hero__pagination {
        display: none;
    }

    .rattil-hero--mobile-pagination .rattil-hero__pagination {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rattil-hero__image-wrap--float,
    .rattil-hero__slide.swiper-slide-active .rattil-hero__content[data-animation] {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .rattil-hero__button,
    .rattil-hero__arrow,
    .rattil-hero__pagination .swiper-pagination-bullet {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
 * Per-slide responsive placement system (v1.3)
 * --------------------------------------------------------------------------
 * Placement is configured inside Content > Slides for each slide. The classes
 * are rendered by PHP, which makes the result deterministic in Elementor's
 * editor and on the frontend and prevents old/global CSS from overriding it.
 */
@media (min-width: 1025px) {
    .rattil-hero .rattil-place-d-left { justify-content: flex-start !important; }
    .rattil-hero .rattil-place-d-center { justify-content: center !important; }
    .rattil-hero .rattil-place-d-right { justify-content: flex-end !important; }

    .rattil-hero .rattil-text-d-left { text-align: left !important; }
    .rattil-hero .rattil-text-d-center { text-align: center !important; }
    .rattil-hero .rattil-text-d-right { text-align: right !important; }

    .rattil-hero .rattil-dir-d-ltr { direction: ltr !important; }
    .rattil-hero .rattil-dir-d-rtl { direction: rtl !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .rattil-hero .rattil-place-t-left { justify-content: flex-start !important; }
    .rattil-hero .rattil-place-t-center { justify-content: center !important; }
    .rattil-hero .rattil-place-t-right { justify-content: flex-end !important; }

    .rattil-hero .rattil-text-t-left { text-align: left !important; }
    .rattil-hero .rattil-text-t-center { text-align: center !important; }
    .rattil-hero .rattil-text-t-right { text-align: right !important; }

    .rattil-hero .rattil-dir-t-ltr { direction: ltr !important; }
    .rattil-hero .rattil-dir-t-rtl { direction: rtl !important; }
}

@media (max-width: 767px) {
    .rattil-hero .rattil-place-m-left { justify-content: flex-start !important; }
    .rattil-hero .rattil-place-m-center { justify-content: center !important; }
    .rattil-hero .rattil-place-m-right { justify-content: flex-end !important; }

    .rattil-hero .rattil-text-m-left { text-align: left !important; }
    .rattil-hero .rattil-text-m-center { text-align: center !important; }
    .rattil-hero .rattil-text-m-right { text-align: right !important; }

    .rattil-hero .rattil-dir-m-ltr { direction: ltr !important; }
    .rattil-hero .rattil-dir-m-rtl { direction: rtl !important; }
}

/* Per-slide button layout. Kept in Content > Slides so each service can use a
 * different composition on Desktop / Tablet / Mobile. */
@media (min-width: 1025px) {
    .rattil-hero .rattil-actions-layout-d-row { flex-direction: row !important; align-items: center; }
    .rattil-hero .rattil-actions-layout-d-column { flex-direction: column !important; }
    .rattil-hero .rattil-actions-layout-d-column.rattil-place-d-left { align-items: flex-start !important; }
    .rattil-hero .rattil-actions-layout-d-column.rattil-place-d-center { align-items: center !important; }
    .rattil-hero .rattil-actions-layout-d-column.rattil-place-d-right { align-items: flex-end !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .rattil-hero .rattil-actions-layout-t-row { flex-direction: row !important; align-items: center; }
    .rattil-hero .rattil-actions-layout-t-column { flex-direction: column !important; }
    .rattil-hero .rattil-actions-layout-t-column.rattil-place-t-left { align-items: flex-start !important; }
    .rattil-hero .rattil-actions-layout-t-column.rattil-place-t-center { align-items: center !important; }
    .rattil-hero .rattil-actions-layout-t-column.rattil-place-t-right { align-items: flex-end !important; }
}

@media (max-width: 767px) {
    .rattil-hero .rattil-actions-layout-m-row { flex-direction: row !important; align-items: center; }
    .rattil-hero .rattil-actions-layout-m-column { flex-direction: column !important; }
    .rattil-hero .rattil-actions-layout-m-column.rattil-place-m-left { align-items: flex-start !important; }
    .rattil-hero .rattil-actions-layout-m-column.rattil-place-m-center { align-items: center !important; }
    .rattil-hero .rattil-actions-layout-m-column.rattil-place-m-right { align-items: flex-end !important; }
}