/* =========================================================
   THE podcast — FINAL EDITORIAL LAYOUT
========================================================= */

:root {
  --podcast-cream: #f7f5f0;
  --podcast-black: #111111;
  --podcast-grey: #777777;
  --podcast-line: #d8d5ce;
}


/* =========================================================
   PAGE
========================================================= */

.podcast-page {
  background: var(--podcast-cream);
  color: var(--podcast-black);
  min-height: 100vh;
  padding: 0 5vw 80px;
}


/* =========================================================
   HEADER — SMALL + CENTRED
========================================================= */

.podcast-header {
  max-width: 1200px;
  margin: 0 auto;

  padding: 38px 0 24px;

  text-align: center;

  border-bottom: 1px solid var(--podcast-line);
}

.podcast-header h1 {
  margin: 0;

  font-family:
    "Playfair Display",
    "Cormorant Garamond",
    serif;

  font-size: 42px;
  font-style: italic;
  font-weight: 400;

  line-height: 1;
  letter-spacing: -0.03em;
}

.podcast-count {
  display: inline-block;

  margin: 10px 0 0;

  font-family: "Cormorant Garamond", serif;
  font-size: 15px;

  color: var(--podcast-grey);
}

.podcast-intro {
  display: inline;

  margin-left: 12px;

  font-family: "Cormorant Garamond", serif;
  font-size: 15px;

  color: var(--podcast-grey);
}

/* =========================================================
   EDITORIAL TOOLBAR
========================================================= */

.editorial-toolbar {

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 14px;

  margin: 18px auto 0;

  padding: 12px 0 15px;

  border-bottom: 1px solid var(--podcast-line);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 15px;

  letter-spacing: 0.02em;
}

