/* Homepage CTA inspired by Magic UI's Shimmer Button, adapted to the PHP site.
 * https://magicui.design/docs/components/shimmer-button
 * Scoped rules override the shared palette and Flow Button enhancement. */
@property --homepage-cta-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.homepage-booking-cta__icon {
    display: none;
}

.homepage-hero .homepage-booking-cta {
    --cta-border-light: #FFF1CB;
    --cta-border-tail: rgba(255, 237, 192, 0.45);
}

html[data-theme="light"] .homepage-hero .homepage-booking-cta {
    --cta-border-light: #F7EFE5;
    --cta-border-tail: rgba(191, 146, 112, 0.6);
}

/* Only the border effect is shared; dimensions stay in the mobile rules. */
.homepage-hero .homepage-booking-cta.flow-button.flow-button::after,
.homepage-hero .homepage-booking-cta.flow-button.flow-button:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    aspect-ratio: auto;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--homepage-cta-angle),
        transparent 0deg 245deg,
        var(--cta-border-tail) 290deg,
        var(--cta-border-light) 335deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 1;
    pointer-events: none;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .homepage-hero .homepage-booking-cta.flow-button.flow-button::after {
        animation: homepage-cta-orbit 5s linear infinite;
    }
}

@media (min-width: 768px) {
    .homepage-hero__copy > .hero-info-grid {
        order: 1;
    }

    .homepage-hero__copy > .homepage-hero__actions {
        order: 2;
    }
}

@media (max-width: 767px) {
    .homepage-hero__copy {
        display: flex;
        flex-direction: column;
    }

    .homepage-hero .homepage-hero__actions {
        flex-direction: column;
        gap: 0.35rem;
        margin-top: 1.25rem !important;
        /* The primary action is ready as soon as the page curtain opens. */
        animation: none;
    }

    .homepage-hero .homepage-booking-cta,
    .homepage-hero .homepage-booking-cta:hover,
    .homepage-hero .homepage-booking-cta:focus-visible {
        --cta-text: #FFFFFF;
        --cta-border: rgba(255, 237, 192, 0.28);
        --cta-glow: rgba(200, 146, 42, 0.2);
        --cta-arrow-surface: rgba(33, 24, 11, 0.1);
        position: relative;
        isolation: isolate;
        overflow: hidden;
        width: 100%;
        min-height: 3.875rem;
        padding: 1rem 2.75rem;
        border: 1px solid var(--cta-border) !important;
        border-radius: 1.125rem !important;
        background: var(--accent) !important;
        color: var(--cta-text) !important;
        font-size: 1.0625rem;
        font-weight: 750;
        letter-spacing: -0.015em;
        box-shadow:
            0 12px 32px var(--cta-glow),
            inset 0 1px 0 var(--cta-border) !important;
    }

    html[data-theme="light"] .homepage-hero .homepage-booking-cta {
        --cta-text: var(--accent-contrast);
        --cta-border: rgba(247, 239, 229, 0.32);
        --cta-glow: rgba(191, 146, 112, 0.22);
        --cta-arrow-surface: rgba(247, 239, 229, 0.12);
    }

    .homepage-hero .homepage-booking-cta:hover {
        background: var(--accent-dark) !important;
    }

    .homepage-hero .homepage-booking-cta:focus-visible {
        outline: 3px solid var(--cta-border-light) !important;
        outline-offset: 4px;
    }

    .homepage-hero .homepage-booking-cta:active {
        transform: scale(0.98) !important;
    }

    .homepage-booking-cta > .flow-button__label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
    }

    .homepage-hero .homepage-booking-cta .homepage-booking-cta__icon {
        display: inline-block;
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
    }

    .homepage-hero .homepage-booking-cta.flow-button > .flow-button__arrow {
        top: calc(50% - 15px);
        width: 30px;
        height: 30px;
        padding: 7px;
        border-radius: 50%;
        background: var(--cta-arrow-surface);
    }

    .homepage-hero .homepage-hero__actions .ui-button-ghost-dark,
    .homepage-hero .homepage-hero__actions .ui-button-ghost-dark:hover,
    .homepage-hero .homepage-hero__actions .ui-button-ghost-dark:focus-visible {
        min-height: 2.75rem;
        padding-block: 0.5rem;
        border: 0 !important;
        background: transparent !important;
        color: #D8CBB7 !important;
        font-size: 0.875rem;
        font-weight: 550;
        box-shadow: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .homepage-hero .homepage-booking-cta:active {
            transform: none !important;
        }
    }
}

@keyframes homepage-cta-orbit {
    to {
        --homepage-cta-angle: 360deg;
    }
}