/* DS-013: token replacement for the featured "Typology Series" card.

   Accepted, the legacy `000--DS-013--featured-series` slice is dropped from the
   emitted legacy sheet and this file takes over the whole block family. The
   legacy rules hard-code the light palette (#1f4a44 ink, translucent white list
   rows), which the legacy dark theme never overrode for the schedule rows or the
   month headings. Under DS-012's system-preference dark appearance that left
   light text on translucent white and teal ink on a near-black page. Every color
   below names a token, so both appearances resolve from `tokens.css`. */

.post.featured-series {
  position: relative;
  /* The theme sizes `.post` at `width: 100%` below 900px with content-box
     sizing, so padding pushed the card past the viewport edge. */
  box-sizing: border-box;
  margin: 0 auto var(--tkc-space-8);
  padding: var(--tkc-space-6) var(--tkc-space-7) var(--tkc-space-7);
  max-width: 110rem;
  color: var(--tkc-color-text);
  background-color: var(--tkc-color-bg);
  background-image: linear-gradient(
    135deg,
    var(--tkc-color-bg) 0%,
    color-mix(in srgb, var(--tkc-color-accent) 8%, var(--tkc-color-bg)) 45%,
    color-mix(in srgb, var(--tkc-color-focus) 8%, var(--tkc-color-bg)) 100%
  );
  border: thin solid var(--tkc-color-border);
  border-radius: var(--tkc-radius-md);
  box-shadow: var(--tkc-shadow-lg);
  overflow: hidden;
}

/* Accent bar down the left edge. */
.post.featured-series::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(var(--tkc-space-1) * 1.5);
  background-image: linear-gradient(180deg, var(--tkc-color-accent-strong), var(--tkc-color-accent));
}

/* The post has an empty title and no useful byline on the featured card. */
.post.featured-series .post-header,
.post.featured-series .post-meta {
  display: none;
}

/* The section's background comes from the card, not from the page. */
.post.featured-series .post-content {
  background-color: transparent;
}

/* Framed hero banner. */
.post.featured-series .post-content p:first-child img,
.post.featured-series .post-content img[src*="typology_hero_banner"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--tkc-space-5);
  border-radius: var(--tkc-radius-md);
  box-shadow: var(--tkc-shadow-md);
  transition:
    transform var(--tkc-motion-base) ease,
    box-shadow var(--tkc-motion-base) ease;
}

.post.featured-series .post-content a:hover img[src*="typology_hero_banner"] {
  transform: translateY(calc(var(--tkc-space-1) * -1));
  box-shadow: var(--tkc-shadow-lg);
}

/* One column. Every block in the card shares one measure and one centre line,
   so the headings, the countdown, the lists, the actions, and the schedule line
   up instead of each keeping its own width. */
.post.featured-series .post-content > * {
  box-sizing: border-box;
  max-width: 76rem;
  margin-inline: auto;
}

.post.featured-series .post-content > p {
  line-height: var(--tkc-leading-loose);
}

/* Headings. The emphasis shortcodes wrap heading text in a `<p>`, which takes
   the heading's size rather than a size of its own. */
.post.featured-series h1,
.post.featured-series h2,
.post.featured-series h3 {
  color: var(--tkc-color-text);
  line-height: var(--tkc-leading-tight);
}

.post.featured-series :is(h1, h2, h3) p {
  margin: 0;
  font-size: inherit;
}

.post.featured-series h1 {
  margin-block: var(--tkc-space-1) var(--tkc-space-5);
  font-size: var(--tkc-size-600);
  text-align: center;
}

.post.featured-series h2 {
  margin-block: var(--tkc-space-6) var(--tkc-space-3);
  font-size: var(--tkc-size-400);
}

.post.featured-series h3 {
  margin-block: var(--tkc-space-7) var(--tkc-space-4);
  padding-bottom: var(--tkc-space-2);
  font-size: var(--tkc-size-400);
  border-bottom: thin solid var(--tkc-color-border);
}

/* Scripture quote. */
.post.featured-series blockquote {
  margin-block: var(--tkc-space-5);
  padding: var(--tkc-space-4) var(--tkc-space-5);
  color: var(--tkc-color-text-muted);
  background-color: var(--tkc-color-surface);
  border-left: var(--tkc-space-1) solid var(--tkc-color-accent);
  border-radius: 0 var(--tkc-radius-sm) var(--tkc-radius-sm) 0;
  font-size: var(--tkc-size-200);
  font-style: italic;
}

