/* by osmy — La pausa.
   Requiere tokens.css.
*/

body.os-site .os-pause {
  background: var(--os-cream);
}

/* ---------- LAYOUT ---------- */

body.os-site .os-pause__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(20rem, 0.95fr);

  gap: clamp(
    var(--os-space-7),
    7vw,
    var(--os-space-10)
  );

  align-items: center;
}

/* ---------- CONTENT ---------- */

body.os-site .os-pause__content {
  min-width: 0;
}

body.os-site .os-pause__content h2 {
  max-width: 12ch;
  margin: 0 0 var(--os-space-6);

  font-size: clamp(
    2.75rem,
    2rem + 3vw,
    4.5rem
  );

  line-height: 1.02;
}

body.os-site .os-pause__content h2 em {
  color: var(--os-wine);

  font-style: italic;
  font-weight: var(--os-weight-regular);
}

/* ---------- BODY TEXT ---------- */

body.os-site .os-pause__text {
  max-width: 43ch;

  margin: 0;

  color: var(--os-color-text-secondary);

  font-size: var(--os-type-lead);
  line-height: 1.55;
}

/* ---------- MEDIA ---------- */

body.os-site .os-pause__media {
  position: relative;

  width: 100%;
  max-width: 31rem;

  justify-self: end;

  margin: 0;

  overflow: hidden;

  border-radius: var(--os-radius-lg);
}

/* Placeholder temporal */

body.os-site .os-pause__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  aspect-ratio: 4 / 5;

  padding: var(--os-space-6);

  border: 1px solid var(--os-color-border);

  background: var(--os-paper-2);

  text-align: center;
}

body.os-site .os-pause__image-placeholder span {
  color: var(--os-wine);

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  font-weight: var(--os-weight-semibold);
  line-height: 1.5;

  letter-spacing: 0.04em;
}

/* ---------- REAL IMAGE ---------- */

body.os-site .os-pause__media img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 5;

  object-fit: cover;
}

/* ---------- TABLET ---------- */

@media (max-width: 900px) {

  body.os-site .os-pause__inner {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(18rem, 0.8fr);

    gap: var(--os-space-7);
  }

  body.os-site .os-pause__content h2 {
    font-size: clamp(
      2.5rem,
      5vw,
      3.75rem
    );
  }

}

/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

  body.os-site .os-pause__inner {
    grid-template-columns: 1fr;

    gap: var(--os-space-7);
  }

  body.os-site .os-pause__content h2 {
    max-width: 13ch;

    margin-bottom: var(--os-space-5);
  }

  body.os-site .os-pause__content h2 br {
    display: none;
  }

  body.os-site .os-pause__text {
    max-width: 36rem;
  }

  body.os-site .os-pause__media {
    max-width: none;

    justify-self: stretch;
  }

  body.os-site .os-pause__image-placeholder,
  body.os-site .os-pause__media img {
    aspect-ratio: 4 / 5;
  }

}