/*
 * Roxty Framework — Layout CSS
 * Contenedores, grid, flex — sin framework externo
 * Mobile-first con min-width breakpoints
 *
 * Objetivo: < 4kb minificado
 */

/* ── BREAKPOINTS (para referencia en comentarios)
   xs:  < 480px   (mobile pequeño)
   sm:  480px+    (mobile grande)
   md:  768px+    (tablet)
   lg:  1024px+   (desktop pequeño)
   xl:  1200px+   (desktop)
   2xl: 1400px+   (desktop grande)
   ─────────────────────────────────────────────── */

/* ── CONTENEDOR PRINCIPAL ──────────────────────────────────────────────── */

.rxty-container {
    width: 100%;
    max-width: var(--rxty-container, 1200px);
    margin-inline: auto;
    padding-inline: 1rem;
    /* Contexto de container queries para grids hijos (Baseline 2023) */
    container-type: inline-size;
    container-name: rxty-c;
}

@media (min-width: 480px) {
    .rxty-container { padding-inline: 1.5rem; }
}

@media (min-width: 768px) {
    .rxty-container { padding-inline: 2rem; }
}

@media (min-width: 1200px) {
    .rxty-container { padding-inline: 2.5rem; }
}

.rxty-container-wide {
    max-width: var(--rxty-container-wide, 1400px);
}

.rxty-container-narrow {
    max-width: 800px;
}

.rxty-container-full {
    max-width: 100%;
    padding-inline: 0;
}

/* ── MAIN CONTENT ──────────────────────────────────────────────────────── */

.rxty-main {
    min-height: calc(100 * var(--rxty-vh, 1vh) - var(--rxty-header-height, 70px));
}

/* Páginas construidas con Elementor editor — sin restricción de ancho */
.rxty-main--elementor {
    min-height: 0;
    width: 100%;
}

/* ── GRID SYSTEM ───────────────────────────────────────────────────────── */

.rxty-grid {
    display: grid;
    gap: var(--rxty-gap, 1.5rem);
}

/* Columnas responsive automáticas */
.rxty-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Cada celda del grid es un contenedor para sus componentes hijos */
.rxty-grid > * {
    container-type: inline-size;
    container-name: rxty-card;
}

/* Columnas explícitas */
.rxty-grid-2  { grid-template-columns: 1fr; }
.rxty-grid-3  { grid-template-columns: 1fr; }
.rxty-grid-4  { grid-template-columns: 1fr; }

@media (min-width: 480px) {
    .rxty-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .rxty-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .rxty-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Container Queries — las columnas responden al CONTENEDOR, no al viewport.
   En navegadores sin soporte los @media de arriba sirven de fallback.
   Uso: <div class="rxty-container rxty-grid rxty-grid-3"> — si el contenedor
   es de 400px (ej. widget area), el grid se queda en 1 columna aunque el
   viewport sea 1400px. (Baseline 2023) */
@supports (container-type: inline-size) {
    .rxty-grid-2,
    .rxty-grid-3,
    .rxty-grid-4 { grid-template-columns: 1fr; }

    @container rxty-c (min-width: 480px) {
        .rxty-grid-2 { grid-template-columns: repeat(2, 1fr); }
    }

    @container rxty-c (min-width: 600px) {
        .rxty-grid-3 { grid-template-columns: repeat(3, 1fr); }
    }

    @container rxty-c (min-width: 800px) {
        .rxty-grid-4 { grid-template-columns: repeat(4, 1fr); }
    }
}

/* ── FLEXBOX UTILITIES ─────────────────────────────────────────────────── */

.rxty-flex        { display: flex; }
.rxty-flex-col    { display: flex; flex-direction: column; }
.rxty-flex-center { display: flex; align-items: center; justify-content: center; }
.rxty-flex-between { display: flex; align-items: center; justify-content: space-between; }
.rxty-flex-wrap   { flex-wrap: wrap; }
.rxty-gap         { gap: var(--rxty-gap, 1.5rem); }
.rxty-gap-sm      { gap: calc(var(--rxty-gap, 1.5rem) / 2); }
.rxty-gap-lg      { gap: var(--rxty-gap-lg, 2.5rem); }

/* ── SECCIONES ─────────────────────────────────────────────────────────── */

.rxty-section {
    padding-block: clamp(3rem, 8vw, 6rem);
    container-type: inline-size;
}

.rxty-section-sm {
    padding-block: clamp(2rem, 5vw, 3.5rem);
}

.rxty-section-lg {
    padding-block: clamp(4rem, 10vw, 8rem);
}

/* ── HERO ──────────────────────────────────────────────────────────────── */

.rxty-hero {
    min-height: calc(100 * var(--rxty-vh, 1vh));
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.rxty-hero-content {
    position: relative;
    z-index: 2;
}

.rxty-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── HEADER ────────────────────────────────────────────────────────────── */

.rxty-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: var(--rxty-header-height, 70px);
    display: flex;
    align-items: center;
    transition: height var(--rxty-transition), background-color var(--rxty-transition);
}

.rxty-header-scrolled .rxty-header {
    height: var(--rxty-header-height-scrolled, 56px);
}

/* ── FOOTER ────────────────────────────────────────────────────────────── */

.rxty-footer {
    padding-block: clamp(2rem, 5vw, 4rem);
}

/* ── VISIBILITY ────────────────────────────────────────────────────────── */

.rxty-hidden    { display: none !important; }
.rxty-visible   { display: block; }

/* Mobile only / Desktop only */
.rxty-mobile-only  { display: block; }
.rxty-desktop-only { display: none; }

@media (min-width: 768px) {
    .rxty-mobile-only  { display: none; }
    .rxty-desktop-only { display: block; }
}

/* ── POSITION ──────────────────────────────────────────────────────────── */

.rxty-relative { position: relative; }
.rxty-absolute { position: absolute; }
.rxty-sticky   { position: sticky; top: 0; }
.rxty-full-screen {
    width: 100%;
    min-height: calc(100 * var(--rxty-vh, 1vh));
}

/* ── CONTAINER QUERY UTILITY ───────────────────────────────────────────────── */

.rxty-cq {
    container-type: inline-size;
}

/* ── SUBGRID UTILITY (Baseline 2023) ───────────────────────────────────────── */

/* Convierte un grid item en un subgrid de 2 row tracks.
   Uso genérico: cualquier componente que necesite alinearse con el parent grid. */
@supports (grid-template-rows: subgrid) {
    .rxty-subgrid {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
}

/* ── Z-INDEX SCALE ─────────────────────────────────────────────────────── */
/* Para no conflictuar con Elementor (usa z-index 9999+) y GSB widget      */
/*
   rxty-header: 1000
   rxty-modal:  1001
   rxty-sticky: 1002
   (plugins Zufukx usan 9000+, GSB widget usa 9999)
*/