/* =============================================================
   PAWSHTAILS — JOURNAL (index + single)
   Enqueued on:
     - home.php  (the /journal/ Posts page)
     - single.php (any single post)
     - WP category archives (so /category/training/ works too)

   Visuals ported from:
     mockups/pawshtails-journal.html       (index)
     mockups/pawshtails-journal-post.html  (single)
   ============================================================= */


/* ----- Body-class breadcrumb scoping. Re-styles the breadcrumb
   markup for these templates, since main.css scopes breadcrumb to
   shop/cart/product/content bodies. ----- */
body.blog .breadcrumb,
body.category .breadcrumb,
body.single-post .breadcrumb,
body.page-id-journal .breadcrumb {
  padding: var(--space-4) 0;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-100);
}
body.blog .breadcrumb .container,
body.category .breadcrumb .container,
body.single-post .breadcrumb .container,
body.page-id-journal .breadcrumb .container { max-width: 1280px; }
body.blog .breadcrumb-list,
body.category .breadcrumb-list,
body.single-post .breadcrumb-list,
body.page-id-journal .breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin: 0;
  padding: 0;
}
body.blog .breadcrumb-list li,
body.category .breadcrumb-list li,
body.single-post .breadcrumb-list li,
body.page-id-journal .breadcrumb-list li { margin: 0; padding: 0; }
body.blog .breadcrumb-list a,
body.category .breadcrumb-list a,
body.single-post .breadcrumb-list a,
body.page-id-journal .breadcrumb-list a {
  color: var(--neutral-500);
  text-decoration: none;
  transition: color var(--t-fast, 150ms);
}
body.blog .breadcrumb-list a:hover,
body.category .breadcrumb-list a:hover,
body.single-post .breadcrumb-list a:hover,
body.page-id-journal .breadcrumb-list a:hover { color: var(--brand-orange); }
body.blog .breadcrumb-sep,
body.category .breadcrumb-sep,
body.single-post .breadcrumb-sep,
body.page-id-journal .breadcrumb-sep { color: var(--neutral-500); opacity: 0.5; margin: 0; }
body.blog .breadcrumb-current,
body.category .breadcrumb-current,
body.single-post .breadcrumb-current,
body.page-id-journal .breadcrumb-current { color: var(--neutral-900); font-weight: 600; }


/* =============================================================
   JOURNAL INDEX HERO
   ============================================================= */
.journal-page .account-hero {
  padding: var(--space-8) var(--section-x) var(--space-6);
  background: var(--neutral-900);
  color: var(--white);
  text-align: center;
}
.journal-page .account-hero-inner { max-width: 1100px; margin: 0 auto; }
.journal-page .account-hero-eyebrow {
  font-family: var(--font-accent) !important;
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.journal-page .account-hero-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--white);
  margin: 0;
}
.journal-page .account-hero-subtitle {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-3);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
@media (min-width: 720px) {
  .journal-page .account-hero { padding: var(--space-10) var(--section-x) var(--space-8); }
  .journal-page .account-hero-eyebrow { font-size: var(--text-3xl); }
  .journal-page .account-hero-title { font-size: var(--text-5xl); }
}


/* =============================================================
   JOURNAL SECTION — cream surround with the categories, featured
   post, grid, and pagination.
   ============================================================= */
.journal-section {
  padding: 56px var(--section-x) 96px;
  background: var(--brand-cream);
}
@media (min-width: 720px) {
  .journal-section { padding: 80px var(--section-x) 120px; }
}
.journal-section .container { max-width: 1100px; }


/* ----- Category filter pills ----- */
.journal-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 64px;
  justify-content: center;
}
.journal-cat {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--neutral-200);
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
  text-decoration: none;
  transition: all var(--t-fast, 150ms);
}
.journal-cat:hover {
  border-color: var(--neutral-900);
  color: var(--neutral-900);
}
.journal-cat.is-active {
  background: var(--neutral-900);
  color: var(--white);
  border-color: var(--neutral-900);
}


/* ----- Featured post (big) ----- */
.journal-featured {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  margin-bottom: 80px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--t-fast, 150ms);
}
.journal-featured:hover { border-color: var(--neutral-900); }
@media (min-width: 900px) {
  /* Featured post goes side-by-side only at 900px+. Below that
     (phone + tablet-portrait at 768px) the layout stacks: image
     on top, body below — gives the image and the title room to
     breathe instead of cramming a portrait dog into a half-column. */
  .journal-featured {
    grid-template-columns: 1fr 1fr;
    /* No column-gap — the body block's own padding handles the
       gap from the image edge. With column-gap added too, the
       text was sitting 80px+ from the image but only 40px from
       the right edge, making the block look lopsided. */
    margin-bottom: 96px;
  }
}
/* Image fills its column height (no fixed aspect ratio at 720+),
   so the body's content + padding determines the card height and
   the image stretches to match. Both columns end at the same Y. */
