/* ==========================================================================
   Responsive — Ananoè Noleggio Barche
   ========================================================================== */

/* ---------- Tablet (max 1024px) ---------- */
@media (max-width: 1024px) {
    .container {
        padding: 0 40px;
    }

    .hero__content {
        padding: 0 40px;
    }

    .hero__title {
        font-size: 48px;
        line-height: 52px;
    }

    .hero__title-ghost {
        font-size: 48px;
        line-height: 52px;
    }

    .hero__highlights {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Boat Slider */
    .popular-boats__header {
        padding: 0 40px;
    }

    .boat-slider-wrap {
        padding-left: 40px;
    }

    .boat-slider__track {
        padding-right: 40px;
    }

    /* Categories */
    .our-boats__layout {
        flex-direction: column;
        gap: 16px;
    }

    .stats-column {
        width: 100%;
        flex-direction: row;
    }

    .stats-panel {
        flex: 1;
    }

    .categories__grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .boat-cards__header {
        text-align: center;
        margin-bottom: var(--space-xl);
    }

    .boat-cards-section .container {
        flex-direction: column;
    }

    /* Destinations */
    .dest-panel__main {
        flex-direction: column;
        height: auto;
    }

    .dest-panel__image {
        width: 100%;
        height: 240px;
    }

    .dest-panel__info {
        padding: 20px;
    }

    .dest-panel__name {
        font-size: 32px;
    }

    .dest-panel__strip {
        height: 160px;
    }

    .strip-photo--placeholder {
        width: 160px;
    }

    .strip-photo--wide {
        width: 220px;
    }

    /* Reviews */
    .reviews__slider-outer {
        padding-left: 40px;
    }

    /* FAQ */
    .faq-section {
        height: auto;
        min-height: 570px;
        padding: 60px 0;
    }

    .faq__layout {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .faq__list {
        width: 100%;
    }

    .faq__image {
        max-width: 100%;
    }

    .how-it-works__layout {
        flex-direction: column;
    }

    .testimonials__layout {
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* Footer */
    .footer-inner {
        padding: 0 40px 32px;
    }

    .footer__columns {
        flex-wrap: wrap;
        gap: 32px;
    }

    .footer-brand {
        flex: none;
    }

    .destination-panel__inner {
        flex-direction: column;
    }
}

/* ---------- Mobile (max 768px) ---------- */
@media (max-width: 768px) {
    /* Container */
    .container {
        padding: 0 20px;
    }

    /* Header */
    .main-nav {
        display: none;
    }

    .header-phone {
        display: none;
    }

    .header-inner {
        padding: 0 20px;
        height: 60px;
    }

    .site-header {
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .site-header .logo-name {
        color: #2b2b2b;
        font-size: 18px;
        line-height: 22px;
    }

    .site-header .logo-sub {
        color: #2b2b2b;
        font-size: 9px;
        line-height: 12px;
    }

    .site-header .logo-img {
        width: 36px;
        height: 36px;
    }

    .mobile-menu-toggle {
        display: flex;
        color: #2b2b2b;
    }

    .header-actions .btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* Hero */
    .hero {
        height: auto;
        min-height: 100svh;
        min-height: 100vh; /* fallback */
    }

    .hero__content {
        padding: 80px 20px 32px;
    }

    .hero__title {
        font-size: 42px;
        line-height: 46px;
        letter-spacing: -1px;
    }

    .hero__title-ghost {
        font-size: 42px;
        line-height: 46px;
        letter-spacing: -1px;
    }

    .hero__subtitle {
        font-size: 15px;
    }

    /* Filter Bar — stack vertical */
    .filter-bar {
        flex-direction: column;
        width: 100%;
        height: auto;
        border-radius: var(--radius-lg);
        padding: 12px;
        gap: 0;
    }

    .filter-bar__field {
        padding: 14px 12px;
        border-bottom: 1px solid #ebebeb;
        width: 100%;
    }

    .filter-bar__field:last-of-type {
        border-bottom: none;
    }

    .filter-bar__divider {
        display: none;
    }

    .filter-bar__search {
        width: 100%;
        height: 48px;
        border-radius: var(--radius-full);
        margin-top: 8px;
    }

    .filter-bar__date {
        width: 100%;
    }

    .search-bar {
        flex-direction: column;
        padding: var(--space-md);
        gap: var(--space-sm);
    }

    .search-bar__field {
        border-right: none;
        border-bottom: 1px solid var(--aqua-light);
        padding: var(--space-sm) 0;
        width: 100%;
    }

    .search-bar__field:last-of-type {
        border-bottom: none;
    }

    /* Boat Slider */
    .popular-boats__header {
        padding: 0 20px;
        margin-bottom: 20px;
    }

    .popular-boats .heading-display {
        font-size: 28px;
    }

    .popular-boats__header .section-heading__sub {
        font-size: 13px;
    }

    .boat-slider-wrap {
        padding-left: 20px;
    }

    .boat-slider__track {
        padding-right: 20px;
        gap: 16px;
    }

    .boat-card-glass {
        flex: 0 0 260px;
        height: 400px;
    }

    .popular-boats__inner::after {
        width: 40px;
    }

    /* Categories / Cosa Offriamo */
    .our-boats__layout {
        flex-direction: column;
        gap: 12px;
    }

    .category-grid__row {
        flex-direction: column;
        gap: 12px;
    }

    .cat-card {
        min-height: 200px;
    }

    .stats-column {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .stats-panel__number {
        font-size: 48px;
        line-height: 48px;
    }

    .our-boats .heading-display {
        font-size: 28px;
    }

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

    .boat-cards__grid {
        grid-template-columns: 1fr;
    }

    /* Destinations */
    .dest-tabs__switcher {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
    }

    .dest-tabs__switcher::-webkit-scrollbar {
        display: none;
    }

    .dest-tabs__btn {
        flex-shrink: 0;
        padding: 8px 16px;
        font-size: 13px;
    }

    .dest-panel {
        border-radius: 0 0 16px 16px;
        padding: 8px;
        gap: 8px;
    }

    .dest-panel__main {
        flex-direction: column;
        height: auto;
    }

    .dest-panel__image {
        width: 100%;
        height: 200px;
        border-radius: 10px;
    }

    .dest-panel__info {
        padding: 16px 12px;
        gap: 10px;
    }

    .dest-panel__name {
        font-size: 28px;
    }

    .dest-panel__tagline {
        font-size: 16px;
    }

    .dest-panel__strip {
        height: 120px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }

    .dest-panel__strip::-webkit-scrollbar {
        display: none;
    }

    .strip-photo--placeholder {
        width: 120px;
        flex-shrink: 0;
    }

    .strip-photo--wide {
        width: 180px;
        flex-shrink: 0;
    }

    .strip-photo--teal {
        width: 100px;
        flex-shrink: 0;
    }

    .strip-photo:nth-child(2) {
        width: 140px;
        flex-shrink: 0;
    }

    .strip-photo:last-child {
        flex: none;
        width: 140px;
    }

    .destinations-section .heading-display {
        font-size: 28px;
    }

    .tab-switcher {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-sm);
    }

    .tab-switcher::-webkit-scrollbar {
        display: none;
    }

    .tab-switcher__btn {
        flex-shrink: 0;
    }

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

    /* Reviews */
    .reviews__header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .reviews__header .heading-display {
        font-size: 28px;
    }

    .reviews__slider-outer {
        padding-left: 20px;
    }

    .reviews__slider-outer::after {
        width: 40px;
    }

    .review-card {
        flex: 0 0 280px;
    }

    .reviews__score strong {
        font-size: 24px;
    }

    /* Testimonials */
    .testimonials__bubbles {
        gap: var(--space-md);
    }

    /* FAQ */
    .faq-section {
        height: auto;
        min-height: auto;
        padding: 48px 0;
    }

    .faq__left .heading-display {
        font-size: 28px;
    }

    .faq__list {
        width: 100%;
    }

    .faq-card {
        padding: 16px 18px;
    }

    .faq-card__header {
        font-size: 15px;
    }

    .faq-question {
        font-size: 15px;
    }

    /* How It Works */
    .how-it-works__steps {
        flex-direction: column;
    }

    /* CTA */
    .cta-date-picker {
        padding: var(--space-xl) var(--space-lg);
    }

    .cta-date-picker__row {
        flex-direction: column;
    }

    .cta-date-picker__input {
        width: 100%;
    }

    .newsletter {
        padding: var(--space-xl) var(--space-lg);
    }

    .newsletter__form {
        flex-direction: column;
    }

    /* Footer */
    .footer-inner {
        padding: 0 20px 24px;
    }

    .footer__columns {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .footer__brand {
        width: 100%;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* Section spacing */
    .section {
        padding: var(--space-2xl) 0;
    }
}

/* ---------- Small mobile (max 375px) ---------- */
@media (max-width: 375px) {
    .hero__title {
        font-size: 28px;
        line-height: 32px;
    }

    .hero__title-ghost {
        font-size: 28px;
        line-height: 32px;
    }

    h2, .h2 {
        font-size: 28px;
    }

    .categories__grid {
        grid-template-columns: 1fr;
    }

    .stat-block__number {
        font-size: 36px;
    }

    .boat-card-glass {
        flex: 0 0 240px;
        height: 370px;
    }

    .review-card {
        flex: 0 0 260px;
    }

    .cat-card {
        min-height: 180px;
    }

    .dest-panel__image {
        height: 160px;
    }

    .dest-panel__strip {
        height: 100px;
    }
}