/* ==========================================================================
   MEDIOS CMS - COMPONENT: CARDS, FEEDS & RADIUS
   Comportamiento responsivo de tarjetas, liberación de textos y redondeo global
   ========================================================================== */

/* REGLA GLOBAL: Desactivar efecto zoom en fotos en hover */
.group:hover img, .group:hover .bg-cover, .group:hover [style*="background-image"],
a:hover img, a:hover .bg-cover, a:hover [style*="background-image"],
article:hover img, article:hover .bg-cover, article:hover [style*="background-image"],
.group:hover [class*="scale-"],
a:hover [class*="scale-"],
article:hover [class*="scale-"] {
    transform: none !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, filter, backdrop-filter !important;
}

/* Redondeo Global Dinámico (CMS Setting) */
img:where(:not(.rounded-full):not(.avatar):not([class*="logo-"])),
button.rounded-full,
a.rounded-full,
.btn-action,
.nav-pill,
.btn-radio-live,
.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-t-2xl,
.rounded-b-2xl,
.rounded-r-xl,
.rounded-l-xl,
.rounded-t-xl,
.rounded-b-xl,
.rounded-r-2xl,
.rounded-l-2xl,
.news-card,
.widget,
.card,
.banner,
figure,
.hero-main,
.hero-side-item,
.thumbnail,
.cms-radius {
    border-radius: var(--cms-radius, 16px) !important;
}

/* Media Inicial (Imagen o Video) sin redondeo en móvil / encolumnado (< 1024px) */
@media (max-width: 1023px) {
    #cms-main-article .cms-single-featured-media,
    #cms-main-article .cms-single-featured-media *,
    .cms-single-featured-media,
    .cms-single-featured-media figure,
    .cms-single-featured-media figure img,
    .cms-single-featured-media img,
    .cms-single-featured-media figcaption,
    .cms-single-featured-media .aspect-video,
    .cms-single-featured-media iframe {
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

/* Esquinas direccionales con soporte para radio dinámico */
.rounded-t-2xl, .rounded-t-xl { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-b-2xl, .rounded-b-xl { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rounded-l-2xl, .rounded-l-xl { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-r-2xl, .rounded-r-xl { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

@media (min-width: 768px) {
    .md\:rounded-l-2xl, .md\:rounded-l-xl { 
        border-top-left-radius: var(--cms-radius, 16px) !important;
        border-bottom-left-radius: var(--cms-radius, 16px) !important;
        border-top-right-radius: 0 !important; 
        border-bottom-right-radius: 0 !important; 
    }
    .md\:rounded-t-2xl, .md\:rounded-t-xl {
        border-top-left-radius: var(--cms-radius, 16px) !important;
        border-top-right-radius: var(--cms-radius, 16px) !important;
        border-bottom-left-radius: 0 !important; 
        border-bottom-right-radius: 0 !important; 
    }
    .md\:rounded-none { border-radius: 0 !important; }
}

/* ==========================================================================
   FORMATO MÓVIL: LIBERACIÓN TOTAL DE CARDS Y TEXTOS (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    /* 1. Liberar cards del feed en móvil */
    article:not(#cms-main-article):not([class*="h-\["]),
    .card,
    .news-card,
    .hero-side-item,
    .grid article:not([class*="h-\["]),
    aside article {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        align-self: auto !important;
    }

    /* Asegurar altura visible de la noticia destacada principal en móviles */
    [class*="hero-dynamic-grid-"] > article:first-child,
    [class*="hero-"] article[class*="h-\[420px\]"],
    [class*="hero-"] article.relative[class*="h-\["] {
        height: 420px !important;
        min-height: 380px !important;
        display: block !important;
        position: relative !important;
    }

    /* Layout horizontal de sub-destacadas */
    .hero-dynamic-grid-4 article a,
    [class*="hero-"] article a.flex,
    article a.flex {
        display: flex !important;
        flex-direction: row !important;
        height: 100% !important;
        width: 100% !important;
    }
    .hero-dynamic-grid-4 article a > div:first-child {
        min-width: 110px !important;
        min-height: 95px !important;
        align-self: stretch !important;
        flex-shrink: 0 !important;
    }

    /* 2. Liberar contenedores internos y de texto */
    article:not(#cms-main-article):not([class*="h-\["]) > div:not([class*="aspect-"]):not([class*="h-"]):not([class*="w-1/3"]):not([class*="min-w-"]),
    article:not(#cms-main-article):not([class*="h-\["]) [class*="p-"],
    article:not(#cms-main-article):not([class*="h-\["]) .flex-col,
    article:not(#cms-main-article):not([class*="h-\["]) .flex-grow {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 3. Liberar columnas y contenedores de héroes y feeds */
    .hero-dynamic-grid-1,
    .hero-dynamic-grid-23,
    .hero-dynamic-grid-4,
    .hero-dynamic-grid-9,
    [class*="hero-"] .grid,
    [class*="hero-"] [class*="col-span"],
    [class*="hero-"] .flex-col {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* 4. Liberar limitación o corte de texto (line-clamp) en móvil */
    [class*="line-clamp-"],
    .line-clamp-1,
    .line-clamp-2,
    .line-clamp-3,
    .line-clamp-4,
    .line-clamp-5,
    .line-clamp-6,
    article [class*="line-clamp-"],
    article .typo-home_card_title,
    article .typo-home_card_p,
    article .typo-home_sec_title,
    article .typo-home_sec_p,
    article .typo-home_hero_title,
    article .typo-home_hero_p,
    article h1,
    article h2,
    article h3,
    article h4,
    article h5,
    article h6,
    article p {
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        display: block !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* 5. Asegurar que pills y volantas nunca se estiren */
    article span[class*="rounded"],
    [class*="hero-"] span[class*="rounded"],
    article span[style*="background-color"],
    [class*="hero-"] span[style*="background-color"],
    article span[class*="uppercase"],
    [class*="hero-"] span[class*="uppercase"] {
        display: inline-flex !important;
        width: auto !important;
        max-width: max-content !important;
        align-self: flex-start !important;
        flex: none !important;
        white-space: nowrap !important;
    }
}