/* 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: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 8px;
        padding: 0 16px;
        margin-bottom: 8px;
        scroll-behavior: smooth;
    }

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

    nav a {
        font-size: 0.95rem;
        padding: 6px 8px;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: auto;
        color: #333 !important;
        background: transparent !important;
    }

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

    /* Ensure Home button is always visible and properly centered for smaller screens */
    nav a:first-child {
        margin-left: calc(50vw - 60px);
        margin-right: 8px;
    }

    /* 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 cropped 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: cover !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) {
    /* 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: cover !important;
        border-radius: 6px !important;
    }

    /* Adjust navigation centering for very small screens */
    nav a:first-child {
        margin-left: calc(50vw - 50px);
    }
}

/* 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;
        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;
        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 cropped images */
    .grid-4x5 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }

    .grid-4x5 .thumbnail {
        width: 100% !important;
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
}

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

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

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

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

/* 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: 12px !important;
    align-items: center !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .carousel-multi > div {
    max-width: 100vw !important;
    width: 100% !important;
    text-align: center;
    overflow-x: hidden !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;
  }
}