/*
Theme Name: Droplet
Theme URI: https://droplet.io
Author: Droplet Dev
Description: A dark, web3-minimalist WordPress theme. Deep purple gradient base, wall-to-wall post card grid with featured images above text panels, tight sticky header and footer, clean and premium.
Version: 1.4.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: droplet
Tags: dark, web3, minimalist, grid, clean, premium
*/

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Dark purple "slushy web3" palette. Each value is a very dark gray with a
     subtle purple tint — calm, professional, not saturated. */
  --bg: #0e0a1a;          /* page base — deepest purple-black */
  --bg-card: #181226;     /* card surface — slightly lifted, purple-tinted */
  --bg-card-hover: #1f1830; /* card hover — a touch lighter */
  --bg-header: #0a0816;   /* header/footer deepest point */
  --bg-mid: #15102a;      /* mid purple — used in header/footer gradients */
  --fg: #e8e8e8;
  --fg-muted: #8a82a0;    /* muted text — slight purple shift to sit on purple bg */
  --fg-dim: #5a5470;      /* dim text — same purple shift */
  --accent: #ffffff;
  --border: #2a2438;      /* purple-tinted border */
  --radius: 3px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  --max-read: 920px;
  --header-h: 48px;
  --grid-gap: 2px;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  /* Deep purple gradient base — calm and professional, web3 slushy feel.
     A solid purple-black base with two subtle radial glows (top + bottom)
     that hint at purple without overwhelming. background-attachment: fixed
     keeps the glows stable as the user scrolls, so long pages don't
     stretch the gradient. */
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(70, 40, 110, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(50, 30, 85, 0.16) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--fg-muted);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ─── Header ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Subtle dark-purple gradient: deepest at top, slightly lifted at bottom —
     "sheds" a hint of purple light onto the page below. */
  background: linear-gradient(180deg, var(--bg-header) 0%, var(--bg-mid) 100%);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* When the WP admin bar is present (logged-in users), the sticky header
   needs to sit just below it. WordPress admin bar behavior:
   - ≥783px: position: fixed, 32px tall → header offset 32px
   - 601-782px: position: fixed, 46px tall → header offset 46px
   - ≤600px: position: absolute (scrolls away with the page) → header sticks
     at top: 0 (no offset, otherwise a permanent gap is left after the
     admin bar scrolls off). */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

.site-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-icon-img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
}

.site-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: none;
  line-height: 1;
}

.site-name a {
  color: var(--accent);
}

.site-name a:hover {
  color: var(--fg-muted);
}

/* ─── Navigation ─── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: block;
  padding: 4px 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent);
  transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav .current-menu-item a {
  color: var(--fg-muted);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

.menu-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ─── Grid Layout (Index / Archive) ───
   One column on mobile, four columns on desktop (no tablet step). */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
}

@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── Post Card ───
   Two-zone card: featured image on top, text panel below. The text is no
   longer overlaid on the image — the image gets to breathe and the text
   sits on its own purple-tinted surface. Rounded corners + lift on hover
   match the broader dark-purple web3 aesthetic. */
.post-card {
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: #3a3050;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(80, 50, 130, 0.18);
}

/* Featured image wrapper — fixed aspect ratio, top corners rounded with the
   card, slight zoom on hover. */
.post-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0816;
}

.post-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card-image {
  transform: scale(1.05);
}

/* Fallback for cards without an image — body panel takes the full card. */
.post-card.no-image .post-card-body {
  flex: 1;
}

/* Body panel — purple-tinted surface below the image, holds category pill,
   title, and date. */
.post-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

/* Category pill — inline at the top of the body panel, glassy with a
   purple-tinted backdrop so it sits naturally on the purple card surface. */
.post-card-category {
  align-self: flex-start;
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8e0ff;
  background: rgba(120, 80, 180, 0.22);
  border: 1px solid rgba(150, 110, 210, 0.32);
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.4;
  margin-bottom: 2px;
}

.post-card-body .post-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
}

/* Post card title — rainbow gradient text (same favicon palette as the
   post meta and Gutenberg buttons). Clipped to text via background-clip.
   The stretched-link ::after still works because it's positioned absolutely
   and doesn't depend on text color. */