.journal-featured-image {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  /* Same 900px breakpoint as the grid above — when the layout
     goes side-by-side, the image drops its aspect ratio and
     stretches to match the body's height. Stays 4/3 below 900
     so the stacked layout still feels editorial. */
  .journal-featured-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }
}
.journal-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Body block — even padding on all four sides. The grid above
   handles the gap between image and body with column-gap, so the
   body's own padding stays balanced (no lopsided look from a
   reduced-left value). */
.journal-featured-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px) {
  .journal-featured-body { padding: 32px; }
}
@media (min-width: 1024px) {
  .journal-featured-body { padding: 40px; }
}
.journal-featured-cat {
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: var(--space-2);
}
.journal-featured-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--neutral-900);
  margin: 0 0 var(--space-3);
}
@media (min-width: 720px) {
  .journal-featured-title { font-size: var(--text-4xl); }
}
.journal-featured-excerpt {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-base);
  color: var(--neutral-700);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.journal-featured-meta {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-xs);
  color: var(--neutral-500);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}


/* ----- Post grid (and re-used on single.php's .related-section) ----- */
.journal-grid,
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 540px) {
  .journal-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}
@media (min-width: 900px) {
  .journal-grid { grid-template-columns: 1fr 1fr 1fr; gap: 56px 40px; }
}
@media (min-width: 720px) {
  .related-grid { grid-template-columns: 1fr 1fr 1fr; gap: 56px; }
}
.journal-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast, 150ms), transform var(--t-fast, 150ms);
}
.journal-card:hover {
  border-color: var(--neutral-900);
  transform: translateY(-2px);
}
.journal-card-image {
  aspect-ratio: 4/3;
  background: var(--brand-cream);
  overflow: hidden;
}
.journal-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-card-image-color { width: 100%; height: 100%; }
.journal-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.journal-card-cat {
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
.journal-card-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--neutral-900);
  margin: 0;
}
/* Excerpt clamped to a fixed 4 lines so every card body ends at
   the same visual height. Combined with the .journal-card-meta
   rule (margin-top: auto) below, this aligns the meta line — and
   therefore the card bottom — across all cards in a row. */
.journal-card-excerpt {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal-card-meta {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: auto;
  padding-top: var(--space-2);
}


/* ----- Pagination ----- */
.journal-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: 80px;
  flex-wrap: wrap;
}
@media (min-width: 720px) {
  .journal-pagination { margin-top: 96px; }
}
.journal-pagination a,
.journal-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--white);
  border: 1px solid var(--neutral-200);
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: var(--neutral-900);
  text-decoration: none;
  transition: all var(--t-fast, 150ms);
}
.journal-pagination a:hover { border-color: var(--neutral-900); }
.journal-pagination .is-active,
.journal-pagination .current {
  background: var(--neutral-900);
  color: var(--white);
  border-color: var(--neutral-900);
}


/* ----- Empty state (filtered category with no posts) ----- */
.journal-empty {
  font-family: 'Sen', sans-serif !important;
  text-align: center;
  color: var(--neutral-500);
  padding: var(--space-8) 0;
}


/* =============================================================
   SINGLE POST
   ============================================================= */

/* ----- Hero — dark, matches the Journal index hero treatment.
   Wider inner so the title can breathe; meta line in muted white.
   Tightened padding on desktop so the black band doesn't feel
   over-tall above the feature image. ----- */
.journal-post .post-hero {
  padding: 48px var(--section-x) 32px;
  background: var(--neutral-900);
  color: var(--white);
  text-align: center;
  border-bottom: 0;
}
@media (min-width: 720px) {
  .journal-post .post-hero { padding: 64px var(--section-x) 48px; }
}
.journal-post .post-hero-inner { max-width: 1100px; margin: 0 auto; }
.journal-post .post-cat-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand-orange);
  color: var(--white);
  font-family: 'Sen', sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  text-decoration: none;
  transition: background var(--t-fast, 150ms);
}
.journal-post .post-cat-tag:hover { background: var(--brand-orange-dark); color: var(--white); }
.journal-post .post-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--white) !important;
  margin: 0 0 var(--space-4);
}
@media (min-width: 720px) {
  .journal-post .post-title { font-size: 48px; }
}
@media (min-width: 1024px) {
  .journal-post .post-title { font-size: 56px; }
}
.journal-post .post-meta {
  font-family: 'Sen', sans-serif !important;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}


