/* ============================================
   Pacific Lumber & Truss - Responsive Styles
   Breakpoints: 1024px (tablet), 767px (mobile)
   ============================================ */

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
    body { font-size: 18px; line-height: 1.3em; }
    h1 { font-size: 34px; line-height: 1.3em; }
    h2 { font-size: 30px; line-height: 1.3em; }
    h3 { font-size: 28px; line-height: 1.3em; }
    h4 { font-size: 24px; line-height: 1.3em; }
    h5 { font-size: 22px; line-height: 1.3em; }
    h6 { font-size: 18px; line-height: 1.3em; }

    :root { --container-max-width: 1024px; }

    .hero-slideshow .hero-content h1,
    .hero-content h1 { font-size: 40px; }
    .page-header h1 { font-size: 38px; }

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

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

    .team-up-layout { grid-template-columns: 1fr; }
    .product-card-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-form-map { grid-template-columns: 1fr; }
    .timeline-entry { grid-template-columns: 1fr 60px 1fr; gap: 15px; }
    .timeline-entry-number span { font-size: 28px; }
    .page-header { padding-top: 120px; }

    /* Shrink decorative header shapes on tablet */
    .page-header .shape-bottom-left { width: 180px; }
    .page-header .shape-top-right { width: 70px; }

    .footer-top { grid-template-columns: 1fr 1fr; }

    .section { padding: 60px 0; }

    .site-header { padding: 10px 20px 0; }
    .header-inner { padding: 8px 15px; }

    /* Show mobile menu toggle on tablet */
    .mobile-menu-toggle { display: block; }
    .site-nav .nav-menu { display: none; }
    .site-nav .nav-menu.active { display: block; }

    /* Mobile navigation */
    .site-nav {
        position: relative;
    }

    .nav-menu.active {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--color-white);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border-radius: 4px;
        min-width: 250px;
        z-index: 999;
    }

    .nav-menu.active ul {
        flex-direction: column;
    }

    .nav-menu.active ul li a {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
    }

    .nav-menu.active .dropdown {
        position: static;
        box-shadow: none;
        border-radius: 0;
    }

    .nav-menu.active .dropdown li a {
        padding-left: 40px;
    }

    /* Remove nav underline on mobile */
    .site-nav ul li a::after {
        display: none;
    }

    .has-dropdown > a .dropdown-arrow {
        display: inline;
    }

    /* Timeline stacked */
    .timeline::before { left: 20px; }
    .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
    }
    .timeline-item:nth-child(even) {
        margin-left: 0;
        padding-left: 50px;
    }
    .timeline-item::after,
    .timeline-item:nth-child(even)::after {
        left: 12px;
        right: auto;
    }
}

/* --- Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
    h1 { font-size: 28px; line-height: 1.3em; }
    h2 { font-size: 26px; line-height: 1.3em; }
    h3 { font-size: 24px; line-height: 1.3em; }
    h4 { font-size: 22px; line-height: 1.3em; }
    h5 { font-size: 20px; line-height: 1.3em; }
    h6 { font-size: 16px; line-height: 1.3em; }

    :root { --container-max-width: 100%; }

    .hero-slideshow,
    .hero { min-height: 70vh; }
    .hero-slideshow .hero-content h1,
    .hero-content h1 { font-size: 30px; }
    .hero-slideshow .hero-content p,
    .hero-content p { font-size: 16px; }

    .service-grid { grid-template-columns: 1fr; }
    .delivery-area { padding: 25px; }
    .product-card-grid { grid-template-columns: 1fr; }
    .counter-section .grid-3 { grid-template-columns: 1fr; }
    .timeline-entry { grid-template-columns: 1fr; gap: 15px; }
    .timeline-entry-number { position: static; }
    .timeline-entry-number span { font-size: 22px; }
    .page-header { padding-top: 100px; }

    .page-header { padding: 40px 0; }
    .page-header h1 { font-size: 30px; }

    /* Shrink decorative header shapes on mobile */
    .page-header .shape-bottom-left { width: 120px; }
    .page-header .shape-top-right { width: 50px; }

    .section { padding: var(--section-padding-mobile); }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Gallery mobile - override justified JS, stack 2-up */
    .gallery-item {
        width: calc(50% - 3px) !important;
        height: 150px !important;
        flex-grow: 1 !important;
    }

    /* Counter mobile */
    .counter-number { font-size: 36px; }

    /* Cards mobile */
    .card-img { height: 180px; }

    /* CTA mobile */
    .cta-section { padding: 40px 0; }
    .cta-section h2 { font-size: 24px; }

    /* Two-column to single column */
    .flex-tablet-col {
        flex-direction: column;
    }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
    .gallery-item {
        width: 100% !important;
        height: 200px !important;
    }

    .hero-slideshow .hero-content h1,
    .hero-content h1 { font-size: 26px; }

    /* Shrink decorative header shapes on small mobile */
    .page-header .shape-bottom-left { width: 80px; }
    .page-header .shape-top-right { width: 35px; }

    .btn { padding: 10px 20px; font-size: 14px; }

    .site-header { padding: 8px 10px 0; }
    .header-inner { padding: 6px 10px; border-radius: 10px; }
    .site-logo img { max-height: 45px; }
}