.mamufse-configurable-hero {
  box-sizing: border-box;
  margin-block: 0;
  padding-block: clamp(2rem, 5vw, 5rem);
  width: 100%;
}

.mamufse-configurable-hero__intro {
  border-top: 1px solid var(--mamufse-border, #deded9);
  margin: 0 auto clamp(1.5rem, 3vw, 2.75rem);
  max-width: var(--wp--style--global--wide-size, 1340px);
  padding-top: 1rem;
}

.mamufse-configurable-hero__eyebrow,
.mamufse-configurable-hero__categories,
.mamufse-configurable-hero__meta {
  font-family: var(--wp--preset--font-family--heading, sans-serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mamufse-configurable-hero__eyebrow { color: var(--mamufse-accent, #3155ff); margin: 0 0 .45rem; }
.mamufse-configurable-hero__intro h2 {
  color: var(--mamu-hero-heading-color, var(--mamufse-contrast, #111));
  font-family: var(--mamu-hero-font);
  font-size: clamp(2rem, 6vw, var(--mamu-hero-heading));
  margin: 0;
  max-width: 16ch;
}

.mamufse-configurable-hero__posts {
  display: grid;
  gap: 4px;
  height: var(--mamu-hero-height);
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size, 1340px);
}

.mamufse-configurable-hero__post {
  background: #151515;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.mamufse-configurable-hero__media,
.mamufse-configurable-hero__media::after,
.mamufse-configurable-hero__media img,
.mamufse-configurable-hero__placeholder { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.mamufse-configurable-hero__media::after {
  background: linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--mamu-hero-overlay) var(--mamu-hero-overlay-opacity), transparent) 100%);
  content: "";
}
.mamufse-configurable-hero__media img { object-fit: cover; transition: transform 550ms cubic-bezier(.2,.7,.2,1); }
.mamufse-configurable-hero__post:hover .mamufse-configurable-hero__media img { transform: scale(1.035); }
.mamufse-configurable-hero__placeholder { background: linear-gradient(135deg, #303237, #15171a); }

.mamufse-configurable-hero__content {
  bottom: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  left: 0;
  max-height: 100%;
  padding: clamp(1rem, 2.2vw, 2rem);
  position: absolute;
  right: 0;
  z-index: 2;
}

.mamufse-configurable-hero__categories {
  color: #cbd3ff;
  line-height: 1.35;
  margin-bottom: .65rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mamufse-configurable-hero__categories a,
.mamufse-configurable-hero__content h3 a,
.mamufse-configurable-hero__more { color: inherit !important; text-decoration: none; }
.mamufse-configurable-hero__content h3 {
  font-family: var(--mamu-hero-font);
  font-size: clamp(1rem, 2vw, var(--mamu-hero-post-title)) !important;
  line-height: 1.08;
  margin: 0;
}
.mamufse-configurable-hero__meta {
  align-items: center;
  color: rgb(255 255 255 / 72%);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
  margin-top: .8rem;
}
.mamufse-configurable-hero__more { border-bottom: 1px solid currentColor; color: #fff !important; }

/* Principal a la izquierda; el resto se organiza en una grilla a la derecha. */
.mamufse-configurable-hero.is-layout-split .mamufse-configurable-hero__posts { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.mamufse-configurable-hero.is-layout-split .is-post-1 { grid-column: 1 / 3; grid-row: 1 / -1; }
.mamufse-configurable-hero.is-layout-split.has-6-posts .mamufse-configurable-hero__posts,
.mamufse-configurable-hero.is-layout-split.has-7-posts .mamufse-configurable-hero__posts,
.mamufse-configurable-hero.is-layout-split.has-8-posts .mamufse-configurable-hero__posts { grid-template-rows: repeat(3, 1fr); }

/* Mosaico deliberadamente irregular, sin filas implícitas de altura cero. */
.mamufse-configurable-hero.is-layout-mosaic .mamufse-configurable-hero__posts {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.mamufse-configurable-hero.is-layout-mosaic .is-post-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.mamufse-configurable-hero.is-layout-mosaic.has-4-posts .is-post-2 { grid-column: 3 / 5; }
.mamufse-configurable-hero.is-layout-mosaic:is(.has-6-posts, .has-7-posts) .mamufse-configurable-hero__posts {
  grid-template-columns: repeat(5, 1fr);
}
.mamufse-configurable-hero.is-layout-mosaic:is(.has-6-posts, .has-7-posts) .is-post-1 { grid-column: 1 / 3; }
.mamufse-configurable-hero.is-layout-mosaic.has-8-posts .mamufse-configurable-hero__posts {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.mamufse-configurable-hero.is-layout-mosaic.has-8-posts .is-post-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
}

/* Todo queda contenido en un único rectángulo de proporciones uniformes. */
.mamufse-configurable-hero.is-layout-compact .mamufse-configurable-hero__posts { grid-auto-columns: 1fr; grid-auto-flow: column; grid-template-rows: 1fr; }
.mamufse-configurable-hero.is-layout-compact .mamufse-configurable-hero__content h3 { font-size: clamp(.95rem, 1.45vw, calc(var(--mamu-hero-post-title) * .78)) !important; }
.mamufse-configurable-hero.is-layout-grid .mamufse-configurable-hero__posts { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }

@media (max-width: 900px) {
  .mamufse-configurable-hero__posts { height: auto; }
  .mamufse-configurable-hero:is(.is-layout-split, .is-layout-mosaic, .is-layout-compact, .is-layout-grid) .mamufse-configurable-hero__posts { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .mamufse-configurable-hero:is(.is-layout-split, .is-layout-mosaic) :is(.is-post-1, .is-post-2) { grid-column: auto; grid-row: auto; }
  .mamufse-configurable-hero__post { min-height: 260px; }
  .mamufse-configurable-hero__post.is-post-1 { grid-column: 1 / -1 !important; min-height: min(65vh, 520px); }
}

@media (max-width: 600px) {
  .mamufse-configurable-hero:is(.is-layout-split, .is-layout-mosaic, .is-layout-compact, .is-layout-grid) .mamufse-configurable-hero__posts { display: block; }
  .mamufse-configurable-hero__post { min-height: 240px; }
  .mamufse-configurable-hero__post + .mamufse-configurable-hero__post { margin-top: 4px; }
  .mamufse-configurable-hero__post.is-post-1 { min-height: min(68vh, 500px); }
}