/* ============================================================================
   INMOBILIARE ELEMENTOR WIDGETS v1.2.0 — CSS DE WIDGETS NUEVOS
   ============================================================================
   Estilos para:
   - .inmo-block-fichas (widget Fichas)
   - .inmo-block-divisor (widget Divisor)
   - .inmo-block-carrusel (widget Carrusel)
   - .inmo-block--hero-overlay y .inmo-block--featured-grid (layouts nuevos del widget Posts)

   Reutiliza tokens del sistema v2.7 con fallbacks.
   ============================================================================ */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  TOKENS (fallbacks por si v2.7 no está cargado)                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.inmo-block-fichas,
.inmo-block-divisor,
.inmo-block-carrusel,
.inmo-block--hero-overlay,
.inmo-block--featured-grid {
    --inmo-blk-green: var(--inmo-green, #2d5d48);
    --inmo-blk-gold: var(--inmo-gold, #c8a96e);
    --inmo-blk-gold-soft: var(--inmo-gold-soft, rgba(200, 169, 110, 0.08));
    --inmo-blk-gold-on-light: var(--inmo-gold-on-light, #9c7d2a);
    --inmo-blk-black: var(--inmo-black, #0a0a0a);
    --inmo-blk-white: var(--inmo-white, #ffffff);
    --inmo-blk-light: var(--inmo-light, #f5f4f0);
    --inmo-blk-text-h: var(--inmo-text-h, #111111);
    --inmo-blk-text-m: var(--inmo-text-m, #6a6a6a);
    --inmo-blk-text-s: var(--inmo-text-s, #8a8a8a);
    --inmo-blk-border: var(--inmo-border, rgba(36, 36, 36, 0.10));
    --inmo-blk-font: var(--inmo-font, 'Manrope', system-ui, sans-serif);
    --inmo-blk-font-display: var(--inmo-font-display, 'Playfair Display', Georgia, serif);
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  WIDGET: FICHAS                                                           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.inmo-block-fichas {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.inmo-ficha {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 24px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--inmo-blk-border);
    transition: padding-left 0.2s ease;
}

.inmo-ficha:first-child {
    padding-top: 0;
}

.inmo-ficha:last-child {
    border-bottom: none;
}

.inmo-ficha:hover {
    padding-left: 8px;
}

/* Variante: lista simple (sin números) */
.inmo-block-fichas--lista .inmo-ficha {
    grid-template-columns: auto 1fr;
}

/* Cuando no hay miniatura */
.inmo-ficha:not(:has(.inmo-ficha__media-link)) {
    grid-template-columns: auto 1fr;
}
.inmo-block-fichas--lista .inmo-ficha:not(:has(.inmo-ficha__media-link)) {
    grid-template-columns: 1fr;
}

.inmo-ficha__num {
    font-family: var(--inmo-blk-font);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--inmo-blk-gold);
    min-width: 70px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.inmo-ficha__media-link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.inmo-ficha__media {
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: var(--inmo-blk-light);
}

.inmo-ficha__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.inmo-ficha__media-link:hover img {
    transform: scale(1.06);
}

.inmo-ficha__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.inmo-ficha__category {
    display: inline-block;
    font-family: var(--inmo-blk-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--inmo-blk-gold-on-light);
    text-decoration: none;
    align-self: flex-start;
    transition: color 0.2s;
}

.inmo-ficha__category:hover {
    color: var(--inmo-blk-green);
}

.inmo-ficha__title {
    font-family: var(--inmo-blk-font);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--inmo-blk-text-h);
    margin: 0;
}

.inmo-ficha__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.inmo-ficha__title a:hover {
    color: var(--inmo-blk-green);
}

.inmo-ficha__excerpt {
    font-family: var(--inmo-blk-font);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--inmo-blk-text-m);
    margin: 0;
}

.inmo-ficha__date {
    font-family: var(--inmo-blk-font);
    font-size: 11px;
    color: var(--inmo-blk-text-s);
    margin-top: 2px;
}

@media (max-width: 600px) {
    .inmo-ficha {
        grid-template-columns: auto 1fr;
        gap: 16px;
        padding: 18px 0;
    }
    .inmo-ficha__num {
        font-size: 32px;
        min-width: 48px;
    }
    .inmo-ficha__media {
        width: 80px;
        height: 80px;
    }
    /* En mobile, si hay miniatura y número, ocultar miniatura para que quepa el contenido */
    .inmo-block-fichas--numerado .inmo-ficha:has(.inmo-ficha__media-link) .inmo-ficha__media-link {
        display: none;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  WIDGET: DIVISOR                                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.inmo-block-divisor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

/* Espaciados verticales */
.inmo-block-divisor--esp-pequeno  { padding: 24px 0; }
.inmo-block-divisor--esp-mediano  { padding: 48px 0; }
.inmo-block-divisor--esp-grande   { padding: 72px 0; }
.inmo-block-divisor--esp-enorme   { padding: 96px 0; }

/* Línea base */
.inmo-block-divisor__line {
    flex: 1;
    height: 1px;
    background: var(--inmo-blk-border);
    display: block;
}

/* Variante: línea simple (una sola línea ancho completo) */
.inmo-block-divisor--simple .inmo-block-divisor__line {
    flex: 1;
}

/* Variante: ornamento (línea + punto gold + línea) */
.inmo-block-divisor--ornamento .inmo-block-divisor__line {
    background: var(--inmo-blk-border);
}
.inmo-block-divisor__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--inmo-blk-gold);
    flex-shrink: 0;
    display: block;
}

/* Variante: doble línea */
.inmo-block-divisor--doble {
    flex-direction: column;
    gap: 4px;
}
.inmo-block-divisor--doble .inmo-block-divisor__line {
    width: 100%;
    flex: none;
}

/* Variante: solo espacio */
.inmo-block-divisor--espacio {
    /* Solo el padding de --esp-* aplica, no hay líneas */
}

/* Anchos */
.inmo-block-divisor--ancho-completo { max-width: 100%; }
.inmo-block-divisor--ancho-medio    { max-width: 50%; margin: 0 auto; }
.inmo-block-divisor--ancho-corto    { max-width: 120px; margin: 0 auto; }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  WIDGET: CARRUSEL                                                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.inmo-block-carrusel {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.inmo-block-carrusel__swiper {
    width: 100%;
    height: var(--inmo-carrusel-altura, 520px);
}

.inmo-block-carrusel__slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--inmo-blk-black);
}

.inmo-block-carrusel__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 130%;  /* 30% extra para el efecto parallax */
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.inmo-block-carrusel__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.80) 100%
    );
    z-index: 2;
}

.inmo-block-carrusel__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
}

.inmo-block-carrusel__category {
    display: inline-block;
    font-family: var(--inmo-blk-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--inmo-blk-gold);
    text-decoration: none;
    align-self: flex-start;
    transition: opacity 0.2s;
}

.inmo-block-carrusel__category:hover {
    opacity: 0.8;
}

.inmo-block-carrusel__title {
    font-family: var(--inmo-blk-font);
    font-size: clamp(24px, 3.5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--inmo-blk-white);
    margin: 0;
    max-width: 800px;
}

.inmo-block-carrusel__title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.inmo-block-carrusel__title a:hover {
    opacity: 0.85;
}

.inmo-block-carrusel__excerpt {
    font-family: var(--inmo-blk-font);
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 700px;
}

.inmo-block-carrusel__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--inmo-blk-font);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
}

.inmo-block-carrusel__author,
.inmo-block-carrusel__date {
    font-weight: 500;
}

.inmo-block-carrusel__separator {
    opacity: 0.5;
}

/* Pagination (dots) */
.inmo-block-carrusel__pagination.swiper-pagination {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    z-index: 4;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.inmo-block-carrusel__pagination .swiper-pagination-bullet {
    width: 32px;
    height: 3px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.35);
    opacity: 1;
    margin: 0;
    cursor: pointer;
    transition: background 0.3s;
}

.inmo-block-carrusel__pagination .swiper-pagination-bullet-active {
    background: var(--inmo-blk-gold);
}

/* Navigation arrows */
.inmo-block-carrusel__prev,
.inmo-block-carrusel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    color: var(--inmo-blk-white);
}

