/* Shared page grid. The 70px rail keeps the approved icons beside the titles. */
@layer mobile-review-important {
  :root {
    --site-max-width: 1200px;
    --site-gutter: 24px;
    --site-icon-width: 52px;
    --site-column-gap: 18px;
    --site-rail: calc(var(--site-icon-width) + var(--site-column-gap));
  }

  html:root body.sala[data-editorial-layout] {
    --emv-page-width: var(--site-max-width);
    --emv-gutter: var(--site-gutter);
  }

  html:root body.sala[data-editorial-layout] :is(.contenedor, .cabecera-inner, .sala-inner, .esencia-reticula) {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--site-gutter)) !important;
    max-width: var(--site-max-width) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html:root body.sala[data-editorial-layout] #contenido > :not(.sala-hero) .contenedor,
  html:root body.sala[data-editorial-layout] #contenido .lectura > .lectura-inner,
  html:root body.sala[data-editorial-layout] #contenido .esencia-reticula,
  html:root body.sala[data-editorial-layout] #contenido > .contenedor {
    padding-inline-start: var(--site-rail) !important;
  }

  html:root body.sala[data-editorial-layout] #contenido .contenedor .contenedor {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  html:root body.sala[data-editorial-layout] #contenido .sala-hero .contenedor {
    position: relative;
    padding-inline: 0 !important;
  }

  html:root body.sala[data-editorial-layout].header-icon-proof #contenido .sala-hero-inner {
    grid-template-columns: var(--site-icon-width) minmax(0, 1fr) !important;
    column-gap: var(--site-column-gap) !important;
  }

  html:root body.sala[data-editorial-layout]:not(.header-icon-proof) #contenido .sala-hero-inner {
    padding-inline-start: var(--site-rail) !important;
  }

  html:root body.sala[data-editorial-layout] #contenido .sala-hero .subnav-v {
    margin-inline-start: var(--site-rail) !important;
    width: auto !important;
    justify-content: flex-start !important;
    text-align: start !important;
  }

  html:root body.sala[data-editorial-layout] #contenido :is(.lectura, .esencia-relato) :is(h2, h3, .grupo-intro, .atelier-portal-lead) {
    text-align: start !important;
  }

  html:root body.sala[data-editorial-layout] #contenido .atelier-portal-inner {
    max-width: var(--site-max-width) !important;
    padding-inline-start: var(--site-rail) !important;
    padding-inline-end: 0 !important;
  }

  /* The logo occupies the icon rail. Navigation and text start on the same line. */
  @media (min-width: 1101px) {
    html:root body.sala[data-editorial-layout] .cabecera .cabecera-inner {
      display: grid !important;
      grid-template-columns: var(--site-icon-width) minmax(0, 1fr) auto auto;
      grid-template-areas: "signature menu languages cafe";
      column-gap: var(--site-column-gap) !important;
      align-items: center;
    }

    html:root body.sala[data-editorial-layout] .cabecera .cabecera-firma { grid-area: signature; }
    html:root body.sala[data-editorial-layout] .cabecera .cabecera-firma img { width: 68px !important; height: auto !important; max-width: none !important; transform: translateX(-8px); }
    html:root body.sala[data-editorial-layout] .cabecera .cabecera-menu {
      grid-area: menu;
      justify-content: flex-start !important;
      margin-inline: 0 !important;
      gap: clamp(18px, 2vw, 28px) !important;
    }
    html:root body.sala[data-editorial-layout] .cabecera .idiomas { grid-area: languages; }
    html:root body.sala[data-editorial-layout] .cabecera .cabecera-cv {
      grid-area: cafe;
      justify-self: end;
      margin-inline: 0 !important;
    }
  }

  /* A narrow screen uses the full reading width rather than retaining the icon rail. */
  @media (max-width: 1100px) {
    html:root body.sala[data-editorial-layout] #contenido > :not(.sala-hero) .contenedor,
    html:root body.sala[data-editorial-layout] #contenido .lectura > .lectura-inner,
    html:root body.sala[data-editorial-layout] #contenido .esencia-reticula,
    html:root body.sala[data-editorial-layout] #contenido > .contenedor,
    html:root body.sala[data-editorial-layout] #contenido .atelier-portal-inner {
      padding-inline: 0 !important;
    }
    html:root body.sala[data-editorial-layout] #contenido .sala-hero .subnav-v { margin-inline-start: 0 !important; }
    html:root body.sala[data-editorial-layout]:not(.header-icon-proof) #contenido .sala-hero-inner { padding-inline-start: 0 !important; }
  }

  @media (max-width: 780px) {
    html:root body.sala[data-editorial-layout] { --site-icon-width: 32px; }
  }
}

@layer mobile-review-important {
  html:root body.sala[data-editorial-layout] #contenido .lectura--articulo > .lectura-inner {
    width:calc(100% - 2 * var(--site-gutter))!important;
    max-width:var(--site-max-width)!important;
  }
  html:root body.sala[data-editorial-layout] #contenido .criterium-prose,
  html:root body.sala[data-editorial-layout] #contenido .criterium-prose figure {margin-inline:0!important;}
  html:root body.sala[data-editorial-layout] #contenido .cafe-hero-heading {left:0!important;padding-inline:0!important;border:0!important;gap:18px!important;}
}