/* ============================================================
   BARNES Buenos Aires — Editorial (listado + artículo)
   Fiel a Demo-Editorial-Principal / Demo-Editorial-Articulo (comps v2).
   Posiciones/anchos: pt del comp × (1920/1980). Tipografía: pt = px (convención del sitio,
   tokens de tokens.css). Header y footer son los globales del sitio.

   [1] .ed-intro*   — listado: H1 + intro a la izquierda, ilustración a la derecha (sin foto)
   [2] .ed-heading  — "ARTÍCULOS" / "OTROS ARTÍCULOS"
   [3] .ed-grid / .ed-card* — grilla de cards: foto con el título encima (listado y "Otros")
   [4] .ed-hero*    — artículo: portada a sangre + título
   [5] .ed-body*    — artículo: texto (HTML del CMS)
   [6] .ed-share*   — artículo: "Compartir artículo" + 2 íconos
   [7] .ed-others   — artículo: "OTROS ARTÍCULOS" sobre fondo crema
   ============================================================ */

/* Texto corrido del comp: Raleway 16 con tracking +50 y paso de línea de 28pt × 1920/1980 =
   27.15px (mismos valores medidos que Art de Vivre). */
.ed-intro, .ed-body, .ed-empty, .ed-share {
    --ed-tracking: .05em;
    --ed-lh-px: 27.15px;
    --ed-lh: 1.697;
}

/* ===================== [1] INTRO DEL LISTADO ===================== */
/* Header position:absolute sobre el <main>: el espacio de arriba suma el alto REAL del header
   (--ed-hh, lo mide assets/js/editorial.js; 173px desktop en el CSS base) + 103px hasta el H1
   (mismo tope que la principal de Art de Vivre en el comp).
   Bloque: texto desde x=403.2pt (391px) hasta la ilustración en x=1051.9pt (1020px), ilustración
   579.3×317.2pt (561.8×307.6px). El bloque no está centrado en el comp (+26px a la derecha):
   caja centrada de 1243.6px con 52.8px de sangría izquierda reproduce las dos posiciones. */
:root { --ed-hh: 173px; }
.ed-intro {
    padding: calc(var(--ed-hh) + clamp(48px, 5.37vw, 103px)) var(--gutter) 0;
}
.ed-intro__grid {
    max-width: 1243.6px;
    margin-inline: auto;
    padding-left: clamp(0px, 2.75vw, 52.8px);
    display: grid;
    grid-template-columns: minmax(0, 629fr) minmax(0, 561.8fr);
    align-items: start;
}
.ed-intro__title {
    font-family: var(--ff-display);
    font-size: clamp(38.4px, 4.6vw, 64px);       /* 64px del comp */
    line-height: var(--lh-h2);
    color: var(--c-ink);
}
.ed-intro__text { margin-top: 34px; max-width: 560px; }
.ed-intro__text p {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--ed-lh);                   /* paso de 28pt del comp */
    letter-spacing: var(--ed-tracking);
    color: var(--c-ink);
}
.ed-intro__text p + p { margin-top: 9.7px; }     /* 38pt de paso entre párrafos = 28 + 10 */
.ed-intro__art { margin-top: 44.4px; }           /* tope de la ilustración: 52.7pt bajo el del H1 (medido sobre la caja de línea) */
.ed-intro__art img { width: 100%; height: auto; display: block; }

/* Cortes de línea del comp (<br class="ln">): solo donde entran; debajo el texto fluye. */
@media (max-width: 1279px) {
    .ed-intro .ln, .ed-intro .ln-hy { display: none; }
}
@media (min-width: 1280px) {
    .ed-intro .is-hard { white-space: nowrap; }
}

/* ===================== [2] TÍTULOS DE SECCIÓN ===================== */
/* Bauer 28px rojo, centrado, tracking +50 (medido: el ancho del comp = Bauer +.05em). */
.ed-heading {
    font-family: var(--ff-display);
    font-size: 28px;
    line-height: var(--lh-hero);
    letter-spacing: .05em;
    color: var(--c-accent);
    text-align: center;
}

/* ===================== [3] GRILLA + CARD ===================== */
/* 4 cards de 476.4×486.4pt (462×471.7px) casi a sangre: 17.9px a cada lado, 12.2px entre
   columnas, 15.3px entre filas. Tipografía y posición del título proporcionales al ancho de la
   card (unidades cqi): a 1920 dan los valores del comp y escalan juntas con la foto. */
