/**
 * RM_A Theme Responsive Styles
 * Mobile-first approach following Bootstrap-like breakpoints
 *
 * Content width breakpoints per claude.md:
 * - Small (≥576px): 30px side margin, content width scales
 * - Medium (≥768px): 750px content width
 * - Large (≥992px): 970px content width
 * - Extra Large (≥1200px): 1170px content width
 * - Extra Extra Large (≥1600px): 1400px content width
 * - Ultra Wide (≥1920px): 1700px content width
 * - 4K / Large Desktop (≥2560px): 2000px content width
 */

/* ==========================================================================
   Base (Mobile First) - < 576px
   Single column, 30px side margin, content width scales
   ========================================================================== */

/* Override WordPress contentSize for responsive behavior */
:root {
    --rma-content-width: 100%;
    /* Gallery responsive defaults - smallest screens */
    --rma-gallery-columns: 2;
    --rma-gallery-gap-scale: 0.5;
}

/* Single column, 30px side margin */
.rma-project-grid {
    padding: 0;
}

.rma-project-item {
    width: calc(100% - var(--rma-grid-gap-h, 8px) * 2);
    margin-right: var(--rma-grid-gap-h, 8px);
    margin-bottom: var(--rma-grid-gap-v, 8px);
}

/* Base thumbnail styling - no width constraint, allows inline styles to work */
.rma-project-thumbnail {
    /* Width is controlled by inline style from backend (300-600px) */
    /* On mobile (<768px), this is overridden below */
}

/* Related projects uses same flexbox layout as homepage project grid.
   Gap values come from backend settings via inline CSS custom properties. */

/* ==========================================================================
   Small - >= 576px
   Single column, 30px side margin, content width scales
   ========================================================================== */

@media (min-width: 576px) {
    :root {
        /* Gallery: 2 columns, 60% gap scale */
        --rma-gallery-columns: 2;
        --rma-gallery-gap-scale: 0.6;
    }

    .rma-project-item {
        width: auto;
    }

    /* No thumbnail width override here - handled by max-width: 767px query below */
}

/* ==========================================================================
   Medium - >= 768px
   Content width fixed at 750px, side margin scales
   ========================================================================== */

@media (min-width: 768px) {
    :root {
        --rma-content-width: 750px;
        /* Gallery: 3 columns, 80% gap scale */
        --rma-gallery-columns: 3;
        --rma-gallery-gap-scale: 0.8;
    }

    /* Apply consistent content width to all constrained layout blocks
       This targets the inner content of header, main, and footer consistently */
    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: var(--rma-content-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Also apply to direct children of constrained blocks that have inner groups */
    .rma-header-inner,
    .rma-footer-inner,
    .rma-project-grid-container,
    .rma-project-single > .wp-block-group,
    .rma-page-content > .wp-block-post-title,
    .rma-page-content > .wp-block-post-content {
        max-width: var(--rma-content-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* Gallery and related projects columns controlled by CSS variable --rma-gallery-columns */
}

/* ==========================================================================
   Large - >= 992px
   Content width fixed at 970px
   ========================================================================== */

@media (min-width: 992px) {
    :root {
        --rma-content-width: 970px;
        /* Gallery: 4 columns, full gap values (100% = backend settings) */
        --rma-gallery-columns: 4;
        --rma-gallery-gap-scale: 1;
    }

    /* Gallery and related projects columns controlled by CSS variable --rma-gallery-columns */

    .rma-project-text-content {
        width: 70%;
    }
}

/* ==========================================================================
   Extra Large - >= 1200px
   Content width fixed at 1170px
   ========================================================================== */

@media (min-width: 1200px) {
    :root {
        --rma-content-width: 1170px;
    }

    .rma-project-text-content {
        width: 60%;
    }
}

/* ==========================================================================
   Extra Extra Large - >= 1600px
   Content width fixed at 1400px
   ========================================================================== */

@media (min-width: 1600px) {
    :root {
        --rma-content-width: 1400px;
    }

    .rma-project-text-content {
        width: 50%;
    }
}

/* ==========================================================================
   Ultra Wide - >= 1920px
   Content width fixed at 1700px
   ========================================================================== */

@media (min-width: 1920px) {
    :root {
        --rma-content-width: 1700px;
    }

    .rma-project-text-content {
        width: 45%;
    }
}

/* ==========================================================================
   4K / Large Desktop - >= 2260px
   Content width fixed at 2000px
   ========================================================================== */

@media (min-width: 2260px) {
    :root {
        --rma-content-width: 2000px;
    }

    .rma-project-text-content {
        width: 40%;
    }
}

/* ==========================================================================
   Touch Device Adjustments
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Show captions always on touch devices */
    .rma-image-caption {
        opacity: 1;
        background: rgba(255, 255, 255, 0.9);
    }

    /* Show video controls always on touch devices */
    .rma-video-controls {
        opacity: 1;
    }

    /* Larger touch targets */
    .rma-filter-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .rma-expand-toggle {
        width: 44px;
        height: 44px;
    }

    .rma-video-play-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   Header Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .rma-header {
        max-height: none;
    }

    /* Header height is now managed dynamically by JavaScript */

    /* Logo and language menu stay side by side on all screen sizes */
    .rma-header-top {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 15px;
    }

    .rma-logo img,
    .rma-site-logo img {
        width: 170px;
    }

    /* Shrink state for mobile */
    .rma-header.is-scrolled .rma-logo img,
    .rma-header.is-scrolled .rma-site-logo img {
        width: 102px; /* 60% of 170px */
    }

    /* Main menu: inherit gap from custom.css (8px 0), no override needed */
}

/* ==========================================================================
   Footer Responsive
   ========================================================================== */

@media (max-width: 576px) {
    .rma-footer-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .rma-nav-footer {
        justify-content: center;
    }
}

/* ==========================================================================
   Project Grid Responsive
   ========================================================================== */

/* Mobile (≤768px): Thumbnails and project items scale with window width, override backend setting */
@media (max-width: 768px) {
    .rma-project-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rma-project-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rma-project-thumbnail img,
    .rma-project-thumbnail video {
        width: 100%;
    }
}

/* Desktop (>768px): Inline styles from backend (300-600px) apply automatically
   because no !important rule overrides them */

/* ==========================================================================
   Project Page Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .rma-project-header-title,
    .rma-project-header-location {
        font-size: 18px;
    }

    .rma-project-header-data,
    .rma-project-text {
        font-size: 14px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .rma-header,
    .rma-footer,
    .rma-filter-menu,
    .rma-lightbox {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .rma-project-grid {
        display: block;
    }

    .rma-project-item {
        page-break-inside: avoid;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}