/* russo-one-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/russo-one-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

h1, h2 {
  font-family: Russo One;
}

h1 { padding: 0; margin: 0; }
h2 { margin-top: 2rem; }

body {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 1rem;
}

footer {
  border-top: 5px solid #528fdb;
  padding: 2rem 0;
  margin-top: 2rem;
}

.episode {
  padding: 2rem 2rem 2rem 2rem;
  border: 1px solid #ccc;
  margin: 2rem 0;
  display: grid;
  grid-template-areas: "title duration date" "summary summary summary" "audio audio audio";
  grid-template-columns: auto auto 1fr;
  gap: 1rem;
}

.episode:nth-child(3n)     { box-shadow: 0 0 20px 5px #528fdb; }
.episode:nth-child(3n + 1) { box-shadow: 0 0 20px 5px #ed7465; }
.episode:nth-child(3n + 2) { box-shadow: 0 0 20px 5px #f9e744; }

.episode-title { grid-area: title; }
.episode-date { grid-area: date; text-align: right; }
.episode-duration { grid-area: duration; }
.episode-audio { grid-area: audio; }
.episode-summary { grid-area: summary; }

.episode-audio audio { width: 100%; }

.episode-title {
  font-weight: bold;
}

@media (max-width: 700px) {
  .episode {
    grid-template-areas: "title title" "date duration" "summary summary" "audio audio";
    grid-template-columns: auto 1fr;
  }
  .episode-date { text-align: left; }
}

.episode-duration::before { content: "•"; padding-right: 1rem; }

.episode-source {
  padding: 1rem 0;
}

.episode-description ul {
  list-style-type: disc;
  padding-left: 1rem;
}

.podcast-header {
  padding-top: 1rem;
  display: grid;
  grid-template-areas: "title thumbnail" "description thumbnail";
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

.episode-metadata {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}

.episode-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.episode-keyword {
  font-family: monospace;
  background-color: #f9e744;
  padding: 0.5rem 1rem;
}

.podcast-title { grid-area: title; }
.podcast-description { grid-area: description; }
.podcast-thumbnail { grid-area: thumbnail; max-width: 200px; box-shadow: 0 0 5px #aaa; }

.podcast-links { display: flex; flex-wrap: wrap; gap: 2rem; }
.podcast-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.podcast-links img { width: 2rem; }