@import url("buttons.css");
@import url("pull-quotes.css");

/* HOMEPAGE */

.logo-strip {
  overflow: hidden; /* prevent logo strip from causing horizontal scroll */
  padding-top: 2px; /* keep top of pause button's focus outline visible despite overflow: hidden */
  padding-bottom: 48px; /* matches the height of the logo images themselves */
  margin-bottom: var(--spacing-8);
  position: relative;
}
.logo-strip-pause-btn {
  width: calc(var(--spacing-base) * 4.25); /* 2.125rem (34px) */
  height: calc(var(--spacing-base) * 4.25); /* 2.125rem (34px) */
  padding: 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--dsdl-cyan-60);
  border-radius: var(--button-border-radius);
  background-color: transparent;
  color: var(--dsdl-cyan-60);
}
.pause-icon {
  display: none;
}
.logo-strip-list {
  list-style: none;
  padding: 0;
  position: absolute;
  display: flex;
  align-items: center;
  animation-name: slide-to-the-left;
  animation-duration: 120s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: var(--playState, paused);
}
.logo-strip-list > li {
  height: 48px;
  margin-left: var(--spacing-5); /* 40px between logos */
}
.logo-strip img {
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .pause-icon {
    display: block;
  }
  .play-icon {
    display: none;
  }
  .logo-strip-list {
    --playState: running;
  }
}

@keyframes slide-to-the-left {
  from {
    translate: 0 0;
  }

  to {
    translate: -50% 0;
  }
}

@media (min-width: 768px) {
  .logo-strip-list {
    animation-duration: 180s;
  }
  .logo-strip-list > li {
    height: 48px;
    margin-left: calc(var(--spacing-base) * 12.5); /* 100px between logos */
  }
}

.gallery-description {
  margin-bottom: var(--spacing-5);
}
.gallery-cards {
  list-style: none;
  padding: 0;
  margin-bottom: calc(-1 * var(--spacing-3)); /* compensate for top margin of pull quote component */
}
.gallery-cards.row li {
  padding: 0 var(--spacing-3) var(--spacing-3);
}
.gallery-card {
  border: 1px solid var(--dsdl-gray-30);
  border-radius: 40px;
  height: 100%;
  padding: var(--spacing-3);
}
.gallery-card > h3 {
  color: var(--calitp-brand-blue);
  text-align: center;
}
.gallery-card > img {
  display: block;
  width: 100%;
  margin-top: var(--spacing-4);
}
@media (min-width: 768px) {
  .gallery-cards {
    margin-bottom: calc(-1 * var(--spacing-5));
  }
  .gallery-cards.row li {
    padding: 0 calc(var(--spacing-5) / 2) var(--spacing-5);
  }
  .gallery-card {
    padding: var(--spacing-5);
  }
}

.highlights {
  /* --bs-gutter-x: var(--spacing-1); */
  list-style: none;
  padding: 0;
}
.highlight {
  padding: 24px 40px;
  border: 1px solid var(--dsdl-gray-30);
  border-radius: 40px;
  margin-bottom: var(--spacing-2);
}
.highlight > h3 {
  color: var(--calitp-brand-blue);
  margin-top: 0;
  text-align: center;
}
.highlight > img {
  display: block;
  width: 100%;
  margin: var(--spacing-4) 0;
}