/**
 * Mobile Optimization CSS
 * Phase 3: Standardized breakpoints, layout shift prevention, touch targets
 *
 * @package Custom_Fiorentini
 * @since 1.0.0
 */

/* ==========================================================================
   STANDARDIZED BREAKPOINTS
   Mobile: < 768px | Tablet: 768px-991px | Desktop: 992px+ | Large: 1200px+
   ========================================================================== */

/* ==========================================================================
   MOBILE-SPECIFIC OPTIMIZATIONS (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
    /* Hide video on mobile, show fallback image */
    .pf-hero__video {
        display: none !important;
    }

    .pf-hero__fallback {
        display: block !important;
        background-image: url('../images/hero-poster.jpg?v=3') !important;
        background-size: cover;
        background-position: center;
    }

    /* Larger text for readability */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Stack grids vertically */
    .pf-areas__grid,
    .pf-about__grid,
    .pf-news__grid,
    .pf-contact-info__grid,
    .pf-contact-main__grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Reduce section padding */
    .pf-intro,
    .pf-areas,
    .pf-about,
    .pf-news,
    .pf-contact-info,
    .pf-contact-main {
        padding: 40px 0;
    }

    /* Hero section mobile */
    .pf-hero__title {
        font-size: 28px;
        line-height: 1.3;
    }

    .pf-hero__btn {
        padding: 14px 24px;
        font-size: 14px;
    }

    /* Page headers */
    .page-header {
        min-height: 300px;
        padding: 120px 0 60px;
    }

    .page-header__title {
        font-size: 32px;
    }

    .page-header__subtitle {
        font-size: 16px;
    }

    /* Contact form full width */
    .pf-form__row {
        flex-direction: column;
    }

    .pf-form__group {
        width: 100%;
    }

    /* Product cards - full width on mobile */
    .pf-products-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile menu improvements */
    .pf-header__mobile {
        padding: 20px;
    }

    .pf-header__mobile-menu li a {
        padding: 16px 20px;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Footer stacking */
    .pf-footer__grid {
        flex-direction: column;
        gap: 30px;
    }

    /* Breadcrumb wrapping */
    .breadcrumb,
    .pf-product-page-breadcrumb__list {
        flex-wrap: wrap;
        font-size: 13px;
    }

    /* Product specs table scrolling */
    .pf-product-specs__grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch-friendly targets on mobile only */
    .pf-header__menu li a,
    .pf-header__mobile-menu li a {
        min-height: 44px;
        padding: 14px 16px;
    }

    .pf-footer__links a {
        padding: 14px 16px;
    }

    .pf-sidebar-filter__checkbox label {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 0;
    }

    .pf-form__group--checkbox label {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }
}

/* ==========================================================================
   TABLET OPTIMIZATIONS (768px - 991px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    /* Two column grids */
    .pf-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    /* Adjust hero */
    .pf-hero__title {
        font-size: 36px;
    }

    /* Page header */
    .page-header__title {
        font-size: 42px;
    }
}

/* ==========================================================================
   DESKTOP OPTIMIZATIONS (992px+)
   ========================================================================== */

@media (min-width: 992px) {
    /* Three column grids */
    .pf-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* Hero section */
    .pf-hero__title {
        font-size: 48px;
    }
}

/* ==========================================================================
   LARGE SCREEN OPTIMIZATIONS (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
    /* Four column product grids */
    .pf-products-grid--four {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Five column areas grid */
    .pf-areas__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Focus visible styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--pf-primary, #008c76);
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pf-btn,
    .btn {
        border-width: 2px;
    }

    a {
        text-decoration: underline;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .pf-header,
    .pf-footer,
    .pf-hero__video,
    .pf-footer__top,
    .pf-header__toggle {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .pf-container {
        max-width: 100%;
        padding: 0;
    }
}