/* ===============================================================
   ALNITAK CONSTRUCTIONS - MOBILE LAYOUT REDESIGN
   Version: 1.0  |  Author: Antigravity AI
   Purpose: Fix all mobile layout issues while maintaining desktop
   Constraint: DO NOT REDUCE FONT SIZES - Layout fixes only
   Breakpoints: 768px | 576px | 375px
   Load order: LAST (overrides all other CSS files)
   Desktop view: ZERO CHANGES - all rules inside @media blocks
   =============================================================== */

/* -----------------------------------------------------------
   TABLET & SMARTPHONES (<= 768px)
   ----------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* -- GLOBAL: FORCE VIEWPORT CONTAINMENT -- */
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
    }

    /* Every container must respect viewport */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sections - reduce generous desktop padding */
    .section {
        padding: 3.5rem 0;
    }

    /* All images responsive */
    img {
        max-width: 100% !important;
        height: auto;
        display: block;
    }

    /* Brand Logo & Brand Text Overrides - Prevent global img width overrides */
    .brand-logo-img {
        height: 38px !important;
        width: 38px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .mobile-drawer-brand img {
        height: 36px !important;
        width: 36px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .brand-text-block {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    /* Headings - prevent overflow, allow natural wrapping */
    h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        hyphens: auto;
    }

    /* Responsive heading scaling */
    h1 { font-size: clamp(1.8rem, 8vw, 4.5rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 3.25rem); }
    h3 { font-size: clamp(1.3rem, 5vw, 2.25rem); }

    /* Section titles */
    .section-title {
        font-size: clamp(1.5rem, 6vw, 2.75rem);
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .section-subtitle {
        font-size: 1rem;
        max-width: 100%;
        line-height: 1.6;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Touch-friendly targets */
    button, a.btn, .btn, .portfolio-tab-btn {
        min-height: 44px;
    }

    /* Form inputs - prevent iOS zoom (must be >= 16px) */
    input, textarea, select {
        font-size: 16px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* -- HERO SLIDER SECTION -- */
    .hero-section-slider {
        min-height: 80vh;
        height: 80vh;
    }

    .hero-slider-content {
        max-width: 100%;
        padding: 0 0.5rem;
    }

    .hero-slider-content .hero-heading {
        font-size: clamp(1.8rem, 7vw, 3rem);
        line-height: 1.1;
        word-break: break-word;
    }

    .hero-slider-content .hero-subtext {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    /* Hero CTA buttons - stack vertically */
    .hero-slider-buttons {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .hero-slider-buttons .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        white-space: normal;
    }

    .hero-slider-arrow-prev { left: 8px; }
    .hero-slider-arrow-next { right: 8px; }

    .hero-slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* -- SPLIT WRAPPER: 2-column to 1-column stack --
       Used in: Home (About), Home (Consultation), Pricing */
    .split-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .split-wrapper > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Philosophy image wrapper on mobile */
    .philosophy-image-wrapper {
        min-height: 260px !important;
        height: 260px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* -- HOME PAGE: EDITORIAL ABOUT SECTION -- */
    .editorial-about-section {
        padding: 3.5rem 0;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .section-editorial-title {
        font-size: clamp(1.4rem, 6vw, 2.5rem) !important;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        line-height: 1.2;
    }

    /* Giant experience numbers - scale on mobile */
    .about-experience-wrapper {
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .experience-giant-num {
        font-size: 3.5rem !important;
        line-height: 1;
    }

    .experience-giant-label {
        font-size: 1.5rem !important;
    }

    /* Founder note card */
    .founder-note-card {
        padding: 1.25rem;
        margin: 1.25rem 0;
    }

    .founder-quote-text {
        font-size: 0.95rem !important;
        line-height: 1.7;
    }

    .founder-signature-name {
        font-size: 1rem;
        word-break: break-word;
    }

    /* About actions - stack vertically */
    .about-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* -- HOME PAGE: STATS SECTION -- */
    .stats-grid-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.75rem 0.5rem !important;
    }

    .stat-box-container {
        font-size: 2rem !important;
        padding: 0.3rem 0.85rem !important;
        min-width: 70px !important;
        margin-bottom: 0.5rem !important;
    }

    .stat-label-row1 { font-size: 0.9rem !important; }
    .stat-label-row2 { font-size: 0.8rem !important; }

    /* -- HOME PAGE: SERVICES GRID (Blueprint Cards) -- */
    .services-grid-wrapper {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .blueprint-service-card {
        padding: 2rem 1.5rem;
    }

    /* -- HOME PAGE: JOURNEY STEPS (grid-3) -- */
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* -- HOME PAGE: ASYMMETRIC PORTFOLIO GRID -- */
    .asymmetric-portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .portfolio-asymmetric-item.col-8,
    .portfolio-asymmetric-item.col-4,
    .portfolio-asymmetric-item.col-6 {
        grid-column: span 1 !important;
        height: 280px;
    }

    /* -- HOME PAGE: TESTIMONIALS -- */
    .testimonials-duo-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .testimonial-card-premium {
        padding: 1.75rem 1.5rem;
    }

    .testimonial-name-title {
        font-size: 1.1rem;
        word-break: break-word;
    }

    /* -- HOME PAGE: REQUEST CONSULTATION SECTION --
       The section uses .split-wrapper (handled above)
       Additional overrides for the form panel */
    #consultation {
        padding: 3rem 0;
    }

    .consultation-form-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The "Request Consultation" h2 with inline font-size: 2.5rem */
    .consultation-form-panel h2,
    .consultation-form-panel .section-editorial-title {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
        word-break: break-word;
        overflow-wrap: break-word;
        line-height: 1.2;
        max-width: 100%;
    }

    /* Form grid - single column on mobile */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }

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

    .form-input-premium {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 0.85rem 1rem;
    }

    /* Submit buttons - full width */
    .consultation-form-panel .btn,
    #homeContactForm .btn,
    #pricingQuoteForm .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 48px;
    }

    /* -- PROJECTS PAGE: FILTER BUTTONS --
       Fix: Stack vertically, full width, proper touch targets */
    .portfolio-tabs-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
        width: 100% !important;
        overflow-x: hidden !important;
        margin-bottom: 2rem;
        padding: 0 !important;
    }

    .portfolio-tab-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 0.9rem 1rem !important;
        font-size: 1rem !important;
        min-height: 48px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.3;
        box-sizing: border-box !important;
    }

    /* -- PROJECTS PAGE: JOURNAL ROWS (alternating layout) -- */
    .projects-journal-row {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .projects-journal-row.layout-alt {
        flex-direction: column !important;
    }

    .projects-journal-img-wrapper {
        height: 260px !important;
        width: 100% !important;
        flex: none !important;
    }

    .projects-journal-content {
        flex: none !important;
        width: 100% !important;
    }

    .project-journal-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        word-break: break-word;
    }

    .portfolio-journal-container {
        gap: 3rem !important;
        margin-top: 2rem;
        margin-bottom: 2.5rem;
    }

    /* Project metrics grid - 2 columns */
    .project-metrics-mini-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 1.25rem 0;
    }

    .metric-mini-val {
        font-size: 1rem !important;
        word-break: break-word;
    }

    /* -- PRICING PAGE: PILLARS (grid-4) & PRICING GRID TIERS -- */
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .story-pillar-card {
        padding: 1.75rem 1.5rem;
    }

    /* Pricing grid - 1 column stack for tier cards */
    .pricing-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 1rem 0 !important;
    }

    .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem 1.5rem !important;
        box-sizing: border-box !important;
        border-radius: 4px !important;
    }

    .pricing-card .pricing-title,
    .pricing-card h3 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .pricing-card .pricing-price,
    .pricing-card .price {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin: 1rem 0 1.5rem 0 !important;
        word-break: break-word !important;
    }

    .pricing-card .pricing-features,
    .pricing-card ul {
        text-align: left !important;
        padding-left: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    .pricing-card .pricing-features li,
    .pricing-card li {
        font-size: 0.95rem !important;
        padding: 0.5rem 0 !important;
        word-break: break-word !important;
    }

    .pricing-card button,
    .pricing-card .btn {
        width: 100% !important;
        min-height: 48px !important;
    }

    /* Generic .request-consultation alias */
    .request-consultation {
        max-width: 100% !important;
        width: 100% !important;
        padding: 2.5rem 1rem !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .request-consultation h1 {
        max-width: 100% !important;
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
    }

    .request-consultation h2 {
        font-size: 0.9rem !important;
        letter-spacing: 0.15em !important;
    }

    .request-consultation form,
    .request-consultation input,
    .request-consultation textarea,
    .request-consultation button {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Generic .projects-filter alias */
    .projects-filter {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .projects-filter button,
    .projects-filter .filter-btn {
        width: 100% !important;
        padding: 0.9rem 1rem !important;
        font-size: 1rem !important;
        min-height: 48px !important;
        white-space: normal !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Pricing page quote form overrides */
    #quote-form .split-wrapper {
        gap: 1.5rem !important;
    }

    /* -- PAGE HERO BANNER (projects, pricing, etc.) -- */
    .page-hero-banner {
        min-height: 220px;
        padding: 3rem 0;
    }

    .page-hero-title {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
        word-break: break-word;
        line-height: 1.15;
    }

    /* -- CTA SECTIONS (projects bottom CTA, etc.) -- */
    div.flex.gap-md {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    div.flex.gap-md .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* -- FLOATING ACTION BUTTONS -- */
    .floating-actions-bar {
        bottom: 16px;
        right: 16px;
    }

    .float-action-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* -- FOOTER -- */
    .footer-premium {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    .footer-column {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-brand-link {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .footer-social-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .footer-social-link {
        flex-shrink: 0 !important;
    }

    .footer-links-list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .footer-links-list li {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-links-list a {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .footer-contact-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .footer-contact-item span {
        width: 100% !important;
        word-break: break-word !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 0.75rem;
        text-align: center;
        width: 100% !important;
    }

    .footer-bottom p {
        width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* -- FAQ ACCORDION -- */
    .faq-accordion-container {
        max-width: 100% !important;
    }

    .faq-accordion-header {
        padding: 1.25rem 1.5rem !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .faq-accordion-content {
        padding: 0 1.5rem !important;
    }

    .faq-accordion-content p {
        padding-bottom: 1.25rem !important;
    }

    .faq-question-text {
        flex: 1 !important;
        padding-right: 1rem !important;
    }

    .faq-icon-toggle {
        flex-shrink: 0 !important;
        pointer-events: none !important;
    }

    /* -- PROCESS TIMELINE -- */
    .process-timeline-row {
        flex-direction: column;
        gap: 2rem;
    }

    .process-line-connector {
        display: none;
    }

    .process-step-node {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 0;
    }

    .process-step-number {
        width: 56px;
        height: 56px;
        font-size: 1.2rem;
        flex-shrink: 0;
        margin-bottom: 0;
        margin-right: 1.25rem;
    }

    .process-step-title {
        font-size: 1.1rem;
        margin-top: 0.35rem;
    }
}

/* -----------------------------------------------------------
   SMALL PHONES (<= 576px) - Extra precision fixes
   ----------------------------------------------------------- */
@media screen and (max-width: 576px) {

    .container {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    .section {
        padding: 2.75rem 0;
    }

    .hero-section-slider {
        height: 75vh;
        min-height: 480px;
    }

    .hero-slider-content .hero-heading {
        font-size: clamp(1.6rem, 8vw, 2.5rem);
    }

    .stats-grid-row {
        gap: 1.25rem 0.25rem !important;
    }

    .stat-box-container {
        font-size: 1.75rem !important;
        padding: 0.25rem 0.65rem !important;
        min-width: 60px !important;
    }

    .experience-giant-num { font-size: 3rem !important; }
    .experience-giant-label { font-size: 1.25rem !important; }

    .testimonial-card-premium {
        padding: 1.25rem 1rem;
    }

    .projects-journal-img-wrapper {
        height: 220px !important;
    }

    .portfolio-asymmetric-item.col-8,
    .portfolio-asymmetric-item.col-4,
    .portfolio-asymmetric-item.col-6 {
        height: 240px;
    }

    .philosophy-image-wrapper {
        min-height: 220px !important;
        height: 220px !important;
    }

    .overlap-image-container,
    .overlap-image-container-redesigned {
        height: auto !important;
        min-height: 200px !important;
    }

    .portfolio-tab-btn {
        padding: 0.8rem 0.85rem !important;
        font-size: 0.95rem !important;
    }

    .story-pillar-card {
        padding: 1.5rem 1.25rem;
    }

    .journal-detail-link {
        font-size: 0.9rem;
    }

    .page-hero-banner {
        min-height: 180px;
        padding: 2.5rem 0;
    }

    .footer-grid {
        gap: 1.75rem;
    }

    .floating-actions-bar {
        bottom: 12px;
        right: 12px;
    }
}

/* -----------------------------------------------------------
   EXTRA SMALL PHONES (<= 375px) - Micro adjustments only
   ----------------------------------------------------------- */
@media screen and (max-width: 375px) {

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hero-slider-content .hero-heading {
        font-size: clamp(1.4rem, 9vw, 2.25rem);
    }

    .hero-slider-content .hero-subtext {
        font-size: 0.875rem;
    }

    .section-editorial-title {
        font-size: clamp(1.25rem, 8vw, 2rem) !important;
    }

    .experience-giant-num { font-size: 2.75rem !important; }
    .experience-giant-label { font-size: 1.1rem !important; }

    .stat-box-container {
        font-size: 1.5rem !important;
        padding: 0.2rem 0.5rem !important;
        min-width: 55px !important;
    }

    .portfolio-tab-btn {
        font-size: 0.875rem !important;
        min-height: 44px !important;
    }

    .projects-journal-img-wrapper {
        height: 200px !important;
    }

    .philosophy-image-wrapper {
        min-height: 190px !important;
        height: 190px !important;
    }

    .metric-mini-val { font-size: 0.9rem !important; }
    .metric-mini-label { font-size: 0.7rem; }

    .footer-bottom { font-size: 0.8rem; }

    .founder-quote-text { font-size: 0.9rem !important; }
}