/* Desktop-only home layout — restores original index look (≥769px) */

.home-desktop-only {
    display: none;
}

.home-mobile-only {
    display: block;
}

@media (min-width: 769px) {
    .home-mobile-only {
        display: none !important;
    }

    .home-desktop-only {
        display: block;
    }

    .home-desktop-only.inline,
    .btn .home-desktop-only,
    .btn-search .home-desktop-only {
        display: inline;
    }

    .page-home {
        background-color: transparent;
    }

    /* Hero layout only at 769+ — backgrounds split by breakpoint below */
    .page-home .hero-booking {
        overflow: hidden;
    }

    .page-home .hero-booking .container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        position: relative;
        z-index: 2;
    }

    .page-home .hero-content {
        text-align: center;
    }

    .page-home .hero-title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: var(--font-weight-black);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-shadow: 0 0 30px rgba(164, 255, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.8);
        margin-bottom: var(--spacing-lg);
        animation: heroTitleFadeIn 1s ease-out 0.3s both;
    }

    .page-home .hero-subtitle {
        font-size: var(--font-size-xl);
        color: var(--color-text-primary);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
        margin-bottom: 0;
        animation: heroSubtitleFadeIn 1s ease-out 0.6s both;
    }

    .page-home .booking-card {
        background-color: rgba(21, 21, 21, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(164, 255, 0, 0.3);
        border-radius: var(--border-radius-xl);
        padding: var(--spacing-2xl);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(164, 255, 0, 0.1);
        max-width: 900px;
        margin: 0 auto;
        width: 100%;
        animation: bookingCardSlideUp 1s ease-out 0.9s both;
    }

    .page-home .booking-card .card-title {
        display: block;
        animation: cardTitleFadeIn 0.8s ease-out 1.1s both;
    }

    .page-home .booking-form {
        margin-top: var(--spacing-xl);
        display: block;
        gap: unset;
    }

    .page-home .booking-locations-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-lg);
    }

    .page-home .booking-form .form-group label {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: var(--spacing-xs);
    }

    .page-home .booking-form select,
    .page-home .booking-form input[type="date"] {
        min-height: auto;
        padding: var(--spacing-md);
        font-size: var(--font-size-base);
        background-color: var(--color-bg-input);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
    }

    .page-home .date-range-group {
        margin: var(--spacing-xl) 0;
    }

    .page-home .date-range-inputs {
        display: flex;
        align-items: flex-end;
        gap: var(--spacing-md);
    }

    .page-home .date-range-divider {
        width: 2px;
        height: 50px;
        background: var(--color-accent);
        margin: 0 var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }

    .page-home .date-label {
        font-size: var(--font-size-sm);
        color: var(--color-accent);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .page-home .btn-search {
        min-height: auto;
        margin-top: 0;
        width: 100%;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border-radius: var(--border-radius);
    }

    .page-home .home-sticky-cta {
        display: none !important;
    }

    .page-home .footer--home .footer-newsletter--compact,
    .page-home .footer-bottom--compact {
        display: none !important;
    }
}

/* Tablet (769–1023): original hero + user-center look */
@media (min-width: 769px) and (max-width: 1023px) {
    .page-home .hero-booking {
        padding: var(--spacing-2xl) 0 calc(var(--spacing-2xl) + 56px);
        align-items: center;
        min-height: 520px;
        background-color: #050605;
        background-image:
            linear-gradient(180deg,
                transparent 0%,
                transparent 42%,
                rgba(5, 6, 5, 0.35) 58%,
                rgba(3, 4, 3, 0.72) 74%,
                rgba(0, 0, 0, 0.92) 88%,
                #000000 100%),
            radial-gradient(ellipse 88% 62% at 50% 0%, rgba(164, 255, 0, 0.14) 0%, transparent 58%),
            linear-gradient(180deg, #0b0d09 0%, #070907 45%, #050605 100%);
    }

    .page-home .hero-booking::before {
        display: block;
        z-index: 1;
        background:
            radial-gradient(ellipse 72% 48% at 50% 0%, rgba(164, 255, 0, 0.16) 0%, transparent 62%),
            linear-gradient(180deg,
                transparent 0%,
                transparent 52%,
                rgba(0, 0, 0, 0.18) 68%,
                rgba(0, 0, 0, 0.55) 82%,
                rgba(0, 0, 0, 0.88) 93%,
                #000000 100%);
    }

    .page-home .hero-booking::after {
        display: block;
        z-index: 0;
        opacity: 1;
        background-size: 60px 104px;
        background-position: center top;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%2378b832' stroke-width='1.2' stroke-linejoin='miter'%3E%3Cpath d='M30 2 L58 18.17 V54.5 L30 70.67 2 54.5 V18.17 Z'/%3E%3Cpath d='M30 36.33 L58 52.5 V88.83 L30 105 2 88.83 V52.5 Z'/%3E%3C/g%3E%3C/svg%3E");
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.82) 62%, rgba(0, 0, 0, 0.35) 82%, transparent 96%);
        mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.82) 62%, rgba(0, 0, 0, 0.35) 82%, transparent 96%);
    }

    .page-home .user-center-section {
        margin-top: 0;
        padding-top: calc(var(--spacing-3xl) + 12px);
        background: linear-gradient(180deg,
            #000000 0%,
            rgba(0, 0, 0, 0.98) 8%,
            rgba(20, 20, 20, 0.98) 50%,
            rgba(0, 0, 0, 0.95) 100%);
    }
}

