/*
 * FLUID3 — Responsive moderno de 3 pilares (apptek.solutions)
 * Tema hijo: digitek-child
 * ------------------------------------------------------------------
 * Capa Fluid3: AÑADIDOS/SOBRESCRITURAS que modernizan la técnica responsive
 * SIN cambiar el diseño visual. El CSS del tema padre (digitek) es la base
 * y NO se edita. Solo se usa P1 (fluidos), P2 (container queries) y P3
 * (grid auto-ajustable); ninguna feature experimental.
 *
 * Fuente: apptek.solutions · Fecha: 2026-09-13
 * ------------------------------------------------------------------
 */

/* ============================================================
 * P3 — Grid auto-ajustable (superficie: tema, vía tema hijo)
 * Sustituye columnas fijas por repeat(auto-fit, minmax(...)) para que el
 * número de columnas se adapte solo, sin media queries.
 * ============================================================ */

/* Related posts: era repeat(2, 49%). */
.related.posts .items-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Instagram widget: era repeat(3, 31.8333%). */
.digitek-instageram .instagram-wrap {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}

/* Portfolios list style-3: era repeat(3, 31.8333%). */
.digitek-portfolios-lists .digitek-widget-portfolios-list.style-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* ============================================================
 * P2 — Container queries (superficie: tarjetas de blog/related)
 * ============================================================ */

.blog-post-loop,
.related.posts .related-post {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 28rem) {
    .related.posts .related-post .entry-post {
        flex-direction: row;
    }
}

/* ============================================================
 * P1 — Espaciado fluido (superficie: tema, vía tema hijo)
 * ============================================================ */
:root {
    --fluid3-space: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
}

/* ============================================================
 * P1 — Tipografía fluida (superficie: tema, vía tema hijo)
 * Los headings escalan suavemente en lugar de usar tamaños fijos.
 * El valor de escritorio se conserva; en móvil se usa ~0.72x, y clamp()
 * interpola con el viewport (320px -> 1200px como referencia).
 * ============================================================ */
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); }

/* Título de página (breadcrumb heading): conserva 42/60/74px en escritorio. */
.title-size-small .title   { font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.625rem); }
.title-size-default .title { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); }
.title-size-large .title   { font-size: clamp(2.25rem, 1.5rem + 3vw, 4.625rem); }

/* Título del single post (32px fijo) -> fluido manteniendo 32px en desktop. */
.single-post-page .entry-title { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); }

/* ============================================================
 * P1 — Headings de Elementor (superficie: Elementor, vía tema hijo)
 * El widget "Heading" aplica su propio font-size con un selector más
 * específico (.elementor-widget-heading .elementor-heading-title) y usaría
 * un tamaño fijo. Se sobrescribe con clamp() para que el contenido nuevo
 * creado con Elementor también escale fluido. Se respeta el valor de
 * escritorio; el tope se limita al tamaño máximo razonable por nivel.
 * ============================================================ */
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] {
    font-size: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) !important;
}
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem) !important;
}
.elementor-widget-heading h3.elementor-heading-title {
    font-size: clamp(1.25rem, 1.1rem + 0.9vw, 2rem) !important;
}
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
    font-size: clamp(1rem, 0.95rem + 0.5vw, 1.5rem) !important;
}