/*
Theme Name: The Practical Philo
Theme URI: https://thepracticalphilo.com/
Description: Dark, editorial child theme for Kadence. Daily Stoic-inspired structure with an Aeon-style reading experience. Real Stoicism, not surface-level stoic mindset.
Author: The Practical Philo
Template: kadence
Version: 1.7.1
Text Domain: thepracticalphilo
*/

/* =========================================================
   1. DESIGN TOKENS  —  change colors & fonts here
   ========================================================= */
:root {
  /* Backgrounds */
  --tpp-bg:           #0c0c0e;   /* page background (near black) */
  --tpp-bg-elevated:  #16161a;   /* cards, footer, elevated panels */
  --tpp-bg-soft:      #1e1e23;   /* hover / subtle blocks */

  /* Text */
  --tpp-text:         #e9e6df;   /* warm off-white body text */
  --tpp-text-muted:   #a8a49b;   /* captions, meta, secondary */
  --tpp-heading:      #f6f3ec;   /* headings */

  /* Accent (muted stoic gold) */
  --tpp-accent:       #c9a86a;
  --tpp-accent-hover: #ddc28b;

  /* Lines & borders */
  --tpp-border:       #2a2a30;

  /* Typography */
  --tpp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --tpp-font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --tpp-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Reading column (Aeon-style) */
  --tpp-read-width:   42rem;     /* ~672px */
  --tpp-read-size:    1.25rem;   /* ~20px */
  --tpp-read-leading: 1.75;
}

/* ---------------------------------------------------------
   ALTERNATIVE PRESETS  —  to switch, copy the values into the
   :root block above (overwrite --tpp-accent, --tpp-bg, fonts).
   -----------------------------------------------------------
   A) Cool slate + sage green accent
      --tpp-bg: #0d0f10;  --tpp-bg-elevated: #16191b;
      --tpp-accent: #8fae8b;  --tpp-accent-hover: #a9c4a5;

   B) Ink blue + bronze accent
      --tpp-bg: #0b0e14;  --tpp-bg-elevated: #141a24;
      --tpp-accent: #b08d57;  --tpp-accent-hover: #cba978;

   C) Pure charcoal + warm terracotta
      --tpp-bg: #111110;  --tpp-bg-elevated: #1b1a18;
      --tpp-accent: #c77b54;  --tpp-accent-hover: #dd9270;

   Font alternatives (swap --tpp-font-display / --tpp-font-body
   and update the Google Fonts URL in functions.php to match):
      Display: "Playfair Display" | "Cormorant Garamond" | "Lora"
      Body:    "Lora" | "Source Serif 4" | "PT Serif"
   --------------------------------------------------------- */

/* =========================================================
   2. GLOBAL
   ========================================================= */
/* Force the dark base even if Kadence's global palette sets a light
   background later in the cascade. */