.inmo-block-carrusel__prev:hover,
.inmo-block-carrusel__next:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: var(--inmo-blk-gold);
}

.inmo-block-carrusel__prev { left: 24px; }
.inmo-block-carrusel__next { right: 24px; }

/* Sobreescribir iconos default de Swiper */
.inmo-block-carrusel__prev::after,
.inmo-block-carrusel__next::after {
    font-family: 'swiper-icons';
    font-size: 18px;
    font-weight: 700;
    color: var(--inmo-blk-white);
}

.inmo-block-carrusel__prev::after { content: 'prev'; }
.inmo-block-carrusel__next::after { content: 'next'; }

@media (max-width: 768px) {
    .inmo-block-carrusel__swiper {
        height: clamp(360px, 60vh, 480px);
    }
    .inmo-block-carrusel__prev,
    .inmo-block-carrusel__next {
        width: 36px;
        height: 36px;
    }
    .inmo-block-carrusel__prev { left: 12px; }
    .inmo-block-carrusel__next { right: 12px; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  POSTS WIDGET — NUEVO LAYOUT: HERO-OVERLAY                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

.inmo-block--hero-overlay {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
    background: var(--inmo-blk-black);
}

.inmo-block--hero-overlay .inmo-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: transparent;
}

.inmo-block--hero-overlay .inmo-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inmo-block--hero-overlay .inmo-card__media {
    width: 100%;
    height: 100%;
    aspect-ratio: unset !important;
}

.inmo-block--hero-overlay .inmo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset !important;
}

