/*
 * FLUID3 — Responsive moderno de 3 pilares
 * Tema hijo: zakra-child · Proyecto: Summit Residential Solutions LLC
 * ------------------------------------------------------------------
 * Capa Fluid3: ANADIDOS y SOBRESCRITURAS que modernizan la tecnica responsive.
 * El CSS del tema padre (zakra) es la base y NO se edita.
 * Pilares: P1 fluidos · P2 container queries · P3 grid auto-ajustable.
 *
 * Criterio de aplicacion (guia de onboarding, §12.3): NO se reescribe el CSS
 * del tema heredado de golpe. Esta capa aporta (a) las variables y utilidades
 * Fluid3 para los componentes que construyamos y (b) el bloque de tipografia
 * fluida global, DESACTIVADO por defecto hasta que el diseno sea el definitivo.
 *
 * Fuente: adaptado del Fluid3 de apptek.solutions (2026-09-13).
 * Fecha: 2026-09-20.
 * ------------------------------------------------------------------
 */

/* ============================================================
 * P1 — Escala fluida (variables, sin efecto visual por si sola)
 * ============================================================ */
:root {
    --fluid3-space:  clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
    --fluid3-gap:    clamp(1rem, 0.75rem + 1vw, 2rem);
    --fluid3-radius: clamp(0.25rem, 0.2rem + 0.3vw, 0.5rem);
    --fluid3-section: clamp(2rem, 1.25rem + 3vw, 5rem);
}

/* ============================================================
 * P1 — Utilidades fluidas para nuestros componentes
 * ============================================================ */
.fluid3-section { padding-block: var(--fluid3-section); }
.fluid3-pad     { padding: var(--fluid3-space); }
.fluid3-gap     { gap: var(--fluid3-gap); }

/* Escalones tipograficos fluidos reutilizables (los usa quien los necesite) */
.fluid3-text-sm { font-size: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); }
.fluid3-text-md { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }
.fluid3-text-lg { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); }
.fluid3-text-xl { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem); }

/* ============================================================
 * P2 — Container queries: helpers para tarjetas reutilizables
 * El componente se adapta al ancho de SU CONTENEDOR, no de la pantalla,
 * asi el mismo bloque sirve en barra lateral y a ancho completo.
 * ============================================================ */
.fluid3-container { container-type: inline-size; container-name: fluid3card; }

.fluid3-card { display: block; }

@container fluid3card (min-width: 28rem) {
    .fluid3-card--row { display: flex; flex-direction: row; align-items: center; gap: var(--fluid3-gap); }
}

@container fluid3card (min-width: 40rem) {
    .fluid3-card--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--fluid3-gap); }
}

/* ============================================================
 * P3 — Grid auto-ajustable: la rejilla decide sus columnas sola
 * ============================================================ */
.fluid3-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--fluid3-gap);
}
.fluid3-grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.fluid3-grid--wide  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* ============================================================
 * FTH (Fluid Text Height) — nunca alturas fijas en contenedores de texto.
 * Una altura fija que encaja en ingles se desborda al traducir. Helper:
 * ============================================================ */
.fluid3-fth { height: auto; min-height: 0; padding-block: var(--fluid3-space); }

/* ============================================================
 * P1 — Tipografia fluida GLOBAL  ·  DESACTIVADO A PROPOSITO
 * ------------------------------------------------------------------
 * El tema padre zakra fija sus propios tamanos. Aplicar clamp() aqui
 * cambiaria el diseno heredado del demo, y la guia pide no reescribir el
 * CSS del tema de golpe. ACTIVAR cuando el diseno sea el definitivo
 * (basta con descomentar el bloque):
 *
 * h1, .h1 { font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem); }
 * h2, .h2 { font-size: clamp(1.625rem, 1.25rem + 0.9vw, 2.25rem); }
 * h3, .h3 { font-size: clamp(1.5rem, 1.2rem + 0.7vw, 2rem); }
 * h4, .h4 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem); }
 * h5, .h5 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); }
 * h6, .h6 { font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem); }
 *
 * Titulos de Elementor (contenido que si es nuestro):
 * .elementor-widget-heading .elementor-heading-title { font-size: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) !important; }
 * ============================================================ */