/*
 * Desktop ≥1024px
 * DOM: main.home-main > section#heroBooking.hero-booking
 *       main.home-main > div.home-desktop-only > section.user-center-section
 */
@media (min-width: 1024px) {
    /* 1–2. Hero: ukloni mrtvi prostor ispod booking-card */
    .page-home main.home-main > section.hero-booking,
    .page-home #heroBooking.hero-booking {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        height: auto !important;
        padding-top: var(--spacing-2xl);
        padding-bottom: 72px !important;
        position: relative;
        z-index: 1;
        background:
            radial-gradient(circle at 50% 8%, rgba(145, 255, 0, 0.12), transparent 34%),
            linear-gradient(180deg, #151515 0%, #080808 52%, #050505 100%) !important;
    }

    /* Hex pattern (::before) — nestaje pri dnu */
    .page-home #heroBooking.hero-booking::before,
    .page-home .hero-booking::before {
        content: '' !important;
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%2391ff00' stroke-width='1' opacity='0.28'%3E%3Cpath d='M30 2 L58 18.17 V54.5 L30 70.67 2 54.5 V18.17 Z'/%3E%3Cpath d='M30 36.33 L58 52.5 V88.83 L30 105 2 88.83 V52.5 Z'/%3E%3C/g%3E%3C/svg%3E") !important;
        background-size: 60px 104px;
        background-position: center top;
        background-repeat: repeat;
        opacity: 0.11;
        filter: saturate(0.85);
        -webkit-mask-image:
            linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.68) 30%, rgba(0, 0, 0, 0.18) 66%, transparent 92%),
            radial-gradient(ellipse 58% 48% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
        mask-image:
            linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.68) 30%, rgba(0, 0, 0, 0.18) 66%, transparent 92%),
            radial-gradient(ellipse 58% 48% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
    }

    /* 4. Donji transition overlay (::after) — preklapa rez prema User Center */
    .page-home #heroBooking.hero-booking::after,
    .page-home .hero-booking::after {
        content: '' !important;
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        top: auto;
        height: 200px;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.35) 38%,
            rgba(0, 0, 0, 0.72) 68%,
            rgba(0, 0, 0, 0.96) 100%
        ) !important;
        -webkit-mask-image: none;
        mask-image: none;
        opacity: 1;
    }

    /* Sadržaj heroa iznad overlaya */
    .page-home .hero-booking > .container {
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .page-home .hero-content {
        position: relative;
    }

    .page-home .hero-content::before {
        content: '';
        position: absolute;
        inset: -28% -12%;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(0, 0, 0, 0.42), transparent 72%);
    }

    .page-home .hero-booking .booking-card {
        background-color: rgba(16, 16, 16, 0.94);
        border: 1px solid rgba(145, 255, 0, 0.12);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
        margin-bottom: 0;
    }

    /* 3. Podigni desktop wrapper (roditelj user-center-section) */
    .page-home main.home-main > .home-desktop-only {
        position: relative;
        z-index: 2;
        margin-top: -64px;
    }

    /* 5–6. User Center: postepeni glow, bez hard cuta */
    .page-home .user-center-section {
        position: relative;
        z-index: 2;
        margin-top: 0 !important;
        padding-top: 96px !important;
        padding-bottom: var(--spacing-3xl);
        min-height: auto !important;
        overflow: hidden;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(6, 10, 2, 0.96) 28%,
            rgba(8, 12, 4, 1) 100%
        ) !important;
    }

    .page-home .user-center-background {
        opacity: 0.22;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 22%, #000 48%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 22%, #000 48%);
    }

    .page-home .user-center-section::before {
        content: '' !important;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(
            ellipse 90% 70% at 50% 24%,
            rgba(145, 255, 0, 0.11) 0%,
            rgba(145, 255, 0, 0.05) 30%,
            rgba(0, 0, 0, 0) 62%
        ) !important;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 14%, rgba(0, 0, 0, 0.55) 30%, #000 50%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 14%, rgba(0, 0, 0, 0.55) 30%, #000 50%);
    }

    .page-home .user-center-section::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.24) 14%,
            rgba(0, 0, 0, 0.08) 34%,
            transparent 58%
        );
    }

    .page-home .user-center-section .container {
        position: relative;
        z-index: 2;
    }

    /* Floating social icons — fixed on the right */
    .page-home .user-center-social-bar {
        position: fixed !important;
        right: 0 !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1000;
        flex-direction: column;
        align-items: flex-end;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .home-desktop-only {
        display: none !important;
    }

    .home-mobile-only {
        display: block;
    }

    .btn .home-mobile-only,
    .btn-search .home-mobile-only {
        display: inline;
    }
}