.ed-list { padding: 142.6px 0 186px; }           /* título a 181.5pt de la última línea base de la intro; 186px de la última fila al footer */
.ed-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15.3px 12.2px;
    padding-inline: max(12px, 0.932vw);
    margin-top: 58.3px;                            /* línea base del título → tope de la grilla: 68.2pt */
}
.ed-card { container-type: inline-size; }
.ed-card__link {
    position: relative;
    display: block;
    aspect-ratio: 476.4 / 486.4;
    overflow: hidden;
    background: var(--c-hero-bg);
    color: var(--c-on-dark);
}
.ed-card__media { position: absolute; inset: 0; }
.ed-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s var(--ease);
}
.ed-card__link:hover .ed-card__media img,
.ed-card__link:focus-visible .ed-card__media img { transform: scale(1.05); }
/* Degradé inferior del comp (relevado fila por fila contra la foto original): gris que oscurece
   hacia negro, desde ~60% de la altura hasta 82% de opacidad abajo. */
.ed-card__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(90, 90, 90, 0) 45%,
        rgba(90, 90, 90, .03) 55%,
        rgba(196, 196, 196, .086) 63.7%,
        rgba(185, 185, 185, .133) 65.8%,
        rgba(183, 183, 183, .214) 69.9%,
        rgba(158, 158, 158, .302) 74%,
        rgba(134, 134, 134, .394) 78.1%,
        rgba(108, 108, 108, .48) 82.2%,
        rgba(84, 84, 84, .579) 86.3%,
        rgba(57, 57, 57, .653) 90.4%,
        rgba(34, 34, 34, .73) 94.5%,
        rgba(11, 11, 11, .807) 98.6%,
        rgba(0, 0, 0, .82) 100%);
}
/* Título: x = 49.9pt del borde (10.47% del ancho), última línea base a 56.5pt del pie (11.86%).
   Ancho máximo 9.443em = renglón más largo del comp ("inversión inmobiliaria", 263pt a 28pt):
   con text-wrap:balance reproduce los cortes del comp en cualquier tamaño. */
.ed-card__title {
    position: absolute; z-index: 1;
    left: 10.47cqi;
    right: 10.47cqi;
    bottom: calc(11.86cqi - 0.34em);
    max-width: 9.443em;
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(20px, 6.06cqi, 28px);
    line-height: var(--lh-hero);
    color: var(--c-on-dark);
    text-wrap: balance;
    /* Legibilidad sobre fotos claras (las portadas las elige el cliente): sombra suave, mismo
       recurso que el título del hero de la ficha de propiedad. */
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45), 0 0 2px rgba(0, 0, 0, .25);
}

/* Estado vacío del listado */
.ed-empty {
    margin-top: 58.3px;
    padding-inline: var(--gutter);
    text-align: center;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--ed-lh);
    letter-spacing: var(--ed-tracking);
    color: var(--c-ink);
}

/* 404 del artículo: header sólido arriba, mismo listado */
.ed-list--404 { padding-top: calc(var(--ed-hh) + clamp(48px, 5.37vw, 103px)); }
.ed-404-kicker {
    text-align: center;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-nav);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    margin-bottom: 12px;
}

/* ===================== [4] HERO DEL ARTÍCULO ===================== */
/* 1980×714.2pt → 1920×692px (mismo alto que el hero de las subsecciones de Art de Vivre). La foto
   del comp va sin oscurecido propio (verificado contra el archivo). Título Bauer 72px blanco,
   centrado, anclado abajo: última línea base a 114.4pt del pie del hero. */
.ed-hero {
    position: relative;
    min-height: clamp(440px, 36.07vw, 692.6px);
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    text-align: center;
    background: var(--c-hero-bg);
    overflow: hidden;
    padding: calc(var(--header-h) + 28px) var(--gutter) clamp(32px, 4.6vw, 88px);
}
.ed-hero__media { position: absolute; inset: 0; z-index: 0; }
.ed-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Oscurecido de los heros con foto del sitio (región, barrio): legibilidad del menú y del título
   con cualquier portada que cargue el CMS, también las claras. */
.ed-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.42) 100%);
}
.ed-hero__title { text-shadow: 0 2px 18px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4); }
.ed-hero__content { position: relative; z-index: 1; width: 100%; }
.ed-hero__title {
    max-width: 1200px;
    margin-inline: auto;
    color: var(--c-on-dark);                      /* base.css: hN → negro por default */
    font-size: clamp(32px, 3.75vw, 72px);         /* 72px del comp */
    line-height: var(--lh-hero);
    text-wrap: balance;
}

/* ===================== [5] TEXTO DEL ARTÍCULO ===================== */
/* Columna de texto 769.2pt (598.1 → 1367.3pt): ancho en px de texto (pt = px), así los renglones
   cortan donde corta el comp. Párrafos separados por un renglón en blanco (56pt de paso). */