html body {
  background-color: var(--tpp-bg) !important;
  color: var(--tpp-text) !important;
  font-family: var(--tpp-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Make Kadence's content/wrapper containers transparent so the dark
   body shows through instead of a white card. */
.content-bg,
.content-container,
.site-container,
.site-main,
#wrapper,
#inner-wrap,
.wp-site-blocks {
  background-color: transparent !important;
}

/* Map Kadence global palette variables to the dark theme so blocks,
   buttons and headings that read from them inherit the right colors. */
:root {
  --global-palette1: var(--tpp-accent);
  --global-palette2: var(--tpp-accent-hover);
  --global-palette3: var(--tpp-heading);
  --global-palette4: var(--tpp-text);
  --global-palette5: var(--tpp-text-muted);
  --global-palette6: var(--tpp-border);
  --global-palette7: var(--tpp-bg-soft);
  --global-palette8: var(--tpp-bg-elevated);
  --global-palette9: var(--tpp-bg);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--tpp-font-display);
  color: var(--tpp-heading);
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

a {
  color: var(--tpp-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover,
a:focus {
  color: var(--tpp-accent-hover);
}

/* Selection */
::selection {
  background: var(--tpp-accent);
  color: #0c0c0e;
}

/* =========================================================
   3. HEADER / NAVIGATION
   ========================================================= */
.site-header,
.site-header-row,
.site-top-header-wrap,
.site-main-header-wrap {
  background-color: var(--tpp-bg) !important;
  border-bottom: 1px solid var(--tpp-border);
}

.site-branding .site-title {
  font-family: var(--tpp-font-display);
  letter-spacing: -0.02em;
}

.header-navigation .menu-container > ul > li > a,
.header-menu-container ul li a {
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tpp-text) !important;
  font-weight: 500;
}
.header-navigation .menu-container > ul > li > a:hover {
  color: var(--tpp-accent) !important;
}

/* =========================================================
   4. ARTICLE / SINGLE POST  —  Aeon-style reading
   ========================================================= */
.single .entry-content,
.single .entry-content-wrap {
  max-width: var(--tpp-read-width);
  margin-left: auto;
  margin-right: auto;
}

/* Aeon-style article header: centered title, large featured image */
.single .entry-header {
  max-width: var(--tpp-read-width);
  margin: 3rem auto 1.5rem;
  text-align: center;
}
.single .entry-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  margin-bottom: 0.5em;
}
.single .post-thumbnail,
.single .entry-header .post-thumbnail img,
.single figure.wp-block-post-featured-image {
  max-width: 1100px;
  margin: 2rem auto 2.5rem;
}
.single .post-thumbnail img {
  width: 100%;
  height: auto;
}

.single .entry-content > p {
  font-size: var(--tpp-read-size);
  line-height: var(--tpp-read-leading);
  margin-bottom: 1.5rem;
}

/* Drop-cap on the first paragraph (very Aeon) */
.single .entry-content > p:first-of-type::first-letter {
  font-family: var(--tpp-font-display);
  float: left;
  font-size: 4.5rem;
  line-height: 0.8;
  padding: 0.1em 0.12em 0 0;
  color: var(--tpp-accent);
  font-weight: 600;
}

.single .entry-content h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.single .entry-content h3 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Article meta */
.entry-meta,
.posted-on,
.byline {
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--tpp-text-muted);
}

/* =========================================================
   5. BLOCKQUOTES  —  stoic quotes
   ========================================================= */
blockquote,
.wp-block-quote {
  border-left: 3px solid var(--tpp-accent);
  margin: 2.5rem 0;
  padding: 0.25rem 0 0.25rem 1.75rem;
  font-family: var(--tpp-font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--tpp-heading);
}
blockquote cite,
.wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--tpp-font-ui);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tpp-text-muted);
}

/* Big pull quote for the "daily dose" hero */
.is-style-large.wp-block-quote,
.wp-block-pullquote {
  border: none;
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  padding: 2rem 0;
}

/* =========================================================
   6. BUTTONS / CTA
   ========================================================= */
.wp-block-button__link,
.kb-button,
.button,
button:not(.menu-toggle),
input[type="submit"] {
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  background-color: var(--tpp-accent);
  color: #0c0c0e;
  border-radius: 2px;
  border: 1px solid var(--tpp-accent);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:hover,
.kb-button:hover,
.button:hover,
input[type="submit"]:hover {
  background-color: var(--tpp-accent-hover);
  border-color: var(--tpp-accent-hover);
  color: #0c0c0e;
}

/* Outline button variant */
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--tpp-accent);
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--tpp-accent);
  color: #0c0c0e;
}

/* =========================================================
   7. CARDS / ARCHIVE / BLOG GRID
   ========================================================= */
.loop-entry.content-bg,
.entry.loop-entry,
article.post {
  background-color: var(--tpp-bg-elevated);
  border: 1px solid var(--tpp-border);
  border-radius: 4px;
}
.loop-entry .entry-title a {
  color: var(--tpp-heading);
}
.loop-entry .entry-title a:hover {
  color: var(--tpp-accent);
}
.loop-entry .entry-meta,
.loop-entry .entry-summary {
  color: var(--tpp-text-muted);
}

