/* Responsive Styles - Mobile-first media queries */

/* ========================================
   TABLET (768px and up)
   ======================================== */

@media (min-width: 768px) {

    /* Header layout */
    header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Typography */
    h2 {
        font-size: var(--font-size-4xl);
    }

    /* Project card - stay single column on tablet */
    .project-card-inner {
        grid-template-columns: 1fr;
    }

    /* Project images - still single column grid on tablet */
    .project-images {
        grid-template-columns: 1fr;
    }

    /* Contact page - side by side layout */
    .contact-profile-section {
        flex-direction: row;
        gap: var(--spacing-xl);
        align-items: flex-start;
    }

    .contact-profile-image {
        max-width: 350px;
        flex-shrink: 0;
    }

    .contact-details {
        padding-top: var(--spacing-3xl)
    }

    /* Slider images max-width */
    .slider-image {
        max-width: 70%;
    }

    /* Slider controls - larger on bigger screens */
    .slider-prev,
    .slider-next {
        padding: var(--spacing-lg);
    }

    .slider-prev {
        left: var(--spacing-4xl);
    }

    .slider-next {
        right: var(--spacing-4xl);
    }
}


/* ========================================
   DESKTOP (1024px and up)
   ======================================== */

@media (min-width: 1024px) {

    /* Increase base font size slightly */
    html {
        font-size: 18px;
    }

    /* Typography */
    h2 {
        font-size: var(--font-size-5xl);
    }

    /* Project card - two-column layout: text left, images right */
    .project-card-inner {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: var(--spacing-lg);
    }

    .project-header {
        grid-column: 1;
        order: unset;
        padding: var(--spacing-3xl) var(--spacing-sm) 0 var(--spacing-sm);
    }

    .project-images {
        grid-column: 2;
        order: unset;
        display: grid;
        grid-template-columns: repeat(4, auto) 1fr;
        /* Up to 4 auto columns + 1fr for empty space on the right */
        grid-template-rows: auto 200px;
        /* Row 1: auto for main image, Row 2: fixed 200px */
        gap: var(--spacing-sm);
        align-items: center;
    }

    /* First image spans all columns, row 1 */
    .project-images .project-image-wrapper:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Second and third images - row 2, fixed 200px height */
    .project-images .project-image-wrapper:nth-child(2),
    .project-images .project-image-wrapper:nth-child(3) {
        grid-row: 2;
        height: 200px;
        width: auto;
        display: block;
    }

    .project-images .project-image-wrapper:nth-child(2) .project-image,
    .project-images .project-image-wrapper:nth-child(3) .project-image {
        height: 200px;
        width: auto;
        object-fit: cover;
    }

    /* Circular plus icon on desktop - 60px circle, centered in 200px row */
    .project-plus-icon-wrapper {
        grid-row: 2;
        align-self: center;
        aspect-ratio: unset;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
    }

    /* Count displayed inside circle */
    .project-plus-count {
        font-size: var(--font-size-md);
        /* Adjust size for circular container */
    }

    /* Single image - collapse the second row */
    .project-images:has(.project-image-wrapper:only-child) {
        grid-template-rows: auto;
    }

    /* Larger spacing for desktop */
    main {
        padding: var(--spacing-3xl) 0;
    }
}


/* ========================================
   LARGE DESKTOP (1280px and up)
   ======================================== */

@media (min-width: 1280px) {

    /* Larger container padding */
    .container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    /* More grid gap on very large screens */
    .project-grid {
        gap: var(--spacing-3xl);
    }
}


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

@media print {

    /* Hide navigation and interactive elements */
    nav,
    .slider-overlay,
    .skip-link {
        display: none !important;
    }

    /* Remove backgrounds and borders for cleaner print */
    body {
        background: white;
        color: black;
    }

    header,
    footer {
        border: none;
        background: white;
    }

    /* Ensure links show their URLs */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: var(--font-size-sm);
    }

    /* Avoid page breaks inside elements */
    .project-card,
    .contact-info,
    .contact-hours {
        page-break-inside: avoid;
    }

    /* Remove shadows and fancy styling */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
}


/* ========================================
   REDUCED MOTION (Accessibility)
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    /* Already handled in reset.css */
    /* This is here for any additional specific needs */
}


/* ========================================
   HIGH CONTRAST MODE (Accessibility)
   ======================================== */

@media (prefers-contrast: high) {
    :root {
        --color-border: #000000;
        --color-text-light: #000000;
    }

    .project-card {
        border-width: 2px;
    }

    nav a[aria-current="page"]::after {
        height: 3px;
    }
}


/* ========================================
   DARK MODE (Future consideration)
   Currently not implemented, but structure ready
   ======================================== */

@media (prefers-color-scheme: dark) {
    /*
    :root {
        --color-text: #e0e0e0;
        --color-background: #1a1a1a;
        --color-text: #e0e0e0;
        ... update other colors for dark mode
    }
    */
}


/* ========================================
   VERY SMALL SCREENS (max-width: 400px)
   ======================================== */

@media (max-width: 400px) {

    /* Reduce spacing on very small screens */
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    /* Smaller header */
    header h1 {
        font-size: var(--font-size-xl);
    }

    /* Smaller typography */
    h2 {
        font-size: var(--font-size-2xl);
    }

    /* Smaller nav gap */
    nav ul {
        gap: var(--spacing-sm);
    }

    /* Smaller slider controls */
    .slider-close {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-xl);
    }

    .slider-prev,
    .slider-next {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xl);
    }

    /* Reduce slider content padding */
    .slider-content {
        padding: var(--spacing-xl);
    }
}