.post-card-body .post-card-title a {
  background: linear-gradient(135deg, #00ccff 0%, #ff33cc 50%, #ffe650 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  display: inline-block;
  transition: opacity 0.15s ease;
}

.post-card-body .post-card-title a:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* Hide the category pill on index/archive grid pages — the rainbow title
   already provides enough visual identity without the extra label. */
.grid-page .post-card-category {
  display: none;
}

/* Stretched link: the title <a>::after covers the entire body (= entire
   card) so any click on the thumbnail or text opens the post. */
.post-card-body .post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.post-card-body .post-card-date {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ─── Single Post / Page ─── */
.single-container {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.single-container .post-header {
  margin-bottom: 36px;
}

.single-container .post-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

/* Post meta — sits BELOW the title. Rainbow gradient text adds visual
   separation between the title and the body content, and ties the meta
   to the brand-gradient language used on the Gallery CTA cards. The
   gradient flows cyan → magenta → yellow (favicon palette) and is clipped
   to the text via background-clip. */
.single-container .post-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: linear-gradient(90deg, #00ccff 0%, #ff33cc 50%, #ffe650 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Fallback: if background-clip:text isn't supported, show muted purple. */
}

/* The separator dot and the time both inherit the gradient via the parent.
   Links inside the meta (category) need their own gradient re-applied since
   <a> has its own color by default. */
.single-container .post-meta .meta-sep {
  opacity: 0.6;
}

.single-container .post-meta time {
  font-weight: 700;
}

.single-container .post-meta .cat a {
  background: linear-gradient(90deg, #00ccff 0%, #ff33cc 50%, #ffe650 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.single-container .post-meta .cat a:hover {
  opacity: 0.75;
}

.single-container .post-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
}

.single-container .post-content h1,
.single-container .post-content h2,
.single-container .post-content h3,
.single-container .post-content h4,
.single-container .post-content h5,
.single-container .post-content h6 {
  color: var(--accent);
  margin: 1.5em 0 0.5em;
  font-weight: 600;
  line-height: 1.3;
}

.single-container .post-content h2 { font-size: 22px; }
.single-container .post-content h3 { font-size: 18px; }

.single-container .post-content p {
  margin-bottom: 1.3em;
}

.single-container .post-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--fg-dim);
}

.single-container .post-content a:hover {
  text-decoration-color: var(--accent);
}

/* ─── Gutenberg Buttons (rainbow gradient) ───
   Applies the same cyan → magenta → yellow brand gradient used on the
   Gallery plugin's CTA button, so default WordPress buttons (the Buttons
   block in the block editor) visually match the brand language across
   posts and pages. Targets the standard .wp-block-button__link class
   emitted by Gutenberg, in both single posts and pages. */
.single-container .post-content .wp-block-button,
.page-container .page-content .wp-block-button {
  margin: 1.5em 0;
}

.single-container .post-content .wp-block-button__link,
.page-container .page-content .wp-block-button__link {
  display: inline-block;
  background: linear-gradient(135deg, #00ccff 0%, #ff33cc 50%, #ffe650 100%);
  color: #ffffff !important;
  text-decoration: none;
  padding: 12px 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 14px rgba(255, 51, 204, 0.35);
  transition: all 0.2s ease;
  cursor: pointer;
}

.single-container .post-content .wp-block-button__link:hover,
.page-container .page-content .wp-block-button__link:hover {
  background: linear-gradient(135deg, #1ad9ff 0%, #ff4dd4 50%, #fff080 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 20px rgba(255, 51, 204, 0.5);
  transform: translateY(-1px);
  color: #ffffff !important;
  text-decoration: none;
}

/* Outline button variant — transparent fill with rainbow gradient border
   (achieved via a gradient background clipped to the border box). */
.single-container .post-content .is-style-outline .wp-block-button__link,
.page-container .page-content .is-style-outline .wp-block-button__link {
  background: linear-gradient(135deg, #00ccff 0%, #ff33cc 50%, #ffe650 100%);
  border: 1px solid transparent;
  background-clip: padding-box;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 14px rgba(255, 51, 204, 0.2);
}

.single-container .post-content .is-style-outline .wp-block-button__link:hover,
.page-container .page-content .is-style-outline .wp-block-button__link:hover {
  background: linear-gradient(135deg, #1ad9ff 0%, #ff4dd4 50%, #fff080 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(255, 51, 204, 0.3);
  transform: translateY(-1px);
}

.single-container .post-content blockquote {
  border-left: 2px solid var(--fg-dim);
  padding-left: 16px;
  margin: 1.5em 0;
  color: var(--fg-muted);
  font-style: italic;
}

.single-container .post-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--fg);
}

.single-container .post-content pre {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--border);
}

.single-container .post-content pre code {
  background: none;
  padding: 0;
}

.single-container .post-content ul,
.single-container .post-content ol {
  padding-left: 20px;
  margin-bottom: 1.3em;
}

.single-container .post-content li {
  margin-bottom: 0.35em;
}

.single-container .post-content img {
  border-radius: var(--radius);
}

.single-container .post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Post tags */
.post-tags {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.post-tags a {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--fg-muted);
  transition: all 0.15s ease;
}

.post-tags a:hover {
  color: var(--accent);
  border-color: var(--fg-dim);
}

/* ─── Page Layout ─── */
.page-container {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.page-container .page-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.page-container .page-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
}

.page-container .page-content p {
  margin-bottom: 1.3em;
}

/* ─── Archive Header ─── */
.archive-header {
  padding: 24px 18px;
  border-bottom: 1px solid var(--border);
}

.archive-header .archive-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.archive-header .archive-title span {
  color: var(--accent);
}

/* ─── Footer ───
   Sticky on ALL devices via position: fixed. Body has a matching
   padding-bottom (set below) so content isn't hidden behind it.
   Thinner than v1.4.5 to feel less heavy. Mirrors the header's purple
   gradient (lifted at top → deepest at bottom) for a cohesive frame. */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-header) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Offset body so the fixed footer doesn't cover content on any device. */
body {
  padding-bottom: 56px;
}

/* Footer inner: edge-to-edge (matches the header's full-width treatment)
   so the prev/next arrows extend to the same horizontal bounds as the
   header's logo + nav. No max-width cap. */
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* When prev/next sides are present, switch to a 3-column layout so the home
   link stays perfectly centered. */
.site-footer-inner.site-footer-nav {
  justify-content: space-between;
}

.footer-nav-side {
  flex: 1;
  display: flex;
  align-items: center;
}

.footer-nav-prev {
  justify-content: flex-start;
}

.footer-nav-next {
  justify-content: flex-end;
}

.footer-nav-placeholder {
  /* Empty spacer keeps the home link centered when one side is missing. */
  display: inline-block;
  min-width: 1px;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, opacity 0.15s ease;
  opacity: 0.78;
}

.footer-nav-link:hover {
  color: #ffffff;
  opacity: 1;
}

.footer-nav-arrow {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.site-footer-home {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: capitalize; /* Title Case */
  color: #ffffff; /* white */
  margin: 0;
  line-height: 1;
}

.site-footer a {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: var(--fg-muted);
}

.site-footer .footer-icon-img {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Pagination ─── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 32px 16px;
  border-top: 1px solid var(--border);
}

.pagination a,
.pagination span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: all 0.15s ease;
}

.pagination a:hover {
  color: var(--accent);
  border-color: var(--fg-dim);
}

.pagination .current {
  color: var(--accent);
  border-color: var(--fg-dim);
  background: var(--bg-card);
}

/* ─── 404 ─── */
.error-404 {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
}

.error-404 .error-code {
  font-size: 64px;
  font-weight: 700;
  color: var(--fg-dim);
  line-height: 1;
  margin-bottom: 12px;
}

.error-404 .error-msg {
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}

/* ─── Search Form ─── */
.search-form {
  display: flex;
  max-width: 400px;
}

.search-form input[type="search"] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--fg);
  font-size: 12px;
  padding: 6px 12px;
  outline: none;
  font-family: var(--font-sans);
  border-radius: 2px 0 0 2px;
  flex: 1;
}

