/*
Theme Name: Trekking Trials
Theme URI: https://trekkingtrials.com
Author: Trekking Trials Team
Author URI: https://trekkingtrials.com
Description: A modern, high-performance, mobile-first WordPress theme built for Nepal trekking guides, featuring ACF integration, RankMath support, interactive maps, and liquid-glass aesthetics.
Version: 1.2.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: trekkingtrials
*/


/* Reset and CSS variables */
:root {
    --primary-color: #0d6efd;
    --secondary-color: #198754;
    --dark-color: #212529;
    --light-color: #f8f9fa;
    --accent-color: #ffc107;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--dark-color);
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

/* Responsive CSS Grid Mosaic Gallery */
#gallery-mosaic-grid {
    --grid-cols: 2;
    --grid-gap: 0.5rem;

    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    gap: var(--grid-gap);
    position: relative;
    width: 100%;
}

.mosaic-item-1,
.mosaic-item-2,
.mosaic-item-3,
.mosaic-item-4,
.mosaic-item-5,
.mosaic-item-6 {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
    #gallery-mosaic-grid {
        --grid-cols: 3;
        --grid-rows: 3;
        --grid-height: 550px;
        --grid-gap: 0.75rem;

        grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
        height: var(--grid-height);
        contain: size;
    }

    .mosaic-item-1,
    .mosaic-item-2,
    .mosaic-item-3,
    .mosaic-item-4,
    .mosaic-item-5 {
        aspect-ratio: auto;
        border-radius: 0;
    }

    .mosaic-item-1 {
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
    }

    .mosaic-item-2 {
        grid-column: 2 / span 2;
        grid-row: 1 / span 1;
    }

    .mosaic-item-3 {
        grid-column: 2 / span 1;
        grid-row: 2 / span 2;
    }

    .mosaic-item-4 {
        grid-column: 3 / span 1;
        grid-row: 2 / span 2;
    }

    .mosaic-item-5 {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
    }

    .mosaic-item-6 {
        position: absolute;
        width: 9rem;
        height: 9rem;
        aspect-ratio: 1 / 1;
        left: 66.666%;
        top: 33.333%;
        transform: translate(-50%, -50%);
        z-index: 20;
        border-radius: 9999px;
        border: 4px solid #0f172a;
        margin: 0;
    }
}

@media (min-width: 1024px) {
    #gallery-mosaic-grid {
        --grid-height: 650px;
    }

    .mosaic-item-6 {
        width: 11rem;
        height: 11rem;
    }
}