/* ─── Responsive ─────────────────────────────────────────── */

/* ── Hamburger: hidden on desktop ─────────────────────────── */
.navbar-hamburger { display: none; }

/* ── Tablet: ≤ 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {

    .apt-content-wrap {
        grid-template-columns: 1fr 300px;
        gap: 2rem;
    }

    .zadar-inner {
        gap: 3rem;
    }

    .apartments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Mobile: ≤ 768px ─────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Navbar ─────────────────────────────────────────── */
    .navbar {
        padding: 0.9rem 1.25rem;
        position: relative;
    }

    .navbar-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0.3rem;
    }

    .navbar-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: transform 0.25s, opacity 0.2s;
    }

    /* Animate to X when open */
    .navbar-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .navbar-hamburger.open span:nth-child(2) { opacity: 0; }
    .navbar-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .navbar-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0 1rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.09);
        z-index: 200;
    }

    .navbar-links.open { display: flex; }

    .navbar-links > li > a,
    .navbar-dropdown-trigger {
        display: block;
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        color: var(--text);
    }

    .lang-switcher {
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 0.75rem 1.5rem;
        margin-left: 0;
        justify-content: center;
    }

    /* Dropdown: static, always expanded inline */
    .navbar-dropdown-menu {
        position: static;
        display: block;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--blue-light);
        min-width: auto;
        padding: 0.25rem 0;
    }

    .navbar-dropdown-menu li a {
        padding: 0.55rem 1.5rem 0.55rem 2.25rem;
        flex-direction: row;
        gap: 0.6rem;
        align-items: center;
    }

    .navbar-dropdown-menu li a strong { font-size: 0.9rem; }
    .navbar-dropdown-menu li a small  { margin-top: 0; font-size: 0.78rem; }

    /* ── Hero ───────────────────────────────────────────── */
    .hero { min-height: 72vh; }

    .hero-overlay { padding: 0 1.5rem; }

    .hero-content h1 { font-size: clamp(2rem, 8vw, 2.8rem); }

    .hero-sub {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    /* ── Apartments section ─────────────────────────────── */
    .apartments-section {
        padding: 3rem 1.25rem;
    }

    .apartments-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .section-header h2 { font-size: 1.5rem; }

    /* ── Location section ──────────────────────────────── */
    .location-section { padding: 3rem 1.25rem; }
    .location-map iframe { height: 280px; }

    /* ── Zadar section ──────────────────────────────────── */
    .zadar-section { padding: 3.5rem 1.25rem; }

    .zadar-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .zadar-image { order: -1; }

    .zadar-image img { height: 260px; }

    .zadar-text h2 { font-size: 1.6rem; }

    /* ── Bottom CTA ─────────────────────────────────────── */
    .bottom-cta { padding: 3.5rem 1.25rem; }

    .bottom-cta h2 { font-size: 1.6rem; }

    /* ── Apartment detail: gallery ──────────────────────── */
    .apt-gallery { padding: 1.25rem 0 0; }

    .apt-gallery-inner {
        grid-template-columns: 1fr;
        height: auto;
        border-radius: 0;
        gap: 0;
    }

    .apt-gallery-cell--main {
        height: 280px;
    }

    .apt-gallery-grid2x2 { display: none; }

    /* ── Apartment detail: layout ───────────────────────── */
    .apt-content-wrap {
        grid-template-columns: 1fr;
        padding: 1.5rem 1.25rem 3rem;
        gap: 0;
    }

    .apt-sidebar {
        position: static;
        margin-top: 2rem;
    }

    .apt-main h1 { font-size: 1.5rem; }

    /* ── Calendar: single month ─────────────────────────── */
    .cal-months-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cal-month:last-child { display: none; }

    .cal-header { align-items: center; }

    /* ── Contact bar ────────────────────────────────────── */
    .contact-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-bar-item {
        padding: 1rem 1.5rem;
        justify-content: flex-start;
    }

    .contact-bar-divider {
        width: 100%;
        height: 1px;
    }

    /* ── Contact layout ─────────────────────────────────── */
    .contact-hero {
        padding: 2.5rem 1.25rem 2rem;
    }

    .contact-hero h1 { font-size: 1.7rem; }

    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 2rem auto;
        padding: 0 1.25rem 3rem;
    }

    .contact-form-wrap { padding: 1.25rem; }

    /* ── Form rows: stack on mobile ─────────────────────── */
    .form-row-2,
    .form-row-3 {
        flex-direction: column;
        gap: 1.25rem;
    }

    .btn-submit { width: 100%; justify-content: center; }
}

