/* ================================================================
   Dynamic Grid & CPT Builder — Premium Stylesheet v1.0.1
   ================================================================ */

/* ── Variables base ────────────────────────────────────────────── */
:root {
    --dgcb-accent:      #6366f1;
    --dgcb-text:        #1e293b;
    --dgcb-meta:        #64748b;
    --dgcb-card-bg:     #ffffff;
    --dgcb-border:      #e2e8f0;
    --dgcb-shadow:      0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
    --dgcb-shadow-lg:   0 10px 15px -3px rgba(0,0,0,.09), 0 4px 6px -2px rgba(0,0,0,.04);
    --dgcb-transition:  all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --dgcb-radius:      10px;
}

/* ── Wrapper global ────────────────────────────────────────────── */
.dgcb-widget-wrapper { width: 100%; position: relative; clear: both; }

/* ================================================================
   GRID RESPONSIVE
   Las columnas se inyectan directamente vía Elementor selectors:
   grid-template-columns: repeat(N, 1fr)
   ================================================================ */
.dgcb-layout-grid .dgcb-grid-track,
.dgcb-layout-masonry .dgcb-grid-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Fallback por defecto */
    gap: 24px;
    width: 100%;
}

/* Fallback responsive si Elementor no sobrescribe */
@media (max-width: 1024px) {
    .dgcb-layout-grid .dgcb-grid-track,
    .dgcb-layout-masonry .dgcb-grid-track {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .dgcb-layout-grid .dgcb-grid-track,
    .dgcb-layout-masonry .dgcb-grid-track {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   TARJETA BASE — tamaño compacto y adaptable
   ================================================================ */
.dgcb-card-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0; /* evita desbordamiento en grid */
}

.dgcb-card-inner {
    background:    var(--dgcb-card-bg);
    border:        1px solid var(--dgcb-border);
    border-radius: var(--dgcb-radius);
    overflow:      hidden;
    height:        100%;
    display:       flex;
    flex-direction: column;
    box-shadow:    var(--dgcb-shadow);
    transition:    var(--dgcb-transition);
    position:      relative;
}

/* ── Imagen ────────────────────────────────────────────────────── */
.dgcb-card-image-wrapper {
    position:   relative;
    overflow:   hidden;
    aspect-ratio: 16/10;   /* Proporción por defecto — sobrescrita por Elementor */
    background: #f1f5f9;
    flex-shrink: 0;
}

.dgcb-card-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.dgcb-card-img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center;
    display:     block;
    transition:  transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.dgcb-card-placeholder-img {
    width:      100%;
    height:     100%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

/* ── Contenido ─────────────────────────────────────────────────── */
.dgcb-card-content {
    padding:        16px;     /* Compacto por defecto, ajustable desde Elementor */
    display:        flex;
    flex-direction: column;
    flex-grow:      1;
    gap:            6px;
}

.dgcb-card-meta {
    font-size:      0.7rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--dgcb-meta);
}

.dgcb-card-title {
    font-size:   1rem;       /* Compacto — ajustable con Tipografía en Elementor */
    line-height: 1.4;
    font-weight: 700;
    margin:      0;
}

.dgcb-card-title a {
    color:           var(--dgcb-text);
    text-decoration: none;
    transition:      color 0.2s;
}

.dgcb-card-title a:hover { color: var(--dgcb-accent); }

.dgcb-card-excerpt {
    font-size:   0.85rem;
    line-height: 1.55;
    color:       #475569;
    flex-grow:   1;
    margin:      0;
}
.dgcb-card-excerpt p { margin: 0; }

/* ================================================================
   EFECTOS DE HOVER — controlados por clase en el contenedor
   ================================================================ */

/* Lift (por defecto) */
.dgcb-hover-lift .dgcb-card-inner:hover {
    transform:  translateY(-4px);
    box-shadow: var(--dgcb-shadow-lg);
}

/* Scale */
.dgcb-hover-scale .dgcb-card-inner:hover {
    transform:  scale(1.03);
    box-shadow: var(--dgcb-shadow-lg);
}

/* None */
.dgcb-hover-none .dgcb-card-inner:hover {
    transform:  none;
    box-shadow: var(--dgcb-shadow);
}

/* Glow y Border se aplican vía selectors de Elementor directamente */
.dgcb-hover-glow .dgcb-card-inner:hover,
.dgcb-hover-border .dgcb-card-inner:hover { transform: none; }

/* Zoom de imagen */
.dgcb-img-zoom .dgcb-card-inner:hover .dgcb-card-img {
    transform: scale(1.07);
}

/* ================================================================
   ESTILO MINIMALISTA
   ================================================================ */
.dgcb-style-minimalist .dgcb-card-inner {
    border:     none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}
.dgcb-style-minimalist .dgcb-card-inner:hover { transform: none; box-shadow: none; }
.dgcb-style-minimalist .dgcb-card-image-wrapper { border-radius: 8px; }
.dgcb-style-minimalist .dgcb-card-content       { padding: 10px 0 0; }

.dgcb-card-readmore {
    font-size:       0.78rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    color:           var(--dgcb-text);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    margin-top:      8px;
    transition:      color 0.2s;
}
.dgcb-card-readmore:hover { color: var(--dgcb-accent); }

/* ================================================================
   E-COMMERCE / WOOCOMMERCE
   ================================================================ */
.dgcb-style-ecommerce .dgcb-card-image-wrapper { aspect-ratio: 1/1; }

.dgcb-sale-badge {
    position:      absolute;
    top:           10px;
    left:          10px;
    background:    #ef4444;
    color:         #fff;
    font-size:     0.68rem;
    font-weight:   700;
    padding:       3px 9px;
    border-radius: 50px;
    z-index:       2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dgcb-card-ecommerce-actions {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-top:     12px;
    border-top:     1px solid var(--dgcb-border);
    padding-top:    12px;
}

.dgcb-product-price { font-size: 1rem; font-weight: 700; color: var(--dgcb-text); }
.dgcb-product-price ins { text-decoration: none; color: #10b981; }
.dgcb-product-price del { color: #94a3b8; font-size: 0.82em; margin-right: 4px; }

.dgcb-add-to-cart.button {
    background:      #1e293b;
    color:           #fff;
    text-align:      center;
    padding:         9px 16px;
    border-radius:   6px;
    font-weight:     600;
    font-size:       0.82rem;
    text-decoration: none;
    transition:      background 0.2s;
    display:         block;
    cursor:          pointer;
}
.dgcb-add-to-cart.button:hover { background: var(--dgcb-accent); }

/* ================================================================
   MASONRY — JS reordena las tarjetas, grid define las columnas
   ================================================================ */
.dgcb-layout-masonry .dgcb-card-item  {
    margin-bottom: 24px;
    box-sizing:    border-box;
    break-inside:  avoid;
}

/* ================================================================
   SLIDER / SWIPER
   ================================================================ */
.dgcb-swiper { width: 100%; overflow: hidden; padding-bottom: 44px; }
.dgcb-swiper .swiper-slide { height: auto; }

.dgcb-swiper-next, .dgcb-swiper-prev {
    width:         40px;
    height:        40px;
    background:    #fff;
    border-radius: 50%;
    box-shadow:    var(--dgcb-shadow);
    color:         var(--dgcb-text);
    transition:    var(--dgcb-transition);
}
.dgcb-swiper-next:after, .dgcb-swiper-prev:after { font-size: 14px; font-weight: 700; }
.dgcb-swiper-next:hover, .dgcb-swiper-prev:hover  { background: var(--dgcb-accent); color: #fff; }
.dgcb-swiper-pagination .swiper-pagination-bullet-active { background: var(--dgcb-accent); }

/* ================================================================
   PAGINACIÓN AJAX
   ================================================================ */
.dgcb-ajax-pagination-wrapper {
    text-align:     center;
    margin-top:     32px;
    display:        flex;
    justify-content: center;
    align-items:    center;
    min-height:     48px;
}

.dgcb-load-more-btn {
    background:    var(--dgcb-accent);
    color:         #fff;
    padding:       11px 32px;
    border:        none;
    border-radius: 50px;
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.2s;
    box-shadow:    0 4px 6px rgba(99,102,241,0.2);
}
.dgcb-load-more-btn:hover { opacity: .88; transform: scale(1.02); }

.dgcb-loading-spinner {
    font-size: 24px;
    animation: dgcb-spin 1s linear infinite;
    display:   inline-block;
}
@keyframes dgcb-spin { to { transform: rotate(360deg); } }

/* ================================================================
   PAGINACIÓN NUMÉRICA
   ================================================================ */
.dgcb-numeric-pagination {
    margin-top:      32px;
    display:         flex;
    justify-content: center;
    gap:             6px;
    flex-wrap:       wrap;
}
.dgcb-numeric-pagination a,
.dgcb-numeric-pagination span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   7px;
    background:      #f8fafc;
    border:          1px solid var(--dgcb-border);
    color:           var(--dgcb-text);
    font-weight:     600;
    font-size:       0.85rem;
    text-decoration: none;
    transition:      var(--dgcb-transition);
}
.dgcb-numeric-pagination span.current {
    background:   var(--dgcb-accent);
    color:        #fff;
    border-color: var(--dgcb-accent);
}
.dgcb-numeric-pagination a:hover {
    background:   var(--dgcb-accent);
    color:        #fff;
    border-color: var(--dgcb-accent);
}

/* ── Sin resultados ────────────────────────────────────────────── */
.dgcb-no-posts {
    padding:       28px;
    background:    #f8fafc;
    border:        1px dashed #cbd5e1;
    border-radius: 8px;
    text-align:    center;
    color:         #64748b;
    font-style:    italic;
}