.search-form input[type="search"]::placeholder {
  color: var(--fg-dim);
}

.search-form input[type="search"]:focus {
  border-color: var(--fg-dim);
}

.search-form button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0 2px 2px 0;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
}

.search-form button:hover {
  color: var(--accent);
  border-color: var(--fg-dim);
}

/* ─── Comments (minimal) ─── */
.comments-area {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.comments-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 24px;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.comment:first-child {
  padding-top: 0;
}

.comment-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}

.comment-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.comment-content p {
  margin-bottom: 0.5em;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  /* Mobile footer is shorter — reduce body offset accordingly. */
  body {
    padding-bottom: 44px;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-header) 100%);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px;
    z-index: 99;
  }

  .site-nav.active {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .site-nav a {
    padding: 8px 0;
  }

  /* Compact footer on mobile — smaller padding. */
  .site-footer {
    padding: 10px 14px;
  }

  /* Compact footer nav on mobile: tighten gap and hide "Prev"/"Next" labels,
     leaving just the arrows flanking the centered home link. */
  .site-footer-inner {
    gap: 10px;
  }

  .footer-nav-link {
    gap: 4px;
  }

  .footer-nav-label {
    /* Visually hidden on small screens to save space; arrow still conveys direction. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .footer-nav-arrow {
    font-size: 16px;
  }

  .single-container .post-title {
    font-size: 22px;
  }

  /* Single-column mobile cards: slightly larger title for legibility,
     tighter padding so the cards stay compact. */
  .post-card-body {
    padding: 11px 13px 13px;
  }

  .post-card-body .post-card-title {
    font-size: 15px;
  }

  .post-card-category {
    font-size: 9px;
    padding: 2px 8px;
  }
}