/* Responsive rules for ForrestJordan.art
   Mobile-first approach with progressive enhancement */

/* Small phones (320px and up) */
@media screen and (min-width: 320px) {
    /* Base layout */
    body {
        font-size: 14px;
        background: #f7f7f7 !important;
        color: #222 !important;
    }

    .main-content {
        padding: 8px 4px;
        margin: 16px auto;
        width: 98%;
        max-width: none;
        border-radius: 8px;
        background: #fff !important;
        color: #222 !important;
    }

    /* Navigation */
    header {
        padding: 16px 0 8px 0;
        background: #fff !important;
        color: #222 !important;
    }

    nav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 6px;
        padding: 0 8px;
        margin-bottom: 8px;
        row-gap: 8px;
    }

    nav::-webkit-scrollbar {
        display: none;
    }

    nav a {
        font-size: 0.85rem;
        padding: 4px 6px;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: auto;
        color: #333 !important;
        background: transparent !important;
        border-radius: 4px;
        text-align: center;
        flex: 0 0 auto;
    }

    nav a:hover, nav a.active {
        background: #e0e0e0 !important;
        color: #333 !important;
    }

    /* Remove special centering for small screens - let it wrap naturally */
    nav a:first-child {
        margin-left: 0;
        margin-right: 0;
    }

    /* Carousel and Images */
    .carousel-section {
        margin: 16px auto;
        max-width: 95%;
    }

    .carousel-multi {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .carousel-img-large {
        width: 100% !important;
        max-width: 95vw !important;
        height: auto !important;
        min-height: 180px;
        max-height: 40vh;
        border-radius: 8px;
        object-fit: contain;
    }

    .carousel-thumbs-row {
        gap: 8px;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .thumbs-inner {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 4px;
    }

    .thumbs-inner::-webkit-scrollbar {
        display: none;
    }

    .thumbnail {
        width: 140px;
        height: 90px;
        flex-shrink: 0;
        object-fit: cover;
    }

    /* Carousel thumbnails should maintain aspect ratio, not be cropped */
    .thumbs-inner .thumbnail,
    .carousel-thumbs-row .thumbnail {
        width: 140px !important;
        height: 90px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
    }

    .carousel-btn {
        min-width: 32px;
        width: 32px;
        height: 32px;
        padding: 0;
        font-size: 1.1rem;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Content Sections */
    .author-blurb {
        font-size: 1rem;
        padding: 0 12px;
        margin-bottom: 20px;
    }

    .about-section {
        flex-direction: column;
        gap: 16px;
        padding: 16px 12px;
        text-align: center;
    }

    .about-img {
        width: 100px;
        height: 100px;
    }

    .about-text {
        font-size: 0.95rem;
    }

    .about-text h2 {
        font-size: 1.2rem;
    }

    /* Gallery Grid */
    .gallery-grid {
        gap: 8px;
        padding: 0 4px;
    }

    /* Force 2-column grid layout on mobile with full images */
    .grid-4x5 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 8px !important;
    }

    .grid-4x5 .thumbnail {
        width: 100% !important;
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        object-fit: contain !important;
        background: #f8f8f8 !important;
        border-radius: 8px !important;
    }

    .grid-item {
        background: #fff;
        border-radius: 12px;
        padding: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: all 0.2s ease;
        border: 1px solid #f0f0f0;
        margin-bottom: 8px;
    }

    .grid-item:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        transform: translateY(-2px);
        border-color: #e0e0e0;
    }

    .gallery-info-bubble {
        margin: 1em auto !important;
        padding: 12px !important;
        font-size: 0.9em !important;
        border-radius: 8px !important;
        width: 90% !important;
    }

    /* Modal */
    .modal-content {
        padding: 0 8px;
    }

    .modal-content img {
        max-width: 98%;
        max-height: 70vh;
        border-radius: 8px;
    }

    /* QR Code */
    .qrcode-wrap {
        margin-top: 20px;
    }
    .qrcode-img {
        width: 120px;
        height: 120px;
        max-width: 120px;
        max-height: 120px;
    }

    /* Footer */
    .site-footer {
        margin-top: 32px;
        padding: 16px 8px 12px;
        font-size: 0.9rem;
    }
}

/* Extra small phones (up to 420px) - maintain 2-column grid */
@media screen and (max-width: 420px) {
    /* Navigation improvements for very small screens */
    nav {
        justify-content: center !important;
        padding: 0 4px !important;
        gap: 4px !important;
        row-gap: 6px !important;
    }
    
    nav a {
        font-size: 0.8rem !important;
        padding: 3px 5px !important;
        flex: 0 0 auto !important;
        min-width: 45px !important;
    }
    
    /* Keep 2-column grid for very small screens with cropped images */
    .grid-4x5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .grid-4x5 .thumbnail {
        width: 100% !important;
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
        object-fit: contain !important;
        background: #f8f8f8 !important;
        border-radius: 6px !important;
    }
}

/* Medium phones and small tablets (480px and up) */
@media screen and (min-width: 480px) {
    body {
        font-size: 15px;
    }

    .main-content {
        padding: 12px 8px;
    }

    nav {
        gap: 12px;
        justify-content: center;
    }

    /* Remove special Home button centering for larger screens */
    nav a:first-child {
        margin-left: 0;
        margin-right: 0;
    }

    nav a {
        font-size: 1rem;
    }

    .thumbnail {
        width: calc(33.33% - 8px);
    }

    /* Ensure carousel thumbnails maintain proper size on medium screens */
    .thumbs-inner .thumbnail,
    .carousel-thumbs-row .thumbnail {
        width: 160px !important;
        height: 100px !important;
        object-fit: contain !important;
    }

    .about-img {
        width: 120px;
        height: 120px;
    }

    /* Revert to standard grid layout for larger screens with cropped images */
    .grid-4x5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    .grid-4x5 .thumbnail {
        width: 100% !important;
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        background: #f8f8f8 !important;
        border-radius: 8px !important;
    }
}

