/* ==============================================
   mobile.css — Nikole Studio
   Add this LAST in main.css:
   @import url('mobile.css');
   ============================================== */

/* ── Shared base fixes ───────────────────────── */
@media (max-width: 768px) {

    /* Prevent horizontal overflow on all pages */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Page sections padding */
    .page-section {
        padding: 80px 5% 80px;
    }

    .section-head {
        margin-bottom: 36px;
    }

    .section-title {
        font-size: clamp(26px, 7vw, 38px);
    }

    .section-description {
        font-size: 14px;
    }

    /* Buttons full-width on small screens */
    .btn-action {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

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

    nav {
        padding: 0 5%;
    }

    .logo img {
        height: 36px;
    }

    /* Make sure hamburger is visible on all page backgrounds */
    .nav-toggle span {
        background: currentColor;
    }

    /* When nav is on a light background page */
    nav:not(.scrolled) .nav-toggle span {
        background: var(--maroon-deep, #5a0e18);
    }
}

/* ── HOME PAGE ───────────────────────────────── */
@media (max-width: 768px) {

    .intro {
        padding: 80px 5%;
    }

    .intro-title {
        font-size: clamp(26px, 7vw, 38px);
    }

    .studio-feature-row--reverse .studio-feature-img {
    order: 1;
    }

    .studio-feature-row--reverse .studio-feature-text {
    order: 2;
    }
    .studio-feature-img img {
    height: 240px;
}
}

/* ── SERVICES PAGE ───────────────────────────── */
@media (max-width: 768px) {

    .studio-feature-row--reverse .studio-feature-img {
    order: 1;
    }

    .studio-feature-row--reverse .studio-feature-text {
    order: 2;
    }
    .services-discovery {
        padding: 80px 5% 60px;
    }

    .services-head {
        text-align: center;
        margin-bottom: 36px;
    }

    .services-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .service-item {
        max-width: 100%;
        margin: 0;
    }

    /* Fix service content — always visible on mobile, no hover needed */
    .service-content {
        position: relative;
        transform: none !important;
        background: var(--off-white);
        padding: 20px !important;
    }

    .service-overlay {
        display: none;
    }

    /* Steps section */
    .service-steps {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 32px 0 0;
    }

    .service-step {
        padding: 24px 20px;
        border-radius: 16px;
    }

    /* Highlight bar */
    .service-highlight-bar {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
        border-radius: 16px;
        text-align: left;
    }

    /* Package sections */
    .packages-page .page-section {
        padding: 80px 5%;
    }

    .package-group {
        padding: 22px 16px;
        border-radius: 14px;
    }

    .package-group-head h2 {
        font-size: clamp(26px, 7vw, 40px);
    }

    .package-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pkg-lite-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .package-jump {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .package-jump::-webkit-scrollbar {
        display: none;
    }

    .package-jump a {
        flex: 0 0 auto;
    }
}

/* ── GALLERY PAGE ────────────────────────────── */
@media (max-width: 768px) {

    .gallery-section {
        padding: 80px 5% 80px;
    }

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

    .gallery-filters {
        gap: 8px;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto;
        padding: 7px 16px;
        font-size: 0.78rem;
    }

    /* Gallery category cards */
    .gallery-cards {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 5%;
        gap: 16px;
    }

    .gallery-card {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ── BOOKING PAGE ────────────────────────────── */
@media (max-width: 768px) {

    .booking-section {
        padding: 90px 5% 80px;
    }

    .booking-shell {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .booking-policy-mustread {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }

    .booking-card {
        padding: 22px 16px;
    }

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

    /* Calendar */
    .calendar-board {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .calendar-weekdays,
    .calendar-days {
        gap: 6px;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .calendar-day {
        width: 36px;
        height: 36px;
        font-size: 14px;
        justify-self: center;
    }

    .calendar-weekdays span {
        font-size: 14px;
        text-align: center;
    }

    .calendar-toolbar h3 {
        font-size: 18px;
        text-align: center;
    }

    /* Time slots */
    .time-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .time-slot {
        min-height: 56px;
        font-size: 13px;
    }

    /* Side panel */
    .booking-side-panel {
        position: static;
        grid-template-columns: 1fr;
    }

    .booking-side-panel .sidebar-card {
        padding: 20px 16px;
    }

    /* Summary info rows */
    .info-row {
        flex-direction: column;
        gap: 4px;
    }

    .info-value {
        text-align: left;
        word-break: break-word;
    }

    /* Setup design card */
    #setupDesignCard {
        padding: 16px;
    }
}

/* ── CONTACT PAGE ────────────────────────────── */
@media (max-width: 768px) {

    .contacts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 22px 16px;
    }

    .contact-form-heading {
        flex-direction: column;
        gap: 14px;
    }

    .messenger-pill {
        align-self: flex-start;
    }

    .contact-map-card {
        min-height: auto;
        grid-template-rows: 260px auto;
    }

    .contact-map-card iframe {
        min-height: 260px;
    }

    .contact-map-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 16px;
    }

    .contact-map-footer h2 {
        font-size: clamp(18px, 5vw, 26px);
    }

    .contact-method {
        gap: 12px;
        padding: 18px 0;
    }

    /* Review form */
    .review-form-card .form-grid {
        grid-template-columns: 1fr;
    }

    /* Form actions */
    .contact-actions {
        flex-direction: column;
        gap: 12px;
    }

    .contact-actions .btn-action {
        min-width: unset;
        width: 100%;
    }
}

/* ── FORMS (shared) ──────────────────────────── */
@media (max-width: 768px) {

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

    .form-group.full {
        grid-column: 1;
    }

    input,
    select,
    textarea {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 14px 16px;
    }

    .h-captcha {
        transform: scale(0.88);
        transform-origin: left center;
    }
}

/* ── PAGE HERO (section hero banners) ────────── */
@media (max-width: 768px) {

    .page-hero,
    [class*="page-hero-"] {
        min-height: 220px;
        padding: 100px 5% 40px;
    }

    .hero-minimal {
        padding: 100px 5% 60px;
    }

    .hero-portrait-pro {
        padding: 90px 5% 50px;
    }
}

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

    .page-footer {
        padding: 28px 5%;
        text-align: center;
    }
}

/* ── VERY SMALL SCREENS (≤ 380px) ───────────── */
@media (max-width: 380px) {

    .calendar-day {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .calendar-weekdays span {
        font-size: 12px;
    }

    .time-slots {
        grid-template-columns: 1fr;
    }

    .booking-card,
    .contact-info-card,
    .contact-form-card {
        padding: 18px 12px;
    }

    .hero-minimal-title,
    .hero-title {
        font-size: clamp(24px, 9vw, 32px);
    }

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

/* ── SETUP / CUSTOMIZE PAGE — TABLET (≤ 920px) ─ */
@media (max-width: 920px) {

    /* Sidebar scroll height is unconstrained at this width */
    .setup-sidebar-scroll {
        max-height: none;
    }

    /* Expand grid to 3 columns while there's still room */
    .backdrop-grid,
    .prop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── SETUP / CUSTOMIZE PAGE ──────────────────── */
@media (max-width: 768px) {

    .setup-planner {
        grid-template-columns: 1fr;
        padding: 90px 14px 24px;
        gap: 16px;
    }

    /* Sidebar full width on mobile */
    .setup-sidebar {
        order: 2; /* show canvas first, then sidebar */
    }

    .setup-composer {
        order: 1;
        min-height: 480px;
    }

    /* Scale canvas to fit screen */
    .workspace {
        min-height: 380px;
        padding: 14px;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .canvas-shell {
        padding: 8px;
        border-radius: 14px;
    }

    /* Header actions wrap nicely */
    .composer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .header-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .tool-btn {
        min-height: 36px;
        padding: 0 12px;
        font-size: 10px;
    }

    /* Footer stacks */
    .composer-footer {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }

    .footer-tools {
        width: 100%;
    }

    .mini-tool {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }

    /* Hide keyboard hints on mobile — not useful on touch */
    .canvas-hints {
        display: none;
    }

    /* Backdrop/prop grid — 3 columns on medium mobile */
    .backdrop-grid,
    .prop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* Brand card tighter horizontal padding */
    .setup-brand-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .setup-brand-card h1 {
        font-size: 18px;
    }

    /* Canvas — tighter border radii on small screens */
    #editor {
        border-radius: 10px;
    }

    .canvas-shell .canvas-container,
    .canvas-shell canvas {
        border-radius: 10px;
    }

    /* Ensure sidebar scrolls freely on mobile */
    .setup-sidebar-scroll {
        overflow-y: auto;
        max-height: none;
    }
}

@media (max-width: 400px) {

    /* Very small phones — 2 col grid */
    .backdrop-grid,
    .prop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Size buttons stack to single column on tiny screens */
    .size-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .setup-tab {
        font-size: 9.5px;
        letter-spacing: 0.8px;
    }

    .setup-tabs {
        padding: 0 4px;
    }
}

/* ── TOUCH DEVICE: disable hover transforms ──── */
@media (hover: none) and (pointer: coarse) {

    .service-item:hover,
    .package-card:hover,
    .gallery-card-item:hover,
    .testimonial-card-item:hover,
    .pkg-lite-card:hover {
        transform: none;
    }

    /* Show service content always on touch */
    .service-content {
        transform: translateY(0) !important;
    }

    .gallery-overlay {
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    }
}