/* ============================================================
   Medway Elements — medway-widgets.css
   Todos los estilos de los widgets custom.
   Los valores variables vienen inyectados inline desde PHP.
   ============================================================ */

/* ── Variables por defecto (fallback si PHP no las inyecta) ── */
.mw-pg {
    --mw-accent:       #F5C200;
    --mw-min-h:        440px;
    --mw-photo-h:      210px;
    --mw-strip-h:      4px;
    --mw-active-flex:  2;

    display:          flex;
    width:            100%;
    gap:              2px;           /* color controlado por gap_color */
    background-color: #E5E7EB;      /* el gap se ve a través del background del wrapper */
    overflow:         hidden;
}

/* ─────────────────────────────────────────
   Columna base
   ───────────────────────────────────────── */
.mw-col {
    flex:              1;
    min-height:        var(--mw-min-h);
    display:           flex;
    flex-direction:    column;
    text-decoration:   none;
    position:          relative;
    overflow:          hidden;
    cursor:            pointer;

    /* Transición principal: expansión de anchura */
    transition:        flex 0.45s cubic-bezier(.4, 0, .2, 1);
}

/* Columna activa ocupa el doble (~50% en un grid de 3) */
.mw-col.is-active {
    flex: var(--mw-active-flex);
}

/* ─────────────────────────────────────────
   Estilos dark / light
   ───────────────────────────────────────── */
.mw-col--dark {
    background-color: #141414;
    color:            #ffffff;
    border-top:       4px solid var(--mw-accent);
}

.mw-col--light {
    background-color: #ffffff;
    color:            #141414;
}

/* Hover suave en columna clara */
.mw-col--light:hover {
    background-color: #FFFBEA;
}

/* ─────────────────────────────────────────
   Foto de fondo
   ───────────────────────────────────────── */
.mw-col-photo {
    height:              var(--mw-photo-h);
    background-size:     cover;
    background-position: center;
    flex-shrink:         0;
    position:            relative;
    overflow:            hidden;
    transition:          transform 0.5s ease;
}

.mw-col:hover .mw-col-photo {
    transform: scale(1.04);
}

/* Overlay foto — distinto según estilo */
.mw-col--dark .mw-col-photo::after,
.mw-col--light .mw-col-photo::after {
    content:   '';
    position:  absolute;
    inset:     0;
    transition: background 0.4s;
}

.mw-col--dark .mw-col-photo::after {
    background: linear-gradient(to bottom, rgba(10,10,10,.1) 0%, rgba(14,14,14,.95) 100%);
}

.mw-col--light .mw-col-photo::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 20%, rgba(255,255,255,.98) 100%);
}

/* ─────────────────────────────────────────
   Badge sobre la foto
   ───────────────────────────────────────── */
.mw-col-badge {
    position:      absolute;
    top:           16px;
    left:          18px;
    z-index:       2;
    font-size:     10px;
    font-weight:   700;
    letter-spacing:.16em;
    text-transform:uppercase;
    padding:       4px 10px;
    background:    var(--mw-accent);
    color:         #141414;
    line-height:   1.4;
}

/* ─────────────────────────────────────────
   Cuerpo de la columna
   ───────────────────────────────────────── */
.mw-col-body {
    padding:        24px 28px 28px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    position:       relative;
}

/* Etiqueta */
.mw-col-tag {
    display:        inline-block;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding:        3px 10px;
    width:          fit-content;
    margin-bottom:  14px;
    line-height:    1.4;
}

.mw-col--dark .mw-col-tag {
    background: rgba(245,194,0,.18);
    color:      var(--mw-accent);
    border:     1px solid rgba(245,194,0,.3);
}

.mw-col--light .mw-col-tag {
    background: #FFFBEA;
    color:      #D4A800;
    border:     1px solid var(--mw-accent);
}

/* Número decorativo */
.mw-col-num {
    font-size:    60px;
    font-weight:  900;
    line-height:  1;
    position:     absolute;
    top:          8px;
    right:        14px;
    letter-spacing:-.02em;
}

.mw-col--dark  .mw-col-num { color: rgba(255,255,255,.04); }
.mw-col--light .mw-col-num { color: rgba(0,0,0,.04); }

/* Título */
.mw-col-title {
    font-weight:     800;
    text-transform:  uppercase;
    letter-spacing:  .02em;
    margin-bottom:   10px;
    line-height:     1.1;
}

.mw-col--dark  .mw-col-title { color: #ffffff;  font-size: 27px; }
.mw-col--light .mw-col-title { color: #141414;  font-size: 21px; }

/* Descripción */
.mw-col-desc {
    font-size:    13px;
    line-height:  1.65;
    font-weight:  300;
    flex:         1;
    margin-bottom:18px;
}

.mw-col--dark  .mw-col-desc { color: rgba(255,255,255,.55); }
.mw-col--light .mw-col-desc { color: #6B7280; }

/* Meta list */
.mw-col-meta {
    list-style:   none;
    padding:      0;
    margin:       0 0 18px 0;
    display:      flex;
    flex-direction:column;
    gap:          6px;
}

.mw-col-meta-item {
    display:    flex;
    align-items:center;
    gap:        8px;
    font-size:  12px;
}

.mw-col--dark  .mw-col-meta-item { color: rgba(255,255,255,.4); }
.mw-col--light .mw-col-meta-item { color: #9CA3AF; }

.mw-col--dark  .mw-col-meta-item strong { color: rgba(255,255,255,.85); }
.mw-col--light .mw-col-meta-item strong { color: #141414; font-weight: 600; }

.mw-meta-dot {
    width:       5px;
    height:      5px;
    background:  var(--mw-accent);
    flex-shrink: 0;
    display:     inline-block;
}

/* Enlace CTA */
.mw-col-cta {
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-size:     12px;
    font-weight:   700;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-top:    auto;
    transition:    gap 0.2s;
}

.mw-col--dark  .mw-col-cta { color: var(--mw-accent); }
.mw-col--light .mw-col-cta { color: #D4A800; }

.mw-col:hover .mw-col-cta { gap: 14px; }

/* ─────────────────────────────────────────
   Listón animado (bottom strip)
   ───────────────────────────────────────── */
.mw-col-strip {
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      0%;
    height:     var(--mw-strip-h);
    background: var(--mw-accent);

    /* Pequeño delay para que empiece cuando la columna ya se expandió */
    transition: width 0.35s ease 0.15s;
}

.mw-col.is-active .mw-col-strip {
    width: 100%;
}