/*
 * main-mobile.css
 * ─────────────────────────────────────────────────────────────────
 * Mobile-only overrides for the MAIN WEBSITE (index.html).
 * Loaded AFTER luxury.css so every rule here wins on small screens.
 *
 * Desktop styles (> 768px) are completely untouched.
 *
 * Breakpoints:
 *   ≤ 768px  — phones and small tablets (primary)
 *   ≤ 390px  — small phones: iPhone SE, iPhone 12, Galaxy S8
 *
 * Sections covered (in layout order):
 *   1. Global overflow guard
 *   2. Sticky section height fix
 *   3. Hero
 *   4. Showcase (Configure Yourself)
 *   5. Collections / Pre-built product cards
 *   6. Mechanism / NH35
 *   7. Gallery
 *   8. Contact
 *   9. Footer
 * ─────────────────────────────────────────────────────────────────
 */

/* ════════════════════════════════════════════════════════════
   PHONE LAYOUT  (≤ 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── 1. Global — prevent any horizontal scroll ──────────── */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }


    /* ── 2. Sticky sections
         Desktop uses position:sticky + height:100vh.
         On mobile when a section's content is taller than the
         viewport the bottom content is cut off and unreachable.
         height:auto + min-height lets the section grow freely. ── */
    .sticky-section {
        height: auto !important;
        min-height: 100svh;
        position: relative !important;
        top: auto !important;
        padding-top: 90px;
        padding-bottom: 60px;
    }


    /* ════════════════════════════════════════════
       3.  HERO
    ════════════════════════════════════════════ */
    .hero-layout {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 20px !important;
        text-align: center;
        align-items: center;
    }

    .hero-left {
        text-align: center !important;
        align-items: center;
        width: 100%;
    }

    h1 {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        margin-bottom: 16px !important;
        word-break: break-word;
    }

    .hero-tagline {
        font-size: 1.05rem;
    }

    .reviews-box {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px !important;
    }


    /* ════════════════════════════════════════════
       4.  SHOWCASE  (Configure Yourself)
    ════════════════════════════════════════════ */
    .showcase-wrapper {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 20px !important;
        text-align: center;
        align-items: center;
    }

    .showcase-text {
        text-align: center !important;
        width: 100%;
    }

    .showcase-title {
        font-size: clamp(1.6rem, 6vw, 2.6rem);
        margin-bottom: 20px;
    }

    /*
     * FIX: min-width: 500px on .showcase-images pushed the
     * element way past the viewport edge on phones.
     */
    .showcase-images {
        min-width: unset !important;
        width: 100% !important;
        max-width: 340px !important;
        aspect-ratio: 1;
        margin: 0 auto;
    }

    .showcase-configure-btns {
        align-items: stretch !important;
        width: 100%;
    }

    .showcase-configure-btn {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 18px !important;
    }


    /* ════════════════════════════════════════════
       5.  COLLECTIONS — PRE-BUILT PRODUCT CARDS
    ════════════════════════════════════════════ */
    .collections-wrapper {
        height: auto !important;
        min-height: unset !important;
        padding: 20px 16px 40px !important;
    }

    .collections-header {
        margin-bottom: 28px;
    }

    .page-title {
        font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
        letter-spacing: 0.08em;
    }

    .page-subtitle {
        font-size: 0.9rem;
        padding: 0 8px;
    }

    /*
     * FIX: minmax(320px, 1fr) created cards that were almost as
     * wide as the phone screen, then the 40px side padding caused
     * the grid to overflow. Single column + zero grid padding.
     */
    .prebuilt-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .prebuilt-card {
        padding: 24px 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .card-image-wrapper {
        aspect-ratio: 1;
        margin-bottom: 20px;
    }

    .watch-title {
        font-size: 1.1rem !important;
    }

    .watch-price {
        font-size: 1rem !important;
        margin-bottom: 16px !important;
    }

    .add-cart-btn {
        padding: 14px 16px !important;
        font-size: 0.78rem !important;
    }


    /* ════════════════════════════════════════════
       6.  MECHANISM / NH35
    ════════════════════════════════════════════ */
    .mechanism-layout {
        flex-direction: column !important;
        padding: 0 16px !important;
        gap: 28px !important;
        align-items: stretch !important;
    }

    /*
     * FIX: max-width: 42% made the card extremely narrow
     * when the two columns were forced to stack vertically.
     */
    .mechanism-column {
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    .nh35-title {
        font-size: 1.4rem !important;
        text-align: center !important;
    }

    .nh35-subtitle {
        text-align: center !important;
        font-size: 0.9rem;
    }

    .nh35-card {
        padding: 22px 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Scrollable body so text is readable without overflowing */
    .nh35-body {
        max-height: 200px !important;
    }

    .nh35-para {
        font-size: 0.88rem !important;
        line-height: 1.7 !important;
    }

    .nh35-specs {
        gap: 10px !important;
    }

    /* FIX: max-width: 45% — must be full-width when stacked */
    .mechanism-video {
        max-width: 100% !important;
        width: 100% !important;
    }

    .mechanism-video video {
        max-height: 45vw;
        width: 100%;
        object-fit: cover;
    }


    /* ════════════════════════════════════════════
       7.  GALLERY
    ════════════════════════════════════════════ */
    .lifestyle-content {
        padding: 0 16px !important;
    }

    .lifestyle-content h2 {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
        margin-bottom: 10px;
    }

    .lifestyle-content>p {
        font-size: 0.88rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-top: 24px !important;
        padding: 0 !important;
        width: 100%;
    }

    .gallery-item {
        aspect-ratio: 1;
        border-radius: 3px;
    }

    /* Always show overlay on touch devices (no hover) */
    .gallery-overlay {
        opacity: 0.6;
    }

    .gallery-text {
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        transform: none;
    }


    /* ════════════════════════════════════════════
       8.  CONTACT SECTION
    ════════════════════════════════════════════ */
    .contact-galaxy-section {
        padding: 60px 0 40px !important;
    }

    /*
     * FIX: padding: 0 60px on .contact-top-row was wider than
     * the screen on any phone — caused severe horizontal overflow.
     */
    .contact-top-row {
        flex-direction: column !important;
        gap: 28px !important;
        padding: 0 16px !important;
        align-items: stretch !important;
    }

    .contact-left {
        text-align: center;
    }

    .contact-heading {
        font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .contact-subtext {
        font-size: 0.85rem;
        letter-spacing: 0.2em;
    }

    /* Hide horizontal arrow — meaningless on a stacked layout */
    .contact-arrow-wrapper {
        display: none !important;
    }

    .contact-form-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    .contact-form-inner {
        padding: 24px 18px !important;
    }

    .form-submit-btn {
        width: 100%;
        justify-content: center;
        float: none !important;
        padding: 14px 24px !important;
        font-size: 0.78rem !important;
    }

    .contact-socials-row {
        flex-wrap: wrap;
        gap: 12px;
        padding: 0 16px;
        justify-content: center;
    }

    .contact-btn {
        padding: 12px 20px !important;
        font-size: 0.78rem !important;
    }


    /* ════════════════════════════════════════════
       9.  FOOTER
    ════════════════════════════════════════════ */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        text-align: center;
    }

    .footer-col {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .footer-list {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .instagram-link {
        justify-content: center;
    }
}


/* ════════════════════════════════════════════════════════════
   SMALL PHONES  (≤ 390px)
   iPhone SE / iPhone 12 / Galaxy S8 / Pixel 4a
   ════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {

    .sticky-section {
        padding-top: 80px;
    }

    .hero-layout,
    .showcase-wrapper,
    .mechanism-layout,
    .contact-top-row {
        padding: 0 14px !important;
    }

    .prebuilt-card {
        padding: 18px 14px !important;
    }

    .nh35-card {
        padding: 16px 14px !important;
    }

    .gallery-grid {
        gap: 6px !important;
    }
}