/* Latest Posts block (homepage essay grid, Aeon-style) */
.wp-block-latest-posts.is-grid {
  gap: 2rem;
  margin: 2.5rem 0;
}
.wp-block-latest-posts.is-grid > li {
  background-color: var(--tpp-bg-elevated);
  border: 1px solid var(--tpp-border);
  border-radius: 4px;
  padding: 1.5rem;
}
.wp-block-latest-posts__post-title {
  font-family: var(--tpp-font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--tpp-heading);
}
.wp-block-latest-posts__post-date {
  font-family: var(--tpp-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--tpp-text-muted);
}
.wp-block-latest-posts__post-excerpt {
  color: var(--tpp-text-muted);
  font-size: 1rem;
}

/* =========================================================
   8. NEWSLETTER / FORMS
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  background-color: var(--tpp-bg-elevated);
  border: 1px solid var(--tpp-border);
  color: var(--tpp-text);
  border-radius: 2px;
}
input::placeholder,
textarea::placeholder {
  color: var(--tpp-text-muted);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--tpp-accent);
  outline: none;
}

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer,
.site-footer-row,
.site-footer-wrap {
  background-color: var(--tpp-bg-elevated) !important;
  border-top: 1px solid var(--tpp-border);
  color: var(--tpp-text-muted);
}
.site-footer a {
  color: var(--tpp-text-muted);
}
.site-footer a:hover {
  color: var(--tpp-accent);
}

/* =========================================================
   10. MISC
   ========================================================= */
hr,
.wp-block-separator {
  border-color: var(--tpp-border);
  background-color: var(--tpp-border);
}

img,
figure {
  border-radius: 4px;
}