.post.featured-series blockquote p {
  margin: 0;
}

.post.featured-series blockquote strong {
  font-style: normal;
  white-space: nowrap;
}

/* The list card: the event details and each month of the schedule are the same
   component, one card with hairline-separated rows, regular-weight text, and the
   label or date picked out in the accent color. */
.post.featured-series .post-content > ul {
  margin-block: var(--tkc-space-4);
  padding: 0;
  overflow: hidden;
  list-style: none;
  background-color: var(--tkc-color-surface);
  border: thin solid var(--tkc-color-border);
  border-radius: var(--tkc-radius-md);
  box-shadow: var(--tkc-shadow-sm);
}

.post.featured-series .post-content > ul > li {
  margin: 0;
  padding: var(--tkc-space-3) var(--tkc-space-5);
  color: var(--tkc-color-text);
  font-size: var(--tkc-size-200);
  font-weight: var(--tkc-weight-regular);
  line-height: var(--tkc-leading-normal);
}

.post.featured-series .post-content > ul > li + li {
  border-top: thin solid var(--tkc-color-border);
}

.post.featured-series .post-content > ul > li strong {
  color: var(--tkc-color-accent);
  font-weight: var(--tkc-weight-bold);
}

.post.featured-series .post-content > ul > li a {
  color: var(--tkc-color-accent);
}

/* Month names ("September 2026"): in the schedule, after its heading, a
   paragraph whose only element is bold text reads as a small heading over its
   list card. CSS cannot see text beside the bold, so the rule is scoped to the
   schedule; "Starting Tuesday, September 15th ..." above it keeps text size. */
.post.featured-series .post-content > h3 ~ p:has(> strong:only-child) {
  margin-block: var(--tkc-space-5) var(--tkc-space-2);
  color: var(--tkc-color-text);
  font-size: var(--tkc-size-300);
  font-weight: var(--tkc-weight-bold);
}

.post.featured-series p strong {
  color: var(--tkc-color-text);
  font-size: inherit;
}

/* The closing italic line of the event details. */
.post.featured-series .post-content > p:has(> em:only-child) {
  color: var(--tkc-color-text-muted);
  text-align: center;
}

/* The document links: the Flyer and the Full Series Schedule, as outline
   buttons matching the event actions above them. The paragraph's own text (the
   decorative glyphs and the " | " between the links) is hidden by setting its
   size to zero; it stays in the page, and the links restore their size. */
/* `:has()` cannot nest, so the banner paragraph (a linked image) is excluded
   by a second, sibling `:not(:has(img))`. */
.post.featured-series .post-content > p:has(> a[href$=".pdf"]):not(:has(img)) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tkc-space-2);
  font-size: 0;
}

.post.featured-series .post-content > p > a[href$=".pdf"]:not(:has(img)) {
  display: inline-flex;
  align-items: center;
  padding: var(--tkc-space-3) var(--tkc-space-5);
  color: var(--tkc-color-text);
  background-color: var(--tkc-color-surface);
  border: thin solid var(--tkc-color-border);
  border-radius: var(--tkc-radius-pill);
  font-family: var(--tkc-font-text);
  font-size: var(--tkc-size-100);
  font-weight: var(--tkc-weight-medium);
  line-height: var(--tkc-leading-normal);
  text-decoration: none;
  transition:
    color var(--tkc-motion-fast) ease,
    border-color var(--tkc-motion-fast) ease;
}

.post.featured-series .post-content > p > a[href$=".pdf"]:not(:has(img)):hover {
  color: var(--tkc-color-accent-strong);
  border-color: var(--tkc-color-accent);
}

/* Horizontal rules become soft dividers. */
.post.featured-series hr {
  height: 0;
  margin-block: var(--tkc-space-6);
  border: 0;
  border-top: thin solid var(--tkc-color-border);
}

@media (max-width: 37.5rem) {
  .post.featured-series {
    padding: var(--tkc-space-5) var(--tkc-space-4) var(--tkc-space-6);
    border-radius: var(--tkc-radius-sm);
  }

  .post.featured-series .post-content > ul > li {
    padding-inline: var(--tkc-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .post.featured-series .post-content img[src*="typology_hero_banner"],
  .post.featured-series .post-content > p > a[href$=".pdf"]:not(:has(img)) {
    transition-duration: 0s;
  }

  .post.featured-series .post-content a:hover img[src*="typology_hero_banner"] {
    transform: none;
  }
}