/* Next physical event on the storefront home. */
.ms-event-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 11px;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 223, 90, 0.42);
  border-left: 4px solid var(--ms-yellow-500);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ms-white);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ms-event-chip:hover,
.ms-event-chip:focus-visible {
  border-color: rgba(255, 223, 90, 0.82);
  background: rgba(255, 255, 255, 0.16);
  color: var(--ms-white);
  outline: 0;
  transform: translateY(-1px);
}

.ms-event-chip span {
  color: var(--ms-yellow-400);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.ms-event-chip strong {
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-event-chip svg,
.ms-event-band__actions svg,
.ms-event-band__meta svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ms-event-chip svg {
  width: 18px;
  height: 18px;
  color: var(--ms-yellow-400);
}

.ms-event-band {
  background: linear-gradient(100deg, var(--ms-blue-950), var(--ms-blue-800) 58%, #0b7f80);
  color: var(--ms-white);
}

.ms-event-band__inner {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 132px;
  padding-block: 18px;
}

.ms-event-band__date {
  display: grid;
  place-items: center;
  align-content: center;
  width: 74px;
  height: 82px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-top: 5px solid var(--ms-yellow-500);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
}

.ms-event-band__date span {
  color: var(--ms-yellow-400);
  font-size: 0.7rem;
  font-weight: 900;
}

.ms-event-band__date strong {
  font-size: 2rem;
  line-height: 1;
}

.ms-event-band__content h2 {
  margin: 1px 0 2px;
  color: var(--ms-white);
  font-size: 1.45rem;
  line-height: 1.08;
}

.ms-event-band__eyebrow,
.ms-event-band__subtitle {
  margin: 0;
}

.ms-event-band__eyebrow {
  color: var(--ms-yellow-400);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ms-event-band__subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

.ms-event-band__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 9px;
}

.ms-event-band__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 700;
}

.ms-event-band__meta svg {
  width: 16px;
  height: 16px;
  color: var(--ms-yellow-400);
}

.ms-event-band__actions {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 220px;
}

.ms-event-band__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 7px;
  background: var(--ms-yellow-500);
  color: var(--ms-blue-950);
  font-weight: 850;
  text-decoration: none;
}

.ms-event-band__primary:hover,
.ms-event-band__primary:focus-visible {
  background: var(--ms-white);
  color: var(--ms-blue-950);
  outline: 0;
}

.ms-event-band__primary svg {
  width: 17px;
  height: 17px;
}

.ms-event-band__instagram,
.ms-event-band__contact {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.76rem;
  font-weight: 700;
  text-underline-offset: 3px;
}

.ms-event-band__instagram:hover,
.ms-event-band__instagram:focus-visible,
.ms-event-band__contact:hover,
.ms-event-band__contact:focus-visible {
  color: var(--ms-yellow-400);
}

@media (max-width: 820px) {
  .ms-event-band__inner {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    padding-block: 16px;
  }

  .ms-event-band__date {
    width: 62px;
    height: 72px;
  }

  .ms-event-band__date strong {
    font-size: 1.7rem;
  }

  .ms-event-band__actions {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: start;
    min-width: 0;
    padding-left: 76px;
  }

  .ms-event-band__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .ms-event-chip {
    width: 100%;
  }

  .ms-event-band__content h2 {
    font-size: 1.22rem;
  }

  .ms-event-band__subtitle {
    font-size: 0.8rem;
  }

  .ms-event-band__meta {
    display: grid;
    gap: 5px;
  }

  .ms-event-band__actions {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .ms-event-band__primary {
    width: 100%;
  }

  .ms-event-band__contact {
    grid-column: auto;
  }
}