figcaption {
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  color: var(--tpp-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* =========================================================
   11. FRONT PAGE  (front-page.php — Daily Stoic-style)
   ========================================================= */
.tpp-front {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.tpp-front .tpp-section {
  padding: 3.5rem 0;
}
.tpp-front .tpp-rule {
  border: none;
  border-top: 1px solid var(--tpp-border);
  margin: 0;
}
.tpp-center {
  text-align: center;
  margin-top: 2.5rem;
}
.tpp-section-title {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 2.5rem;
}
.tpp-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tpp-border);
  margin-left: 1.5rem;
}

/* Featured article hero (left-aligned, big image) */
.tpp-hero-featured {
  padding-top: 4rem;
  padding-bottom: 2.5rem;
}
.tpp-hero-featured .tpp-kicker { text-align: left; }
.tpp-hero-featured-title {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  line-height: 1.05;
  margin: 0.25rem 0 0;
  max-width: 28ch;
}
/* Force the homepage hero left-aligned on the front end (the homepage is now
   page content, so Kadence/core would otherwise centre these). */
.tpp-kicker,
.tpp-hero-featured-title {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.tpp-hero-featured-title a { color: var(--tpp-heading); }
.tpp-hero-featured-title a:hover { color: var(--tpp-accent); }
.tpp-accent-bar {
  display: block;
  width: 90px;
  height: 4px;
  background: var(--tpp-accent);
  margin: 1.5rem 0 2rem;
}
/* When the accent bar is a Separator block (homepage pattern) */
hr.wp-block-separator.tpp-accent-bar {
  border: none;
  opacity: 1;
  width: 90px;
  max-width: 90px;
  height: 4px;
  background: var(--tpp-accent);
  margin: 1.5rem auto 2rem 0 !important;
  text-align: left;
}
.tpp-hero-featured-media { display: block; }
.tpp-hero-featured-img,
.tpp-hero-featured-media .tpp-img-ph {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.tpp-hero-featured-excerpt {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--tpp-text-muted);
  margin: 1.75rem 0 1.5rem;
  max-width: 70ch;
}

/* Subscribe band (2-col) */
.tpp-subscribe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  border-top: 1px solid var(--tpp-border);
  border-bottom: 1px solid var(--tpp-border);
}
.tpp-subscribe h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.tpp-subscribe p { color: var(--tpp-text-muted); margin: 0; }
.tpp-signup-stacked {
  flex-direction: column;
  align-items: stretch;
  max-width: none;
  margin: 0;
}
.tpp-signup-stacked .tpp-signup-input { text-align: center; }
.tpp-subscribe .tpp-hero-note { text-align: left; }

/* Hero / email capture */
.tpp-hero {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
  padding: 5rem 0 4rem;
}
.tpp-kicker {
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tpp-accent);
  margin-bottom: 1rem;
}
.tpp-hero-title {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.tpp-hero-sub {
  font-size: 1.25rem;
  color: var(--tpp-text-muted);
  margin-bottom: 2rem;
}
.tpp-hero-note {
  font-family: var(--tpp-font-ui);
  font-size: 0.75rem;
  color: var(--tpp-text-muted);
  margin-top: 0.75rem;
}

/* Signup form */
.tpp-signup {
  display: flex;
  gap: 0.5rem;
  max-width: 30rem;
  margin: 0 auto;
}
.tpp-signup-input {
  flex: 1;
  padding: 0.85rem 1rem;
  background-color: var(--tpp-bg-elevated);
  border: 1px solid var(--tpp-border);
  color: var(--tpp-text);
  border-radius: 2px;
  font-family: var(--tpp-font-ui);
}
.tpp-signup-btn,
.tpp-btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  background-color: var(--tpp-accent);
  color: #0c0c0e;
  border: 1px solid var(--tpp-accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tpp-signup-btn:hover,
.tpp-btn:hover {
  background-color: var(--tpp-accent-hover);
  border-color: var(--tpp-accent-hover);
  color: #0c0c0e;
}
.tpp-btn-outline {
  background: transparent;
  color: var(--tpp-accent);
}
.tpp-btn-outline:hover {
  background: var(--tpp-accent);
  color: #0c0c0e;
}

/* Image placeholder block */
.tpp-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 240px;
  background-color: var(--tpp-bg-soft);
  border: 1px dashed var(--tpp-border);
  border-radius: 4px;
  color: var(--tpp-text-muted);
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tpp-img-ph-tall {
  min-height: 200px;
  margin-bottom: 1.25rem;
}

/* Image + text section */
.tpp-mediatext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.tpp-mediatext-body h2 {
  margin-top: 0;
}

/* Grids (essays + resources) */
.tpp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.tpp-card-media {
  display: block;
  margin-bottom: 1rem;
}
.tpp-card-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.tpp-card-date {
  font-family: var(--tpp-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpp-text-muted);
  margin: 0 0 0.4rem;
}
.tpp-card-title {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}
.tpp-card-title a {
  color: var(--tpp-heading);
}
.tpp-card-title a:hover {
  color: var(--tpp-accent);
}
.tpp-card-excerpt {
  color: var(--tpp-text-muted);
  margin: 0 0 1rem;
}
.tpp-card-boxed {
  background-color: var(--tpp-bg-elevated);
  border: 1px solid var(--tpp-border);
  border-radius: 4px;
  padding: 1.5rem;
}

/* Big quote band */
.tpp-quote-band {
  text-align: center;
}
.tpp-bigquote {
  max-width: 42rem;
  margin: 0 auto;
  border: none;
  padding: 0;
}
.tpp-bigquote p {
  font-family: var(--tpp-font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.3;
  color: var(--tpp-heading);
}
.tpp-bigquote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--tpp-font-ui);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tpp-text-muted);
}

/* CTA band */
.tpp-cta {
  text-align: center;
  background-color: var(--tpp-bg-elevated);
  border-top: 1px solid var(--tpp-border);
  border-bottom: 1px solid var(--tpp-border);
  padding: 4rem 1.5rem;
}
.tpp-cta h2 {
  margin-top: 0;
}
.tpp-cta p {
  color: var(--tpp-text-muted);
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}