.inmo-block--hero-overlay .inmo-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.50) 60%,
        rgba(0, 0, 0, 0.85) 100%
    );
    z-index: 2;
}

.inmo-block--hero-overlay .inmo-card__body {
    position: relative;
    z-index: 3;
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
}

.inmo-block--hero-overlay .inmo-card__category {
    color: var(--inmo-blk-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
}

.inmo-block--hero-overlay .inmo-card__title {
    font-family: var(--inmo-blk-font);
    font-size: clamp(24px, 3.5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--inmo-blk-white);
    margin: 0;
}

.inmo-block--hero-overlay .inmo-card__title a {
    color: inherit;
    text-decoration: none;
}

.inmo-block--hero-overlay .inmo-card__excerpt {
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 700px;
}

.inmo-block--hero-overlay .inmo-card__meta,
.inmo-block--hero-overlay .inmo-card__date {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  POSTS WIDGET — NUEVO LAYOUT: FEATURED-GRID                              ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Hero overlay arriba (1 destacado) + 4 cards verticales con overlay debajo. */

.inmo-block--featured-grid {
    display: grid;
    grid-template-rows: auto auto;
    gap: 24px;
}

/* La primera card es la hero overlay (igual que arriba) */
.inmo-block--featured-grid .inmo-card--featured {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
    background: var(--inmo-blk-black);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__media {
    width: 100%;
    height: 100%;
    aspect-ratio: unset !important;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset !important;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0.85) 100%
    );
    z-index: 2;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__body {
    position: relative;
    z-index: 3;
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__category {
    color: var(--inmo-blk-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__title {
    font-family: var(--inmo-blk-font);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--inmo-blk-white);
    margin: 0;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__title a {
    color: inherit;
    text-decoration: none;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__excerpt {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 700px;
}

.inmo-block--featured-grid .inmo-card--featured .inmo-card__date {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
}

/* Las cards compactas: grid de 4 con overlay vertical (estilo Newsreader Entradas destacadas) */
.inmo-block--featured-grid {
    /* El truco es que el primer hijo es la featured y los siguientes son cards en grid */
}

/* Selector hack: agrupar cards compactas en grid sin tocar PHP */
.inmo-block--featured-grid .inmo-card--compact {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--inmo-blk-black);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__media {
    width: 100%;
    height: 100%;
    aspect-ratio: unset !important;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset !important;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.50) 50%,
        rgba(0, 0, 0, 0.90) 100%
    );
    z-index: 2;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__body {
    position: relative;
    z-index: 3;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__category {
    color: var(--inmo-blk-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__title {
    font-family: var(--inmo-blk-font);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.25;
    color: var(--inmo-blk-white);
    margin: 0;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__title a {
    color: inherit;
    text-decoration: none;
}

.inmo-block--featured-grid .inmo-card--compact .inmo-card__date {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}

/* Layout: featured arriba, 4 compactas debajo */
.inmo-block--featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.inmo-block--featured-grid .inmo-card--featured {
    grid-column: 1 / -1;
}

/* Wrapper para las cards compactas — aplicado vía JavaScript o asumiendo posición CSS */
/* Como no podemos agregar wrapper sin tocar PHP, usamos display: contents en el padre */
/* y declaramos un sub-grid */
.inmo-block--featured-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "featured featured featured featured"
        "c1 c2 c3 c4";
    gap: 16px;
}

.inmo-block--featured-grid .inmo-card--featured { grid-area: featured; }
.inmo-block--featured-grid .inmo-card--compact:nth-of-type(2) { grid-area: c1; }
.inmo-block--featured-grid .inmo-card--compact:nth-of-type(3) { grid-area: c2; }
.inmo-block--featured-grid .inmo-card--compact:nth-of-type(4) { grid-area: c3; }
.inmo-block--featured-grid .inmo-card--compact:nth-of-type(5) { grid-area: c4; }

@media (max-width: 1024px) {
    .inmo-block--featured-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "featured featured"
            "c1 c2"
            "c3 c4";
    }
}

@media (max-width: 600px) {
    .inmo-block--featured-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "featured"
            "c1"
            "c2"
            "c3"
            "c4";
    }
    .inmo-block--featured-grid .inmo-card--featured {
        min-height: 360px;
    }
}


/* ============================================================================
   FIN — CSS de widgets v1.2.0
   ============================================================================ */