/* ============================================================
   BLOG ARTE BRUT — Single Post v1.1.0
   Diseño brutalista · B&W · Arte contemporáneo
   ============================================================ */

/* ── Astra: anular contenedor para full width ───────────────
   ast-page-builder-template + bab-single-page fuerzan
   el layout sin sidebar y sin contenedor de ancho máximo.
   ─────────────────────────────────────────────────────────── */
body.bab-single-page #content,
body.bab-single-page .site-content {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

body.bab-single-page #content > .ast-container,
body.bab-single-page .ast-container {
    max-width:     100% !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
}

body.bab-single-page #primary,
body.bab-single-page .content-area {
    width:   100%;
    padding: 0;
    float:   none;
}

/* Ocultar elementos de entrada por defecto de Astra */
body.bab-single-page .ast-article-single,
body.bab-single-page .entry-header,
body.bab-single-page .post-navigation,
body.bab-single-page .comments-area {
    display: none !important;
}

/* ── Wrap base ──────────────────────────────────────────── */
.bab-single-wrap {
    --bab-sans:   'Helvetica Neue', Helvetica, Arial, sans-serif;
    --bab-mono:   'Courier New', Courier, monospace;
    --bab-serif:  Georgia, 'Times New Roman', serif;
    --bab-border: 3px solid #000;

    font-family: var(--bab-sans);
    background:  #fff;
    color:       #000;
    width:       100%;
}

.bab-single-wrap *,
.bab-single-wrap *::before,
.bab-single-wrap *::after {
    box-sizing: border-box;
}

/* ── Cabecera del artículo ──────────────────────────────── */
.bab-single-header {
    border-top:    var(--bab-border);
    border-bottom: var(--bab-border);
}

.bab-single-header__top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         14px 48px;
    border-bottom:   2px solid #000;
}

.bab-single-cat {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.bab-single-meta {
    font-family:    var(--bab-mono);
    font-size:      11px;
    letter-spacing: 0.05em;
    display:        flex;
    gap:            8px;
    align-items:    center;
}

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

/* Título principal */
.bab-single-title {
    font-family:    var(--bab-sans);
    font-weight:    900;
    line-height:    0.9;
    letter-spacing: -0.03em;
    font-size:      clamp(2.8rem, 8vw, 9rem);
    padding:        48px 48px 44px;
    color:          #000;
}

.bab-single-title + .bab-single-subtitle {
    border-top: 2px solid #000;
}

/* Subtítulo */
.bab-single-subtitle {
    font-family: var(--bab-sans);
    font-size:   20px;
    font-weight: 400;
    font-style:  italic;
    line-height: 1.45;
    opacity:     0.6;
    padding:     18px 48px 22px;
    border-top:  2px solid #000;
}

/* ── Imagen destacada ───────────────────────────────────── */
.bab-single-image {
    width:         100%;
    max-height:    72vh;
    overflow:      hidden;
    border-top:    var(--bab-border);
    border-bottom: var(--bab-border);
    line-height:   0;
}

.bab-single-image img {
    width:      100%;
    height:     100%;
    max-height: 72vh;
    object-fit: cover;
    display:    block;
    filter:     grayscale(100%);
}

/* ── Contenido del artículo ─────────────────────────────── */
.bab-single-content {
    padding:       64px 48px 72px;
    border-bottom: var(--bab-border);
}

.bab-single-content__inner {
    max-width:    740px;
    margin:       0 auto;
    padding-left: 28px;
    border-left:  var(--bab-border);
}

/* Body text: serif para legibilidad editorial */
.bab-single-content__inner p {
    font-family:   var(--bab-serif);
    font-size:     19px;
    line-height:   1.82;
    margin-bottom: 1.6rem;
    color:         #000;
}

.bab-single-content__inner p:last-child { margin-bottom: 0; }

/* Headings dentro del contenido */
.bab-single-content__inner h2,
.bab-single-content__inner h3,
.bab-single-content__inner h4 {
    font-family:    var(--bab-sans);
    font-weight:    900;
    letter-spacing: -0.025em;
    line-height:    1;
    margin:         3rem 0 1.2rem;
    color:          #000;
}

.bab-single-content__inner h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
.bab-single-content__inner h3 { font-size: clamp(1.3rem, 2.5vw, 2.2rem); }
.bab-single-content__inner h4 { font-size: clamp(1.1rem, 2vw, 1.6rem); }

/* Links dentro del contenido */
.bab-single-content__inner a {
    color:            #000;
    text-decoration:  none;
    border-bottom:    2px solid #000;
    transition:       opacity 0.15s;
    font-family:      inherit;
}

.bab-single-content__inner a:hover { opacity: 0.45; }

/* Blockquote */
.bab-single-content__inner blockquote {
    border-left:   none;
    border-top:    var(--bab-border);
    border-bottom: var(--bab-border);
    padding:       24px 0;
    margin:        2.5rem 0;
}

.bab-single-content__inner blockquote p {
    font-size:   24px;
    font-style:  italic;
    line-height: 1.5;
    margin:      0;
    opacity:     0.85;
}

/* Imágenes dentro del contenido */
.bab-single-content__inner img {
    width:       100%;
    height:      auto;
    display:     block;
    filter:      grayscale(100%);
    margin:      2.4rem 0;
    border:      var(--bab-border);
    line-height: 0;
}

/* Code */
.bab-single-content__inner code {
    font-family: var(--bab-mono);
    font-size:   14px;
    background:  #f0f0f0;
    padding:     2px 6px;
    color:       #000;
}

.bab-single-content__inner pre {
    font-family:    var(--bab-mono);
    font-size:      13px;
    background:     #f0f0f0;
    padding:        20px;
    overflow-x:     auto;
    border:         2px solid #000;
    margin-bottom:  1.5rem;
    border-radius:  0;
}

/* ── Navegación Anterior / Siguiente ───────────────────── */
.bab-single-nav {
    border-bottom: var(--bab-border);
}

.bab-single-nav__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
}

