/* =============================================================
   Casona San José — Editorial Section
   Grid imagen + prose alternante. Flip via .csn-ed--flip.
   Fondo configurable: base / alt / soft.
   Referencia: EditorialSection.jsx del design system.
   ============================================================= */


/* -----------------------------------------------------------
   SECCIÓN — fondo por modificador
   ----------------------------------------------------------- */

.csn-ed {
  padding-block: var(--section-padding-y);
  background: var(--color-piedra);        /* default = base */
}

.csn-ed--base  { background: var(--color-piedra);     }
.csn-ed--alt   { background: var(--color-piedra-alt); }
.csn-ed--soft  { background: var(--color-blanco);     }


/* -----------------------------------------------------------
   INNER — grid 6+6, centrado verticalmente
   ----------------------------------------------------------- */

.csn-ed__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* FLIP: imagen a la derecha via direction trick */
.csn-ed--flip .csn-ed__inner {
  direction: rtl;
}

.csn-ed--flip .csn-ed__media,
.csn-ed--flip .csn-ed__body {
  direction: ltr;
}

@media (max-width: 880px) {
  .csn-ed__inner,
  .csn-ed--flip .csn-ed__inner {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}


/* -----------------------------------------------------------
   IMAGEN — aspect-ratio 4/5 (portrait, para énfasis visual)
   ----------------------------------------------------------- */

.csn-ed__media {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}


/* -----------------------------------------------------------
   BODY — eyebrow + título + prose
   ----------------------------------------------------------- */

.csn-ed__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 16px 0 28px;
  text-wrap: balance;
  color: var(--color-noche);
}

.csn-ed__title em {
  font-style: italic;
}

.csn-ed__prose {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--leading-relaxed);
  color: var(--color-noche-suave);
  max-width: 52ch;
}

.csn-ed__prose p {
  margin: 0;
}

.csn-ed__prose p + p {
  margin-block-start: 18px;
}