/* ----- Feature image — full bleed, max 1100px. Tight vertical
   rhythm so the image sits cleanly between the dark hero above
   and the body content below, without big airy gaps. ----- */
.journal-post .post-feature-image-wrap {
  background: var(--white);
  margin-top: 16px;
  margin-bottom: 32px;
}
@media (min-width: 720px) {
  .journal-post .post-feature-image-wrap {
    margin-top: 20px;
    margin-bottom: 40px;
  }
}
.journal-post .post-feature-image {
  aspect-ratio: 16/9;
  background: var(--neutral-100);
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}
.journal-post .post-feature-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-post .post-feature-image-color { width: 100%; height: 100%; }


/* ----- Body — clean white, narrow column ----- */
.journal-post .post-body-wrap {
  background: var(--white);
  padding: 0 var(--section-x) 96px;
}
@media (min-width: 720px) {
  .journal-post .post-body-wrap { padding: 0 var(--section-x) 160px; }
}
/* Reading column — matches the feature image width (1100px max).
   Wider than the typical 680px reading column the mockup used; this
   was an explicit request so the body sits flush with the image
   above. If long lines feel hard to read, tighten this back to
   ~860px and we'll narrow it again. */
.journal-post .post-body { max-width: 1100px; margin: 0 auto; }

/* Lede paragraph — larger, bottom border. */
.journal-post .post-body .post-lede {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl);
  color: var(--neutral-900);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--neutral-200);
  font-weight: 400;
}
@media (min-width: 720px) {
  .journal-post .post-body .post-lede { font-size: var(--text-2xl); }
}

/* Standard post-content typography. */
.journal-post .post-body h2 {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  margin: var(--space-7) 0 var(--space-3);
  line-height: 1.15;
}
@media (min-width: 720px) {
  .journal-post .post-body h2 { font-size: 32px; }
}
.journal-post .post-body h3 {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--neutral-900);
  margin: var(--space-5) 0 var(--space-2);
  letter-spacing: -0.01em;
}
.journal-post .post-body p {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-base);
  color: var(--neutral-700);
  line-height: 1.75;
  margin: 0 0 var(--space-4);
}
@media (min-width: 720px) {
  .journal-post .post-body p { font-size: 17px; }
}
.journal-post .post-body ul,
.journal-post .post-body ol {
  font-family: 'Sen', sans-serif !important;
  margin: 0 0 var(--space-4) var(--space-5);
  color: var(--neutral-700);
  line-height: 1.75;
}
@media (min-width: 720px) {
  .journal-post .post-body ul,
  .journal-post .post-body ol { font-size: 17px; }
}
.journal-post .post-body ul li,
.journal-post .post-body ol li { margin-bottom: var(--space-2); }
.journal-post .post-body strong { color: var(--neutral-900); font-weight: 700; }
.journal-post .post-body em { font-style: italic; }
.journal-post .post-body a {
  color: var(--brand-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.journal-post .post-body a:hover { color: var(--brand-orange-dark); }

.journal-post .post-body blockquote {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl);
  font-style: normal;
  color: var(--neutral-900);
  border-left: 3px solid var(--brand-orange);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
@media (min-width: 720px) {
  .journal-post .post-body blockquote {
    font-size: 28px;
    padding-left: var(--space-6);
  }
}

/* Images inside the post body. */
.journal-post .post-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-5) 0;
}
.journal-post .post-body figcaption {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: 4px;
  text-align: center;
}


/* ----- Share row ----- */
.journal-post .post-share {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.journal-post .post-share-label {
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.journal-post .post-share-icons {
  display: flex;
  gap: var(--space-2);
}
.journal-post .post-share-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  transition: all var(--t-fast, 150ms);
  text-decoration: none;
}
.journal-post .post-share-icon:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}
.journal-post .post-share-icon svg { width: 16px; height: 16px; }


/* Author bio block removed — user request. The byline is also
   removed from the meta line in single.php; only reading time +
   date are shown now. */


/* =============================================================
   RELATED POSTS SECTION
   ============================================================= */
.related-section {
  padding: 96px var(--section-x) 120px;
  background: var(--brand-cream);
  border-top: 1px solid var(--neutral-200);
}
@media (min-width: 720px) {
  .related-section { padding: 120px var(--section-x) 144px; }
}
.related-section .container { max-width: 1100px; }
.related-heading {
  font-family: var(--font-display) !important;
  font-size: var(--text-3xl);
  color: var(--neutral-900);
  margin: 0 0 56px;
  letter-spacing: -0.02em;
  text-align: center;
  font-weight: 400;
}