.editorial-toolbar a {

  color: var(--podcast-grey);

  text-decoration: none;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.editorial-toolbar a:hover {

  color: var(--podcast-black);

}

.editorial-toolbar a.active {

  color: var(--podcast-black);

  font-style: italic;

}

.editorial-toolbar span {

  color: #b4b0a9;

}


/* MOBILE */

@media (max-width: 768px) {

  .editorial-toolbar {

    gap: 9px;

    margin-top: 15px;

    padding: 10px 0 13px;

    font-size: 14px;

  }

}

/* =========================================================
   LATEST ARTICLES
========================================================= */

.podcast-latest {
  max-width: 1050px;
  margin: 0 auto;
}


/* =========================================================
   FIRST ARTICLE — SPECIAL FEATURE
========================================================= */

.podcast-feature:first-child {
  display: block;

  color: var(--podcast-black);
  text-decoration: none;

  padding: 75px 0 80px;
  margin-bottom: 0;

  border-bottom: 1px solid var(--podcast-line);
}


/* Quote */

.podcast-feature:first-child
.podcast-feature__quote {

  max-width: 680px;
  margin: 0 auto 20px;

  text-align: center;
}

.podcast-feature:first-child
.podcast-feature__quote p {

  margin: 0;

  font-family:
    "Playfair Display",
    "Cormorant Garamond",
    serif;

  font-size: clamp(30px, 3.4vw, 46px);

  font-style: italic;
  font-weight: 400;

  line-height: 1.16;

  letter-spacing: -0.025em;
}


/* Title + date */

.podcast-feature:first-child
.podcast-feature__meta {

  max-width: 320px;
  margin: 0 auto 28px;

  text-align: center;
}

.podcast-feature:first-child
.podcast-feature__meta h2 {

  margin: 0 0 5px;

  font-family: "Cormorant Garamond", serif;

  font-size: 23px;
  font-weight: 500;

  line-height: 1.15;
}

.podcast-feature:first-child
.podcast-feature__meta time {

  font-family: "Cormorant Garamond", serif;

  font-size: 15px;
  font-style: italic;

  color: var(--podcast-grey);
}


/* First image */

.podcast-feature:first-child
.podcast-feature__image {

  width: 48%;
  max-width: 540px;

  margin: 0 auto;

  overflow: hidden;
}

.podcast-feature:first-child
.podcast-feature__image img {

  display: block;

  width: 100%;
  height: 290px;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.podcast-feature:first-child:hover
.podcast-feature__image img {

  transform: scale(1.015);
}


/* =========================================================
   ARTICLES 2–10
   COMPACT EDITORIAL BLOCKS
========================================================= */

.podcast-feature:not(:first-child) {

  display: grid;

  grid-template-columns: 300px 1fr;

  grid-template-areas:
    "image quote"
    "image meta";

  column-gap: 55px;

  align-items: center;

  padding: 50px 0;

  margin: 0;

  border-bottom: 1px solid var(--podcast-line);

  color: var(--podcast-black);
  text-decoration: none;

  transition: opacity 0.3s ease;
}


/* -------------------------
   ALTERNATING SIDES
------------------------- */

/* Odd blocks after the first:
   IMAGE LEFT / TEXT RIGHT */

.podcast-feature:nth-child(odd) {

  grid-template-columns: 1fr 300px;

  grid-template-areas:
    "quote image"
    "meta image";
}


/* Even blocks:
   IMAGE LEFT / TEXT RIGHT */

.podcast-feature:nth-child(even) {

  grid-template-columns: 300px 1fr;

  grid-template-areas:
    "image quote"
    "image meta";
}


/* -------------------------
   IMAGE
------------------------- */

.podcast-feature:not(:first-child)
.podcast-feature__image {

  grid-area: image;

  width: 100%;

  overflow: hidden;
}

.podcast-feature:not(:first-child)
.podcast-feature__image img {

  display: block;

  width: 100%;
  height: 210px;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.podcast-feature:not(:first-child):hover
.podcast-feature__image img {

  transform: scale(1.015);
}


/* -------------------------
   QUOTE
------------------------- */

.podcast-feature:not(:first-child)
.podcast-feature__quote {

  grid-area: quote;

  max-width: 580px;

  margin: 0 0 15px;
}

.podcast-feature:not(:first-child)
.podcast-feature__quote p {

  margin: 0;

  font-family:
    "Playfair Display",
    "Cormorant Garamond",
    serif;

  font-size: 27px;

  font-style: italic;
  font-weight: 400;

  line-height: 1.2;

  letter-spacing: -0.015em;
}


/* -------------------------
   TITLE + DATE
------------------------- */

.podcast-feature:not(:first-child)
.podcast-feature__meta {

  grid-area: meta;

  max-width: 350px;
}

.podcast-feature:not(:first-child)
.podcast-feature__meta h2 {

  margin: 0 0 4px;

  font-family: "Cormorant Garamond", serif;

  font-size: 21px;
  font-weight: 500;

  line-height: 1.15;
}

.podcast-feature:not(:first-child)
.podcast-feature__meta time {

  font-family: "Cormorant Garamond", serif;

  font-size: 15px;
  font-style: italic;

  color: var(--podcast-grey);
}


/* =========================================================
   OLDER ARCHIVE
   SAME DESIGN AS ARTICLES 2–10
========================================================= */

.podcast-archive {

  max-width: 1050px;

  margin: 0 auto;
}


/* Every older article gets the same compact block */

.podcast-archive__item {

  display: grid;

  grid-template-columns: 300px 1fr;

  grid-template-areas:
    "image content";

  column-gap: 55px;

  align-items: center;

  padding: 50px 0;

  border-bottom: 1px solid var(--podcast-line);

  color: var(--podcast-black);

  text-decoration: none;

  transition: opacity 0.3s ease;
}


/* Alternate every other archive article */

.podcast-archive__item:nth-child(even) {

  grid-template-columns: 1fr 300px;

  grid-template-areas:
    "content image";
}


/* -------------------------
   ARCHIVE IMAGE
------------------------- */

.podcast-archive__image {

  grid-area: image;

  width: 100%;

  overflow: hidden;
}

.podcast-archive__image img {

  display: block;

  width: 100%;
  height: 210px;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.podcast-archive__item:hover
.podcast-archive__image img {

  transform: scale(1.015);
}


/* -------------------------
   ARCHIVE TEXT
------------------------- */

.podcast-archive__content {

  grid-area: content;

  max-width: 580px;
}

.podcast-archive__quote {

  margin: 0 0 15px;

  font-family:
    "Playfair Display",
    "Cormorant Garamond",
    serif;

  font-size: 27px;

  font-style: italic;
  font-weight: 400;

  line-height: 1.2;

  letter-spacing: -0.015em;
}

.podcast-archive__content h2 {

  margin: 0 0 4px;

  font-family: "Cormorant Garamond", serif;

  font-size: 21px;
  font-weight: 500;

  line-height: 1.15;
}

.podcast-archive__content time {

  font-family: "Cormorant Garamond", serif;

  font-size: 15px;

  font-style: italic;

  color: var(--podcast-grey);
}


/* =========================================================
   HOVER
========================================================= */

.podcast-latest:hover
.podcast-feature:not(:hover),

.podcast-archive:hover
.podcast-archive__item:not(:hover) {

  opacity: 0.72;
}


/* =========================================================
   FOOTER
========================================================= */

body:has(.podcast-page) footer {

  background: var(--podcast-cream) !important;

  color: var(--podcast-black) !important;
}

body:has(.podcast-page) footer a {

  color: var(--podcast-black) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .podcast-page {

    padding: 0 18px 60px;

  }


  /* -------------------------
     HEADER
  ------------------------- */

  .podcast-header {

    padding: 25px 0 18px;

  }

  .podcast-header h1 {

    font-size: 32px;

  }

  .podcast-count {

    font-size: 14px;

  }

  .podcast-intro {

    display: none;

  }


  /* -------------------------
     FIRST ARTICLE
  ------------------------- */

  .podcast-feature:first-child {

    padding: 55px 0 60px;

  }

  .podcast-feature:first-child
  .podcast-feature__quote p {

    font-size: 29px;

  }

  .podcast-feature:first-child
  .podcast-feature__meta h2 {

    font-size: 21px;

  }

  .podcast-feature:first-child
  .podcast-feature__image {

    width: 78%;

  }

  .podcast-feature:first-child
  .podcast-feature__image img {

    height: 205px;

  }


  /* -------------------------
     ARTICLES 2–10
  ------------------------- */

  .podcast-feature:not(:first-child) {

    display: grid;

    grid-template-columns: 115px 1fr;

    grid-template-areas:
      "image quote"
      "image meta";

    column-gap: 20px;

    padding: 32px 0;

  }


  /* Remove desktop alternating layout */

  .podcast-feature:nth-child(odd),
  .podcast-feature:nth-child(even) {

    grid-template-columns: 115px 1fr;

    grid-template-areas:
      "image quote"
      "image meta";

  }


  .podcast-feature:not(:first-child)
  .podcast-feature__image {

    width: 115px;

  }

  .podcast-feature:not(:first-child)
  .podcast-feature__image img {

    height: 145px;

  }

  .podcast-feature:not(:first-child)
  .podcast-feature__quote p {

    font-size: 20px;

  }

  .podcast-feature:not(:first-child)
  .podcast-feature__meta h2 {

    font-size: 18px;

  }

  .podcast-feature:not(:first-child)
  .podcast-feature__meta time {

    font-size: 14px;

  }


  /* -------------------------
     OLDER ARCHIVE
  ------------------------- */

  .podcast-archive {

    margin-top: 0;

  }

  .podcast-archive__item {

    display: grid;

    grid-template-columns: 115px 1fr;

    grid-template-areas:
      "image content";

    column-gap: 20px;

    padding: 32px 0;

  }


  /* Remove domino reversal on mobile */

  .podcast-archive__item:nth-child(even) {

    grid-template-columns: 115px 1fr;

    grid-template-areas:
      "image content";

  }


  .podcast-archive__image {

    width: 115px;

  }

  .podcast-archive__image img {

    height: 145px;

  }

  .podcast-archive__content {

    max-width: 100%;

  }

  .podcast-archive__quote {

    font-size: 20px;

  }

  .podcast-archive__content h2 {

    font-size: 18px;

  }

  .podcast-archive__content time {

    font-size: 14px;

  }

}

/* =========================================================
   MOBILE — LIGHTER EDITORIAL FEEL
========================================================= */

@media (max-width: 768px) {

  /* Smaller overall typography */

  .podcast-feature:not(:first-child)
  .podcast-feature__quote p,

  .podcast-archive__quote {
    font-size: 18px;
    line-height: 1.25;
  }


  /* Smaller titles */

  .podcast-feature:not(:first-child)
  .podcast-feature__meta h2,

  .podcast-archive__content h2 {
    font-size: 17px;
    line-height: 1.15;
  }


  /* Smaller dates */

  .podcast-feature:not(:first-child)
  .podcast-feature__meta time,

  .podcast-archive__content time {
    font-size: 13px;
  }


  /* Tighter blocks */

  .podcast-feature:not(:first-child),
  .podcast-archive__item {
    padding: 26px 0;
  }


  /* Slightly smaller images */

  .podcast-feature:not(:first-child)
  .podcast-feature__image,

  .podcast-archive__image {
    width: 100px;
  }

  .podcast-feature:not(:first-child)
  .podcast-feature__image img,

  .podcast-archive__image img {
    height: 125px;
  }


  /* Tighter gap */

  .podcast-feature:not(:first-child),
  .podcast-archive__item {
    grid-template-columns: 100px 1fr;
    column-gap: 17px;
  }


  /* Keep the first article special,
     but don't let it dominate the phone */

  .podcast-feature:first-child {
    padding: 45px 0 50px;
  }

  .podcast-feature:first-child
  .podcast-feature__quote p {
    font-size: 26px;
    line-height: 1.18;
  }

  .podcast-feature:first-child
  .podcast-feature__image {
    width: 72%;
  }

  .podcast-feature:first-child
  .podcast-feature__image img {
    height: 175px;
  }

}