/* =========================================
   USM — LA28 & Beyond Timeline
========================================= */

.usm-la28 {
  --la28-surface: var(--surface-dark, #111111);
  --la28-text: var(--text-on-dark, #FFFFFF);
  --la28-muted: rgba(255, 255, 255, 0.62);
  --la28-line: rgba(17, 17, 17, .08);

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;

  padding-block:
    clamp(40px, 3vw, 72px)
    clamp(72px, 8vw, 140px);
  background: var(--la28-surface);
  color: var(--la28-text);
}

/* =========================================
   Inner container
========================================= */

.usm-la28__inner {
  position: relative;
  z-index: 1;

  width: min(var(--site-width), var(--container-lg));
  margin-inline: auto;
}

/* =========================================
   Header
========================================= */

.usm-la28__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(300px, .75fr);
  column-gap: var(--space-4);
  align-items: start;
}

.usm-la28__eyebrow {
  grid-column: 1 / -1;

  margin: 0 0 var(--space-3);

  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--w-700);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
}

.usm-la28__headline {
  max-width: 11ch;
  margin: 0;
  grid-column: 1;

  font-family: var(--font-display);
  font-size: var(--heading-xl);
  font-weight: var(--w-700);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.usm-la28__content {
  grid-column: 2;
  align-self: start;
  min-width: 0;
  max-width: 48ch;
}

.usm-la28__summary {
  max-width: 48ch;
  padding-bottom: .15em;

  color: var(--la28-muted);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--w-400);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.usm-la28__summary strong {
color: var(--la28-text);
font-weight: var(--w-700, 700);
}

.usm-la28__summary p {
  margin: 0;
}

.usm-la28__summary p + p {
  margin-top: 1em;
}

/* =========================================
   Content
========================================= */

.usm-la28 .usm-la28__logos {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: clamp(20px, 2vw, 32px);
  width: 100%;
  margin-top: clamp(24px, 2.5vw, 36px);
}

.usm-la28 .usm-la28__logo-item,
.usm-la28 .usm-la28__logo-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
}

.usm-la28 .usm-la28__logos img.usm-la28__logo {
  display: block;
  width: auto !important;
  height: 96px !important;
  max-width: 180px !important;
  max-height: 96px !important;
  object-fit: contain;
  opacity: 0.9;
}

.usm-la28__logo-link:hover .usm-la28__logo,
.usm-la28__logo-link:focus-visible .usm-la28__logo {
  opacity: 1;
}

.usm-la28__logo-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* =========================================
   Background X
========================================= */

.usm-la28__mark {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-260px, -10vw, -100px);

  /* Give the empty element a definite size */
  width: min(72vw, 1200px);
  height: auto;
  aspect-ratio: 1182.39 / 1216.85;

  background-color: var(--la28-text, #FFF);
  opacity: .08;

  -webkit-mask-image: url("../assets/usm-x-outline.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;

  mask-image: url("../assets/usm-x-outline.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;

  transform: translateY(-50%);
  pointer-events: none;
}

.usm-la28__inner {
  position: relative;
  z-index: 1;
}

/* =========================================
   Tablet
========================================= */

@media (max-width: 1100px) {
  .usm-la28 {
    padding-block: var(--section-padding-lg);
  }

  .usm-la28__header {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2);
  }

  .usm-la28__eyebrow,
  .usm-la28__headline,
  .usm-la28__content {
    grid-column: 1;
  }

  .usm-la28__content {
    max-width: 52ch;
  }

  .usm-la28__summary {
    max-width: 52ch;
    padding-bottom: 0;
  }
}

/* =========================================
   Mobile — vertical timeline
========================================= */

@media (max-width: 767px) {
  .usm-la28 {
    padding-block: var(--section-padding-lg);
  }

  .usm-la28__inner {
    width: var(--site-width);
  }

  .usm-la28__eyebrow {
    margin-bottom: var(--space-2);
  }

  .usm-la28__headline {
    max-width: 12ch;
    font-size: clamp(56px, 17vw, 84px);
  }

  .usm-la28__summary {
    font-size: var(--text-body);
  }
	
	.usm-la28__mark {
	  top: 55%;
	  right: -25vw;
	  width: 125vw;
	  height: auto;
	  opacity: .12;
	}
}

@media (max-width: 650px) {
  .usm-la28 .usm-la28__logos {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
  }

  .usm-la28 .usm-la28__logos img.usm-la28__logo {
    width: auto !important;
    height: 64px !important;
    max-width: 130px !important;
    max-height: 64px !important;
  }
}
/* =========================================
   Reduced motion
========================================= */

@media (prefers-reduced-motion: reduce) {
  .usm-la28.is-ready .usm-la28__progress,
  .usm-la28.is-ready .usm-la28__stage,
  .usm-la28.is-ready .usm-la28__dot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}