/**
 * JM Eventos - Modern Responsive Design CSS
 * Latest responsive techniques and container queries
 */

/* ===== MODERN CONTAINER SYSTEM ===== */
.container-modern {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Fluid container with max-width constraints */
.container-fluid {
    width: min(100% - 2rem, 1400px);
    margin-inline: auto;
}

/* Container sizes using modern CSS */
.container-xs { max-width: 475px; }
.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1280px; }
.container-2xl { max-width: 1536px; }

/* ===== MODERN GRID SYSTEM ===== */
.grid-responsive {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* CSS Subgrid (when supported) */
@supports (grid-template-rows: subgrid) {
    .grid-subgrid {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
    }
}

/* Modern CSS Grid with intrinsic sizing */
.grid-intrinsic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: clamp(1rem, 4vw, 2rem);
}

/* ===== CONTAINER QUERIES (MODERN) ===== */
@container (min-width: 400px) {
    .card-modern {
        padding: var(--space-lg);
    }
    
    .btn-modern {
        padding: var(--space-md) var(--space-xl);
        font-size: 1.1rem;
    }
}

@container (min-width: 600px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@container (min-width: 800px) {
    .hero-content {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

/* ===== FLUID TYPOGRAPHY ===== */
:root {
    /* Fluid font sizes using clamp() */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
    --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);
    --text-6xl: clamp(3.75rem, 3rem + 3.75vw, 4.5rem);
    
    /* Fluid spacing */
    --space-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
    --space-fluid-md: clamp(1rem, 0.8rem + 1vw, 2rem);
    --space-fluid-lg: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
    --space-fluid-xl: clamp(2rem, 1.6rem + 2vw, 4rem);
    --space-fluid-2xl: clamp(3rem, 2.4rem + 3vw, 6rem);
}

/* Apply fluid typography */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

/* ===== MODERN LAYOUT PATTERNS ===== */

/* The Stack Layout */
.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack > * {
    margin-block: 0;
}

.stack > * + * {
    margin-block-start: var(--space-lg);
}

/* The Cluster Layout */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

/* The Sidebar Layout */
.sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.sidebar-layout > :first-child {
    flex-basis: 20rem;
    flex-grow: 1;
}

.sidebar-layout > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

/* The Switcher Layout */
.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.switcher > * {
    flex-grow: 1;
    flex-basis: calc((30rem - 100%) * 999);
}

/* The Cover Layout */
.cover {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    padding: var(--space-lg);
}

.cover > * {
    margin-block: var(--space-lg);
}

.cover > :first-child:not(.cover-centered) {
    margin-block-start: 0;
}

.cover > :last-child:not(.cover-centered) {
    margin-block-end: 0;
}

.cover > .cover-centered {
    margin-block: auto;
}

/* ===== RESPONSIVE IMAGES ===== */
.img-responsive {
    max-inline-size: 100%;
    block-size: auto;
    object-fit: cover;
}

.img-cover {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.img-contain {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

/* Art Direction with Picture element */
.picture-responsive {
    display: block;
    inline-size: 100%;
}

.picture-responsive img {
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
}

/* ===== RESPONSIVE COMPONENTS ===== */

/* Responsive Navigation */
.nav-responsive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-md);
    padding-inline: var(--space-lg);
}

@media (max-width: 768px) {
    .nav-responsive {
        flex-direction: column;
        gap: var(--space-md);
    }
}

/* Responsive Hero Section */
.hero-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
    min-block-size: 100vh;
    padding-inline: var(--space-lg);
}

@media (min-width: 768px) {
    .hero-responsive {
        grid-template-columns: 1fr 1fr;
    }
}

/* Responsive Cards Grid */
.cards-responsive {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Responsive Form */
.form-responsive {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .form-responsive {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.form-responsive .full-width {
    grid-column: 1 / -1;
}

/* ===== RESPONSIVE UTILITIES ===== */

/* Responsive Visibility */
.hidden-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }
}

.hidden-desktop {
    display: block;
}

@media (min-width: 768px) {
    .hidden-desktop {
        display: none;
    }
}

/* Responsive Text Alignment */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* Responsive Spacing */
.space-responsive {
    padding: var(--space-fluid-md);
}

.gap-responsive {
    gap: var(--space-fluid-md);
}

/* ===== ADVANCED RESPONSIVE PATTERNS ===== */

/* Quantity Queries */
.item:first-child:nth-last-child(n+4),
.item:first-child:nth-last-child(n+4) ~ .item {
    /* Styles when 4 or more items */
    flex-basis: calc(25% - var(--space-md));
}

.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
    /* Styles when exactly 3 items */
    flex-basis: calc(33.333% - var(--space-md));
}

.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item {
    /* Styles when exactly 2 items */
    flex-basis: calc(50% - var(--space-md));
}

.item:first-child:nth-last-child(1) {
    /* Styles when exactly 1 item */
    flex-basis: 100%;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Extra Small Devices */
@media (max-width: 475px) {
    .container-modern {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
    
    .text-4xl {
        font-size: var(--text-2xl);
    }
    
    .text-5xl {
        font-size: var(--text-3xl);
    }
    
    .text-6xl {
        font-size: var(--text-4xl);
    }
}

/* Small Devices */
@media (min-width: 476px) and (max-width: 640px) {
    .grid-responsive {
        grid-template-columns: 1fr 1fr;
    }
}

/* Medium Devices */
@media (min-width: 641px) and (max-width: 768px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Large Devices */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Extra Large Devices */
@media (min-width: 1025px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* ===== ASPECT RATIO (MODERN) ===== */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-photo { aspect-ratio: 4 / 3; }
.aspect-golden { aspect-ratio: 1.618 / 1; }

/* Fallback for older browsers */
@supports not (aspect-ratio: 1 / 1) {
    .aspect-square::before {
        content: '';
        display: block;
        padding-bottom: 100%;
    }
    
    .aspect-video::before {
        content: '';
        display: block;
        padding-bottom: 56.25%;
    }
    
    .aspect-photo::before {
        content: '';
        display: block;
        padding-bottom: 75%;
    }
}

/* ===== MODERN UNITS ===== */

/* Logical Properties */
.margin-inline { margin-inline: var(--space-md); }
.margin-block { margin-block: var(--space-md); }
.padding-inline { padding-inline: var(--space-md); }
.padding-block { padding-block: var(--space-md); }

/* Viewport Units */
.h-screen { block-size: 100vh; }
.h-screen-small { block-size: 100svh; } /* Small viewport */
.h-screen-large { block-size: 100lvh; } /* Large viewport */
.h-screen-dynamic { block-size: 100dvh; } /* Dynamic viewport */

/* Container Units */
.w-container { inline-size: 100cqw; }
.h-container { block-size: 100cqh; }

/* ===== RESPONSIVE ANIMATIONS ===== */
@media (prefers-reduced-motion: no-preference) {
    .animate-on-scroll {
        animation: fadeInUp 0.6s ease-out;
    }
    
    @media (min-width: 768px) {
        .animate-on-scroll {
            animation: slideInRight 0.8s ease-out;
        }
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .no-print {
        display: none !important;
    }
    
    .container-modern {
        max-width: none;
        padding: 0;
    }
    
    .grid-responsive {
        display: block;
    }
    
    .grid-responsive > * {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    /* Ensure links show URLs */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .card-modern {
        border: 2px solid currentColor;
    }
    
    .btn-modern {
        border: 2px solid currentColor;
        background: transparent;
        color: currentColor;
    }
    
    .glass,
    .glass-card {
        background: var(--white);
        backdrop-filter: none;
        border: 2px solid currentColor;
    }
}