.bab-single-nav__item {
    display:         flex;
    align-items:     center;
    gap:             20px;
    padding:         32px 48px;
    text-decoration: none;
    color:           #000;
    background:      #fff;
    transition:      background 0.15s, color 0.15s;
    min-height:      100px;
}

.bab-single-nav__item--prev { border-right: 2px solid #000; }
.bab-single-nav__item--next {
    border-left:     2px solid #000;
    justify-content: flex-end;
}

.bab-single-nav__item--empty { cursor: default; background: #fff; }

.bab-single-nav__item:hover:not(.bab-single-nav__item--empty) {
    background: #000;
    color:      #fff;
}

.bab-single-nav__arrow {
    font-size:   28px;
    font-weight: 900;
    flex-shrink: 0;
    line-height: 1;
}

.bab-single-nav__content {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    overflow:       hidden;
    max-width:      340px;
}

.bab-single-nav__content--right { text-align: right; }

.bab-single-nav__label {
    font-family:    var(--bab-mono);
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.25em;
}

.bab-single-nav__ptitle {
    font-weight:     700;
    font-size:       15px;
    line-height:     1.2;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

/* ── Otros Artículos ───────────────────────────────────── */
.bab-single-related__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 48px;
    border-bottom:   var(--bab-border);
}

.bab-single-related__label {
    font-size:      11px;
    font-weight:    900;
    letter-spacing: 0.28em;
}

.bab-single-related__all {
    font-family:     var(--bab-mono);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  0.18em;
    color:           #000;
    text-decoration: none;
    border-bottom:   2px solid #000;
    padding-bottom:  1px;
    transition:      opacity 0.15s;
}

.bab-single-related__all:hover { opacity: 0.45; }

/* Grid relacionados: 3 columnas */
.bab-single-related__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    border-left:           var(--bab-border);
}

.bab-related-item {
    border-right:  var(--bab-border);
    border-bottom: var(--bab-border);
    background:    #fff;
    color:         #000;
    overflow:      hidden;
    transition:    background 0.15s, color 0.15s;
    display:       flex;
    flex-direction: column;
}

/* Imagen del relacionado */
.bab-related-img-wrap {
    aspect-ratio: 4 / 5;
    overflow:     hidden;
    background:   #111;
    display:      flex;
    align-items:  center;
    justify-content: center;
    flex-shrink:  0;
}

.bab-related-img-wrap--empty {
    background:  #000;
    color:       #fff;
    font-family: var(--bab-mono);
    font-size:   60px;
    font-weight: 700;
    opacity:     0.12;
}

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

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

/* Content del relacionado */
.bab-related-content {
    padding:        20px 20px 24px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex-grow:      1;
}

.bab-related-title {
    font-family:    var(--bab-sans);
    font-weight:    900;
    font-size:      clamp(1rem, 2vw, 1.7rem);
    line-height:    0.95;
    letter-spacing: -0.025em;
    flex-grow:      1;
}

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

.bab-related-subtitle {
    font-size:   12px;
    opacity:     0.6;
    line-height: 1.4;
}

/* Footer del relacionado (reutiliza clases del frontend.css) */
.bab-related-content .bab-footer {
    border-top:     2px solid #000;
    padding-top:    12px;
    margin-top:     auto;
    transition:     border-color 0.15s;
}

/* Hover relacionados */
.bab-related-item:hover { background: #000; color: #fff; }

.bab-related-item:hover .bab-index     { border-color: #fff; color: #fff; }
.bab-related-item:hover .bab-date,
.bab-related-item:hover .bab-author    { color: #fff; }
.bab-related-item:hover .bab-read-more { color: #fff; border-bottom-color: #fff; }
.bab-related-item:hover .bab-footer    { border-top-color: #fff; }
.bab-related-item:hover .bab-related-subtitle { color: #fff; }

/* ── Responsive ─────────────────────────────────────────── */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
    .bab-single-header__top,
    .bab-single-title,
    .bab-single-subtitle,
    .bab-single-content,
    .bab-single-related__header,
    .bab-single-nav__item {
        padding-left:  32px;
        padding-right: 32px;
    }
}

/* Mobile ≤ 700px */
@media (max-width: 700px) {
    .bab-single-header__top {
        flex-direction: column;
        align-items:    flex-start;
        gap:            8px;
        padding:        12px 20px;
    }

    .bab-single-title {
        font-size:    clamp(2.2rem, 11vw, 4rem);
        padding:      28px 20px 24px;
        line-height:  0.92;
    }

    .bab-single-subtitle {
        font-size: 16px;
        padding:   14px 20px 18px;
    }

    .bab-single-content {
        padding:      40px 20px 48px;
    }

    .bab-single-content__inner {
        padding-left: 16px;
        border-left-width: 2px;
    }

    .bab-single-content__inner p { font-size: 17px; }

    .bab-single-nav__inner { grid-template-columns: 1fr; }

    .bab-single-nav__item {
        padding: 20px;
        gap: 14px;
    }

    .bab-single-nav__item--prev { border-right: none; border-bottom: 2px solid #000; }
    .bab-single-nav__item--next { border-left: none; justify-content: flex-start; }

    .bab-single-related__header { padding: 14px 20px; }
    .bab-single-related__grid   { grid-template-columns: 1fr; }

    .bab-single-related__grid .bab-related-img-wrap { aspect-ratio: 16 / 9; }
}