.interview-wrapper {
  color: var(--color-grey-darker);
}
.interview-wrapper iframe {
  border-radius: 24px;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}
.interview-wrapper .hero {
  background-color: var(--color-grey-lighter);
  padding-block: 48px;
}
.interview-wrapper .hero p, .interview-wrapper .hero h1 {
  margin: 0;
  line-height: 1.15;
}
.interview-wrapper .hero .container {
  display: grid;
  gap: 12px;
}
.interview-wrapper h2 {
  font-size: 21px;
  font-weight: 500;
  color: var(--color-grey);
}
.interview-wrapper section:not(:first-child) {
  margin-top: 48px;
}
.interview-wrapper .about {
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-blue-darker);
}
@media (max-width: 800px) {
  .interview-wrapper .about {
    font-size: 19px;
  }
}
.interview-wrapper .transcript .text {
  max-height: 500px;
  overflow: auto;
  font-family: var(--font-family-primary);
  font-size: 17px;
  color: var(--color-grey-dark);
  padding: 24px;
  border-radius: 24px;
  border: solid 1px var(--color-grey-light);
  margin-bottom: 48px;
}
.interview-wrapper .interview-card {
  display: grid;
  grid-template-areas: "image   image" "title   title" "guest   duration";
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr auto;
  height: 100%;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-out;
  color: var(--color-grey-darker);
}
.interview-wrapper .interview-card p {
  margin: 0;
}
.interview-wrapper .interview-card .image {
  display: grid;
  grid-area: image;
  margin-inline: -24px;
  margin-top: -24px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  overflow: hidden;
}
.interview-wrapper .interview-card .image > * {
  grid-area: 1/1;
}
.interview-wrapper .interview-card .image .thumbnail,
.interview-wrapper .interview-card .image .thumbnail-hover {
  transition: opacity 0.3s ease-out;
}
@media (hover: hover) {
  .interview-wrapper .interview-card:has(.thumbnail-hover):not(:hover) .thumbnail-hover {
    opacity: 0;
  }
  .interview-wrapper .interview-card:has(.thumbnail-hover):hover .thumbnail {
    opacity: 0;
  }
}
@media not (hover: hover) {
  .interview-wrapper .interview-card .thumbnail-hover {
    display: none;
  }
}
.interview-wrapper .interview-card img {
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}
.interview-wrapper .interview-card .title {
  grid-area: title;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  transition: all 0.3s ease-out;
}
.interview-wrapper .interview-card .guest {
  grid-area: guest;
  align-self: end;
  font-family: var(--font-family-primary);
  font-weight: 550;
  font-size: 17px;
  line-height: 1;
}
.interview-wrapper .interview-card .guest .role {
  font-size: 14px;
}
.interview-wrapper .interview-card .duration {
  grid-area: duration;
  place-self: end;
  font-family: var(--font-family-primary);
  font-weight: 550;
  font-size: 14px;
  color: var(--color-grey-dark);
  line-height: 1;
}
.interview-wrapper .interview-card .duration:before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.18794 0.679565C2.99136 0.679565 0.375977 3.29879 0.375977 6.50007C0.375977 9.70135 2.99136 12.3205 6.18794 12.3205C9.38452 12.3205 11.9999 9.70135 11.9999 6.50007C11.9999 3.29879 9.38452 0.679565 6.18794 0.679565ZM8.62897 8.94468L5.60675 7.08212V3.58982H6.47854V6.61648L9.09393 8.18802L8.62897 8.94468Z' fill='%23A9B9C7'/%3E%3C/svg%3E%0A");
  display: inline-block;
  -webkit-margin-end: 0.25em;
          margin-inline-end: 0.25em;
  vertical-align: middle;
}
.interview-wrapper .interview-card:hover {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
}
.interview-wrapper .interview-card:hover .title {
  color: var(--color-purple);
}
.interview-wrapper .interview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  list-style: none;
  padding: 0;
  align-items: stretch;
}
@media (max-width: 800px) {
  .interview-wrapper .interview-cards {
    grid-template-columns: auto;
  }
}
.interview-wrapper .trailer {
  grid-area: trailer;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background-size: cover;
}
.interview-wrapper .trailer > * {
  grid-area: 1/1;
}
.interview-wrapper .trailer button {
  border-radius: 99px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 0.5em;
  border: none;
  padding: 0.25em;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-blue-darker);
  cursor: pointer;
  transition: color 0.15s ease-out;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.interview-wrapper .trailer button svg * {
  transition: none;
}
.interview-wrapper .trailer button span {
  -webkit-margin-start: 0.75em;
          margin-inline-start: 0.75em;
}
.interview-wrapper .trailer button:hover {
  color: var(--color-purple-dark);
}
.interview-wrapper.single .hero {
  color: var(--color-blue-darker);
  text-align: center;
}
.interview-wrapper.single .hero .details {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
@media (max-width: 800px) {
  .interview-wrapper.single .hero .details {
    flex-direction: column;
    align-items: center;
    order: 1;
  }
}
@media (max-width: 800px) {
  .interview-wrapper.single .hero .details .share-links {
    margin-top: 24px;
  }
}
.interview-wrapper.single .hero .details .share-links a {
  color: var(--color-blue-darker);
  border: solid 1px currentColor;
  background-color: var(--color-white);
}
.interview-wrapper.single .hero .details .share-links a:hover {
  color: var(--color-purple-darker);
}
.interview-wrapper.single .hero .details .share-links a path {
  fill: currentColor;
  transition: none;
}
.interview-wrapper.single .hero .guest {
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 400;
}
.interview-wrapper.single .hero .embed {
  margin-top: 24px;
}
.interview-wrapper.single .hero .label {
  color: currentColor;
  font-size: 12px;
}
.interview-wrapper.archive .hero .container {
  display: grid;
  grid-template-areas: ".          trailer" "logo       trailer" "text       trailer" ".          trailer";
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) {
  .interview-wrapper.archive .hero .container {
    grid-template-areas: "logo" "text" "trailer";
    grid-template-columns: auto;
  }
}
.interview-wrapper.archive .hero h1 {
  grid-area: logo;
}
.interview-wrapper.archive .hero .text {
  grid-area: text;
}
.interview-wrapper.archive .episodes {
  margin-bottom: 48px;
}
/*# sourceMappingURL=interviews.css.map */