/* ── Small phones: ≤ 420px ───────────────────────────────── */
@media (max-width: 420px) {

    .hero { min-height: 85vh; }

    .apt-gallery-cell--main { height: 240px; }

    .contact-bar-item { padding: 0.85rem 1.25rem; }
}

/* ── New components responsive ───────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {

    /* Apartment cards */
    .apartment-card-image img { height: 220px; }

    /* Contact cards */
    .contact-cards-bar { gap: 1rem; }
    .contact-card { padding: 1.5rem 1.75rem; min-width: 160px; }

    /* About page */
    .about-intro-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-intro-stats { grid-template-columns: repeat(4, 1fr); min-width: unset; }
    .about-attraction-featured { gap: 2rem; }
    .about-restaurants { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {

    /* Transparent navbar — must be relative on mobile */
    .navbar-transparent {
        position: relative;
        background: #0f2942;
    }
    .home-main { position: static; }

    /* Hamburger lines white on transparent nav */
    .navbar-transparent .navbar-hamburger span,
    .navbar-solid .navbar-hamburger span { background: #fff; }

    /* Hero full height */
    .hero { min-height: 85vh; }

    /* Location pin card */
    .location-pin-card {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: none;
        font-size: 0.8rem;
    }
    .location-map iframe { height: 320px; }

    /* Bottom CTA */
    .bottom-cta { padding: 4rem 1.25rem; }
    .bottom-cta h2 { font-size: 1.8rem; }
    .bottom-cta-actions { flex-direction: column; align-items: center; }
    .btn-cta-primary,
    .btn-cta-outline { width: 100%; max-width: 320px; text-align: center; }

    /* Zadar section */
    .zadar-image-badge { bottom: 0.75rem; right: 0.75rem; font-size: 0.75rem; }
    .zadar-quote { font-size: 0.95rem !important; }

    /* Apartment card badges */
    .apartment-card-badges { gap: 0.3rem; }
    .apt-badge { font-size: 0.72rem; padding: 0.2rem 0.6rem; }
    .apt-badge-text { display: none; }

    /* Contact page new */
    .contact-hero-new { padding: 5rem 1.25rem 3.5rem; }
    .contact-hero-new h1 { font-size: 2rem; }
    .contact-hero-new p { font-size: 0.95rem; }

    .contact-cards-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem 1.25rem;
        gap: 0.75rem;
    }
    .contact-card {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
        padding: 1rem 1.25rem;
        align-items: center;
    }
    .contact-card-icon { font-size: 1.5rem; margin-bottom: 0; }

    .contact-form-section { padding: 2rem 1.25rem 4rem; }
    .contact-form-wrap { padding: 1.5rem; }
    .contact-form-header h2 { font-size: 1.25rem; }

    /* About page */
    .about-hero-content h1 { font-size: 2rem; }
    .about-hero-content p { font-size: 0.95rem; }
    .about-intro-stats { grid-template-columns: repeat(2, 1fr); }
    .about-section { padding: 4rem 1.25rem; }
    .about-beaches-grid { grid-template-columns: 1fr; }
    .about-beach-featured { grid-column: span 1; grid-template-columns: 1fr; }
    .about-beach-featured .about-beach-img img { height: 220px; }
    .about-attraction-featured { grid-template-columns: 1fr; padding: 1.5rem; }
    .about-attraction-images { grid-template-columns: 1fr 1fr; }
    .about-attr-grid { grid-template-columns: 1fr; }
    .about-food-hero { grid-template-columns: 1fr; }
    .about-food-hero img { height: 160px; }
    .about-restaurants { grid-template-columns: 1fr; }
    .about-bonus-inner { flex-direction: column; gap: 1rem; }
    .about-quote p { font-size: 1.1rem; }
    .about-section-header h2 { font-size: 1.5rem; }
    .about-intro-text h2 { font-size: 1.6rem; }

    /* Navbar solid hamburger */
    .navbar-solid .navbar-hamburger span { background: #fff; }
}

/* Small phones */
@media (max-width: 420px) {

    .contact-hero-new h1 { font-size: 1.7rem; }
    .bottom-cta h2 { font-size: 1.5rem; }
    .location-pin-card { flex-wrap: wrap; }
    .location-pin-btn { width: 100%; text-align: center; margin-top: 0.5rem; }
    .about-attraction-images { grid-template-columns: 1fr; }
    .about-attr-img-secondary { display: none; }
}