/* ============================================================
   BLOG ARTE BRUT — Estilos Frontend v1.1.0
   Diseño brutalista · Blanco y negro · Arte contemporáneo
   ============================================================ */

.bab-wrap {
    --bab-black:  #000000;
    --bab-white:  #ffffff;
    --bab-border: 3px solid #000;
    --bab-sans:   'Helvetica Neue', Helvetica, Arial, sans-serif;
    --bab-mono:   'Courier New', Courier, monospace;
    background:   var(--bab-white);
    color:        var(--bab-black);
    font-family:  var(--bab-sans);
    -webkit-font-smoothing: antialiased;
}

.bab-wrap *, .bab-wrap *::before, .bab-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.bab-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border-top:  var(--bab-border);
    border-left: var(--bab-border);
}

.bab-item {
    position:      relative;
    border-right:  var(--bab-border);
    border-bottom: var(--bab-border);
    overflow:      hidden;
    background:    var(--bab-white);
    color:         var(--bab-black);
    opacity:       0;
    transform:     translateY(16px);
}

.bab-item.is-visible {
    opacity:   1;
    transform: translateY(0);
    transition: opacity .5s ease, transform .5s ease, background-color .18s ease, color .18s ease;
}

.bab-item--full     { grid-column: span 12; }
.bab-item--half     { grid-column: span 6;  }
.bab-item--large    { grid-column: span 8;  }
.bab-item--small    { grid-column: span 4;  }
.bab-item--third    { grid-column: span 4;  }
.bab-item--full-alt { grid-column: span 12; }

.bab-item--full .bab-inner,
.bab-item--full-alt .bab-inner {
    display:               grid;
    grid-template-columns: 7fr 5fr;
    min-height:            480px;
}

.bab-img-wrap { overflow: hidden; position: relative; flex-shrink: 0; }

.bab-item--half  .bab-img-wrap  { aspect-ratio: 4/5;  }
.bab-item--large .bab-img-wrap  { aspect-ratio: 16/9; }
.bab-item--small .bab-img-wrap  { aspect-ratio: 1/1;  }
.bab-item--third .bab-img-wrap  { aspect-ratio: 3/4;  }

.bab-item--full .bab-img-wrap,
.bab-item--full-alt .bab-img-wrap { aspect-ratio: unset; height: 100%; min-height: 420px; }

.bab-img-wrap--empty {
    background:      var(--bab-black);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.bab-img-placeholder {
    font-family: var(--bab-mono);
    font-size:   clamp(4rem, 10vw, 10rem);
    font-weight: 700;
    color:       var(--bab-white);
    opacity:     0.18;
    user-select: none;
    line-height: 1;
}

.bab-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    filter:     grayscale(100%);
    transition: transform .5s ease, filter .3s ease;
}

.bab-item:hover .bab-img { transform: scale(1.04); filter: grayscale(100%) contrast(1.12); }

.bab-content {
    padding:        24px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.bab-item--full .bab-content,
.bab-item--full-alt .bab-content {
    padding:         36px 40px;
    border-left:     var(--bab-border);
    justify-content: space-between;
}

.bab-content__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.bab-index {
    font-family:    var(--bab-mono);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.1em;
    line-height:    1.4;
    border:         2px solid var(--bab-black);
    padding:        1px 7px;
    display:        inline-block;
    transition:     border-color .15s;
}

.bab-cat {
    font-family:    var(--bab-sans);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height:    1;
}

.bab-title {
    font-family:    var(--bab-sans);
    font-weight:    900;
    line-height:    0.95;
    letter-spacing: -0.025em;
    flex-grow:      1;
}

.bab-title a { color: inherit; text-decoration: none; display: block; }

.bab-item--full .bab-title,
.bab-item--full-alt .bab-title { font-size: clamp(2.4rem, 4.5vw, 5rem); }
.bab-item--half  .bab-title    { font-size: clamp(1.6rem, 3vw, 3rem);   }
.bab-item--large .bab-title    { font-size: clamp(1.5rem, 2.5vw, 2.6rem); }
.bab-item--small .bab-title    { font-size: clamp(1.1rem, 2vw, 1.8rem); }
.bab-item--third .bab-title    { font-size: clamp(1rem,   1.8vw, 1.6rem); }

.bab-subtitle { font-size: 14px; font-weight: 400; line-height: 1.4; opacity: .65; }
.bab-excerpt  { font-size: 14px; line-height: 1.6; }

.bab-item--small .bab-subtitle,
.bab-item--third .bab-subtitle { display: none; }

.bab-footer {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             12px;
    margin-top:      auto;
    border-top:      2px solid var(--bab-black);
    padding-top:     14px;
    transition:      border-color .15s;
}

.bab-meta {
    font-family:    var(--bab-mono);
    font-size:      11px;
    letter-spacing: 0.04em;
    line-height:    1.4;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    transition:     color .15s;
}

.bab-date   { font-weight: 700; }
.bab-author { opacity: .7; }

.bab-read-more {
    font-family:     var(--bab-sans);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  0.2em;
    text-transform:  uppercase;
    color:           var(--bab-black);
    text-decoration: none;
    border-bottom:   2px solid var(--bab-black);
    padding-bottom:  1px;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      color .15s, border-color .15s;
}

/* ── Hover: inversión total ─────────────────────────────── */
.bab-item:hover { background-color: var(--bab-black); color: var(--bab-white); }
.bab-item:hover .bab-title a,
.bab-item:hover .bab-cat,
.bab-item:hover .bab-subtitle,
.bab-item:hover .bab-excerpt  { color: var(--bab-white); }
.bab-item:hover .bab-index    { border-color: var(--bab-white); color: var(--bab-white); }
.bab-item:hover .bab-footer   { border-top-color: var(--bab-white); }
.bab-item:hover .bab-read-more { color: var(--bab-white); border-bottom-color: var(--bab-white); }
.bab-item--full:hover  .bab-content,
.bab-item--full-alt:hover .bab-content { border-color: var(--bab-white); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bab-item--large { grid-column: span 12; }
    .bab-item--small { grid-column: span 12; }
    .bab-item--full .bab-inner,
    .bab-item--full-alt .bab-inner { grid-template-columns: 1fr; min-height: unset; }
    .bab-item--full .bab-img-wrap,
    .bab-item--full-alt .bab-img-wrap { min-height: 280px; height: 280px; aspect-ratio: unset; }
    .bab-item--full .bab-content,
    .bab-item--full-alt .bab-content { border-left: none; border-right: none; border-top: var(--bab-border); }
}

@media (max-width: 768px) {
    .bab-item--full, .bab-item--full-alt,
    .bab-item--half, .bab-item--large,
    .bab-item--small, .bab-item--third { grid-column: span 12; }
    .bab-item--small .bab-subtitle,
    .bab-item--third .bab-subtitle { display: block; }
}