/* ==========================================================================
   STUDIO OSTEOPATIA - VINOVO (TO)
   Responsive CSS — Full Mobile & Tablet Support
   ========================================================================== */

/* ==========================================================================
   Shared Mobile Navigation — Slide-in Drawer
   ========================================================================== */

/* Mobile nav overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 990;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-nav-overlay.visible {
    opacity: 1;
}

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100dvh;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    padding: 2rem 1.5rem;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nav-drawer.open {
    transform: translateX(0);
}

.nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.nav-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-drawer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-drawer-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    transition: all 0.2s ease;
}

.nav-drawer-links a:hover,
.nav-drawer-links a.active {
    background: rgba(42, 157, 143, 0.1);
    color: var(--accent);
}

.nav-drawer-links a i {
    width: 20px;
    opacity: 0.7;
}

.nav-drawer-footer {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ==========================================================================
   Large Tablets — ≤1024px
   ========================================================================== */

@media (max-width: 1024px) {
    /* Nav */
    .nav-links { display: none !important; }
    .mobile-nav-toggle { display: flex !important; }
    .nav-actions .btn-accent { display: none; } /* hide in smaller space, moved to drawer */

    .section-title { font-size: 2.1rem; }

    .hero-headline { font-size: 2.85rem; }

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

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .about-grid,
    .location-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-credentials-box {
        right: 10px;
        bottom: -10px;
    }

    .calendar-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Tablet Portrait — ≤768px
   ========================================================================== */

@media (max-width: 768px) {

    /* Layout */
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }

    .section-padding { padding-top: 4rem; padding-bottom: 4rem; }

    .section-title { font-size: 1.85rem; }

    .section-description { font-size: 1rem; }

    /* Hero */
    .hero-section { padding-top: calc(var(--header-height) + 2.5rem); padding-bottom: 3.5rem; }

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

    .hero-headline { font-size: 2.2rem; }

    .hero-subhead { font-size: 1rem; }

    .hero-stats { flex-wrap: wrap; gap: 1.5rem; }

    .hero-image-card img { height: 340px; }

    .hero-floating-card { left: -10px; bottom: -10px; max-width: 230px; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }

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

    /* Booking Wizard */
    .booking-steps-bar {
        padding: 1rem;
        gap: 0.5rem;
        overflow-x: auto;
    }

    .step-item span { display: none; }

    .booking-step-content { padding: 1.5rem; }

    .booking-service-grid { grid-template-columns: 1fr; }

    .priority-selector-grid { grid-template-columns: 1fr; }

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

    .calendar-day-cell { font-size: 0.8rem; }

    .calendar-days-grid { gap: 4px; }

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

    /* Location */
    .location-grid { grid-template-columns: 1fr; }

    .map-wrapper { min-height: 300px; }

    #leaflet-map { min-height: 300px; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }

    .form-row { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    /* Admin Table */
    .admin-table-wrapper { overflow-x: auto; }

    .admin-table { min-width: 720px; }
}

/* ==========================================================================
   Smartphone — ≤480px
   ========================================================================== */

@media (max-width: 480px) {
    .hero-headline { font-size: 1.85rem; }

    .hero-badge { font-size: 0.75rem; padding: 0.35rem 0.75rem; }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn { justify-content: center; }

    .section-title { font-size: 1.6rem; }

    .brand-logo span:first-child { font-size: 1.15rem; }

    .hero-image-card img { height: 260px; }

    .hero-floating-card { display: none; }

    .studio-gallery-grid { grid-template-columns: 1fr; }

    .gallery-card img { height: 180px; }

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

    .booking-steps-bar { justify-content: center; }

    /* Hero stats - 2 column grid */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Cookie banner */
    .sys-alert-panel {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 1rem;
    }

    .cookie-text-content { flex-direction: column; gap: 0.75rem; }

    .cookie-icon { display: none; }

    .cookie-actions { flex-direction: column; }

    .cookie-actions .btn { width: 100%; }

    /* Modal fullscreen on small phones */
    .modal-window {
        max-height: 95dvh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        align-self: flex-end;
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    /* Admin */
    .admin-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-filter-bar {
        flex-wrap: wrap;
    }

    .filter-tab {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
}

/* ==========================================================================
   Touch Enhancements (all mobile)
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    .calendar-day-cell {
        min-height: 42px;
    }

    .time-slot-btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    .btn {
        min-height: 44px;
    }

    .admin-action-btn {
        min-width: 36px;
        min-height: 36px;
    }

    /* Larger tap targets for nav */
    .nav-link { padding: 0.75rem 0; }

    .contact-card { min-height: 72px; }
}

/* ==========================================================================
   Print Styles (Admin Dashboard)
   ========================================================================== */

@media print {
    .navbar,
    .sys-alert-panel,
    .admin-action-btn,
    .admin-filter-bar,
    .btn-show-audit { display: none !important; }

    .admin-table { min-width: unset; font-size: 0.8rem; }

    body { background: white; color: black; }
}