.ed-body { padding: 102.6px var(--gutter) 0; }   /* primera línea a 110pt del pie del hero */
.ed-body__text {
    width: min(771px, 100%);
    margin-inline: auto;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--ed-lh);
    letter-spacing: var(--ed-tracking);
    color: var(--c-ink);
    overflow-wrap: break-word;
}
.ed-body__text > * + * { margin-top: var(--ed-lh-px); }
.ed-body__text h2 {
    font-family: var(--ff-display);
    font-size: var(--fs-card-title);
    line-height: var(--lh-card-title);
    letter-spacing: 0;
    color: var(--c-ink);
}
.ed-body__text * + h2 { margin-top: calc(var(--ed-lh-px) * 1.5); }
/* Subtítulo (h3: puntos numerados, preguntas frecuentes): texto del cuerpo en semibold, menor que
   el título (h2), pegado al párrafo que encabeza. */
.ed-body__text h3 {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--ed-lh);
    letter-spacing: var(--ed-tracking);
    color: var(--c-ink);
}
.ed-body__text h3 + * { margin-top: 6px; }
.ed-body__text strong, .ed-body__text b { font-weight: 600; }
.ed-body__text em, .ed-body__text i { font-style: italic; }
.ed-body__text a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.ed-body__text a:hover { color: var(--c-accent-d); }
.ed-body__text blockquote {
    padding-left: 24px;
    border-left: 1px solid var(--c-line);
    font-style: italic;
}
.ed-body__text blockquote > * + * { margin-top: var(--ed-lh-px); }
.ed-body__text ul, .ed-body__text ol { padding-left: 1.4em; }
.ed-body__text ul { list-style: disc; }
.ed-body__text ol { list-style: decimal; }
.ed-body__text li + li { margin-top: 4px; }
.ed-body__text img { max-width: 100%; height: auto; display: block; }
.ed-body__text figure img { margin-inline: auto; }
.ed-body__text figcaption {
    margin-top: 8px;
    font-size: var(--fs-nav);
    color: var(--c-ink-soft);
}
.ed-body__text .aligncenter { margin-inline: auto; }

/* ===================== [6] COMPARTIR ===================== */
/* Barra entre dos filetes (796.4pt de ancho, 49.5pt de alto): arranca 9.7pt antes del texto y
   termina 17.5pt después. Rótulo Raleway 14 a 17pt del borde; 2 íconos: círculo #202120 de
   25.7pt con anillo fino separado (29.2pt), centros a 39.3pt, último a 13.4pt del borde. */
.ed-share {
    width: min(771px, 100% - 2 * var(--gutter));   /* misma columna que el texto */
    margin: 56px auto 0;                           /* filete a 66pt de la última línea base */
}
.ed-share__bar {
    margin-left: -9.4px;
    margin-right: -17px;
    min-height: 48px;
    padding: 0 13px 0 16.5px;
    border-block: 1px solid var(--c-line);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ed-share__label {
    font-family: var(--ff-body);
    font-size: var(--fs-nav);
    letter-spacing: var(--ed-tracking);
    color: var(--c-ink);
}
.ed-share__icons { display: flex; align-items: center; gap: 9.1px; }
.ed-share__btn {
    width: 25px; height: 25px;
    margin: 2px;                                  /* lugar para el anillo exterior */
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #202120;
    color: var(--c-bg);
    box-shadow: 0 0 0 1.4px var(--c-bg), 0 0 0 2.1px #202120;
    transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ed-share__btn:hover,
.ed-share__btn:focus-visible {
    background: var(--c-accent);
    box-shadow: 0 0 0 1.4px var(--c-bg), 0 0 0 2.1px var(--c-accent);
}

/* ===================== [7] OTROS ARTÍCULOS ===================== */
/* Banda crema #f7f3f1 de 894.2pt: 83.6px bajo la barra de compartir, título a 79.7px de su borde,
   cards 70.2px bajo la línea base del título, 220px de las cards al footer. */
.ed-others {
    margin-top: 83.6px;
    padding: 80px 0 220px;
    background: var(--c-bg-alt);
}
.ed-others .ed-grid { margin-top: 61.6px; }     /* 72.4pt de la línea base del título */

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1023px) {
    :root { --ed-hh: 77px; }
    .ed-intro__grid { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
    .ed-intro__text { max-width: 640px; }
    /* Texto antes que la imagen en pantallas angostas (criterio del sitio en mobile). */
    .ed-intro__art { margin-top: 40px; max-width: 560px; }
    .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ed-list { padding-top: clamp(64px, 10vw, 120px); padding-bottom: clamp(80px, 12vw, 140px); }
    .ed-others { padding-bottom: clamp(80px, 12vw, 140px); }
}
@media (max-width: 599px) {
    .ed-grid { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); gap: 12px; }
    .ed-grid, .ed-empty { margin-top: 40px; }
    .ed-others .ed-grid { margin-top: 40px; }
    .ed-others { margin-top: 56px; padding-top: 56px; }
    .ed-body { padding-top: 56px; }
    .ed-share { margin-top: 48px; }
    .ed-share__bar { margin-inline: 0; padding: 0 2px 0 0; }   /* filetes al ancho del texto */
}