/* Large phones and tablets (768px and up) */
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }

    .main-content {
        padding: 24px 16px;
        max-width: 90%;
    }

    nav {
        gap: 20px;
        justify-content: center;
    }

    /* Remove special Home button centering for tablets */
    nav a:first-child {
        margin-left: 0;
        margin-right: 0;
    }
}

    .carousel-multi {
        flex-direction: row !important;
    }

    .carousel-multi > div {
        flex: 1 !important;
        max-width: 48% !important;
    }

    .thumbnail {
        width: calc(25% - 12px);
    }

    /* Ensure carousel thumbnails maintain proper size on tablet screens */
    .thumbs-inner .thumbnail,
    .carousel-thumbs-row .thumbnail {
        width: 180px !important;
        height: 120px !important;
        object-fit: contain !important;
    }

    .about-section {
        flex-direction: row;
        text-align: left;
        padding: 24px;
    }

    .about-img {
        width: 140px;
        height: 140px;
    }

    .gallery-info-bubble {
        width: 80% !important;
        font-size: 1em !important;
    }

    /* Tablet gallery grid - 4 columns with cropped images */
    .grid-4x5 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }

    .grid-4x5 .thumbnail {
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        object-fit: cover !important;
        background: #f8f8f8 !important;
        border-radius: 10px !important;
    }
}

/* Desktop (1024px and up) */
@media screen and (min-width: 1024px) {
    .main-content {
        max-width: 900px;
        padding: 32px 24px;
    }

    nav {
        gap: 32px;
        justify-content: center;
    }

    .carousel-multi > div {
        max-width: 45% !important;
    }

    .thumbnail {
        width: calc(20% - 16px);
    }

    /* Ensure carousel thumbnails maintain proper size on desktop screens */
    .thumbs-inner .thumbnail,
    .carousel-thumbs-row .thumbnail {
        width: 200px !important;
        height: 130px !important;
        object-fit: contain !important;
    }

    .modal-content img {
        max-height: 80vh;
    }

    /* Desktop gallery grid - maintain 4 columns with full images for PC */
    .grid-4x5 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }

    .grid-4x5 .thumbnail {
        width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
        object-fit: contain !important;
        background: #f8f8f8 !important;
        border-radius: 12px !important;
    }
}

/* Large Desktop (1200px and up) */
@media screen and (min-width: 1200px) {
    .main-content {
        max-width: 1100px;
    }

    /* Fix homepage title images excessive spacing on large desktops */
    .carousel-multi {
        gap: 2rem !important;
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .carousel-multi > div {
        max-width: 42% !important;
    }

    .gallery-grid {
        gap: 20px;
    }
}

/* iPad specific orientation handling - Only for actual iPads with touch capability */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    /* iPad Portrait - show cropped images like desktop */
    @media (orientation: portrait) {
        .grid-4x5 {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 16px !important;
        }
        
        .grid-4x5 .thumbnail {
            height: 200px !important;
            min-height: 200px !important;
            max-height: 200px !important;
            object-fit: cover !important; /* Use cropped images on iPad */
            background: #f8f8f8;
            border-radius: 10px !important;
        }
    }
    
    /* iPad Landscape - use cropped images */
    @media (orientation: landscape) {
        .grid-4x5 {
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 16px !important;
        }
        
        .grid-4x5 .thumbnail {
            height: 180px !important;
            min-height: 180px !important;
            max-height: 180px !important;
            object-fit: cover !important; /* Use cropped images on iPad */
            background: #f8f8f8 !important;
            border-radius: 10px !important;
        }
    }
}

/* Extra Large Desktop (1440px and up) */
@media screen and (min-width: 1440px) {
    .main-content {
        max-width: 1300px;
    }

    /* Ensure homepage title images don't get too far apart on very large screens */
    .carousel-multi {
        gap: 2.5rem !important;
        max-width: 1000px !important;
    }

    .carousel-multi > div {
        max-width: 400px !important;
    }
}

/* Print styles */
@media print {
    .modal,
    .carousel-btn,
    nav {
        display: none !important;
    }

    .main-content {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: none;
        box-shadow: none;
    }

    img {
        page-break-inside: avoid;
    }
}

/* Special rules for homepage carousel on mobile devices */
@media (max-width: 700px) {
  .carousel-multi {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .carousel-multi > div {
    max-width: 90vw !important;
    width: 90% !important;
    text-align: center;
    overflow-x: hidden !important;
    margin: 8px 0 !important;
  }
  .carousel-img-large {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 120px;
    border-radius: 12px;
    margin: 0 auto;
    display: block;
  }
}

/* Desktop override rules - highest specificity for PC browsers */
@media screen and (min-width: 1025px), 
       screen and (min-width: 900px) and (pointer: fine) {
    .grid-4x5 .grid-item .thumbnail,
    .gallery-grid .grid-4x5 .thumbnail {
        object-fit: cover !important;
        background: #f8f8f8 !important;
    }
}

/* Additional fallback for any desktop browsers */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .grid-4x5 .thumbnail {
        object-fit: cover !important;
    }
}

/* Ultra-specific desktop rule to override all other mobile rules */
@media screen and (min-width: 1024px) {
    body .main-content .gallery-grid .grid-4x5 .grid-item img.thumbnail,
    body .main-content section.gallery-grid .grid-4x5 .grid-item img.thumbnail,
    body section.gallery-grid .grid-4x5 .grid-item .thumbnail,
    body .gallery-grid .grid-4x5 img.thumbnail {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
        background: #f8f8f8 !important;
        border-radius: 8px !important;
    }
}