.tpp-img-ph-wide { min-height: 360px; }

/* Featured post (homepage) */
.tpp-featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.tpp-featured-img,
.tpp-featured-media .tpp-img-ph {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.tpp-featured-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  margin: 0.4rem 0 0.75rem;
}
.tpp-featured-title a { color: var(--tpp-heading); }
.tpp-featured-title a:hover { color: var(--tpp-accent); }
.tpp-featured-excerpt {
  color: var(--tpp-text-muted);
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}

/* =========================================================
   12. AEON-STYLE BLOG INDEX  (home.php)
   ========================================================= */
.tpp-blog-head { padding: 3.5rem 0 1rem; }

.tpp-tag {
  display: inline-block;
  font-family: var(--tpp-font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tpp-accent);
  margin-bottom: 0.4rem;
}
.tpp-byline {
  font-family: var(--tpp-font-ui);
  font-size: 0.8125rem;
  color: var(--tpp-text-muted);
  margin: 0.25rem 0 0;
}

/* Featured lead essay */
.tpp-blog-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 1.5rem 0 3.5rem;
}
.tpp-blog-featured:hover .tpp-blog-featured-title { color: var(--tpp-accent); }
.tpp-blog-featured-img,
.tpp-blog-featured-media .tpp-img-ph {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.tpp-blog-featured-body { display: block; }
.tpp-blog-featured-title {
  display: block;
  font-family: var(--tpp-font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  color: var(--tpp-heading);
  margin: 0.4rem 0 0.75rem;
}
.tpp-blog-featured .tpp-card-excerpt { display: block; font-size: 1.15rem; }

/* Pagination */
.tpp-pagination { margin-top: 3rem; }
.tpp-pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  margin: 0 0.15rem;
  font-family: var(--tpp-font-ui);
  border: 1px solid var(--tpp-border);
  border-radius: 2px;
  color: var(--tpp-text);
}
.tpp-pagination .page-numbers.current,
.tpp-pagination .page-numbers:hover {
  background: var(--tpp-accent);
  border-color: var(--tpp-accent);
  color: #0c0c0e;
}

/* =========================================================
   13. NUMBERED BENEFITS LIST  (welcome pattern)
   ========================================================= */
.tpp-benefits {
  list-style: none;
  counter-reset: tpp-b;
  max-width: 42rem;
  margin: 2rem auto 0;
  padding: 0;
}
.tpp-benefits li {
  counter-increment: tpp-b;
  position: relative;
  padding: 0 0 1.5rem 3.25rem;
  border-bottom: 1px solid var(--tpp-border);
  margin-bottom: 1.5rem;
}
.tpp-benefits li::before {
  content: counter(tpp-b);
  position: absolute;
  left: 0;
  top: -0.1rem;
  font-family: var(--tpp-font-display);
  font-size: 1.5rem;
  color: var(--tpp-accent);
}

/* =========================================================
   14. SINGLE POST — Aeon reading refinements
   ========================================================= */
.single .wp-block-pullquote,
.single .is-style-large.wp-block-quote {
  border: none;
  text-align: left;
  padding: 1.5rem 0;
  margin: 2.5rem 0;
}
.single .wp-block-pullquote p,
.single .is-style-large.wp-block-quote p {
  color: var(--tpp-accent);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.3;
}
.single .entry-content figure img { width: 100%; height: auto; }
.single .entry-content figcaption {
  font-style: italic;
  text-align: left;
  border-left: 2px solid var(--tpp-border);
  padding-left: 0.75rem;
}

/* Mobile */
@media (max-width: 781px) {
  .tpp-grid { grid-template-columns: 1fr; }
  .tpp-mediatext { grid-template-columns: 1fr; gap: 1.5rem; }
  .tpp-signup { flex-direction: column; }
  .tpp-featured,
  .tpp-blog-featured,
  .tpp-subscribe { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .tpp-blog-grid { grid-template-columns: 1fr 1fr; }
}