/* ==========================================================================
   PIE Builders & Developers — Blog Listing component
   Centred heading, category filters, three-column article grid and
   View All Articles CTA.
   All selectors are scoped with .pie-blog / .pie-blog-card prefixes.

   From html/css/blog-listing.css. WordPress changes (marked "WP:"):
   filters and pagination are links (aria-current), headings reset the
   theme's display font, a placeholder for posts without a featured image,
   and pagination in place of View All Articles.

   1. Variables and base section styles
   2. Section heading
   3. Category filters
   4. Article grid
   5. Article cards
   6. Metadata and links
   7. Animation-related states
   8. Responsive breakpoints
   9. Accessibility and reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Variables and base section styles
   ========================================================================== */
.pie-blog {
  /* Palette */
  --pie-blog-gold: #B88636;
  --pie-blog-gold-deep: #8A6224;       /* hover / focus */
  --pie-blog-gold-text: #976C2A;       /* small gold text, 4.6:1 on white */
  --pie-blog-heading: #111827;
  --pie-blog-text: #4B5563;
  --pie-blog-muted: #5B6472;
  --pie-blog-bg: #FAF9F6;
  --pie-blog-card: #FFFFFF;
  --pie-blog-border: #E5E5E5;
  --pie-blog-border-hover: #D9C6A5;

  /* Typography (WP: the theme's self-hosted Manrope stack) */
  --pie-blog-font: var(--pie-font-body, "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif);

  /* Layout */
  --pie-blog-container: 1400px;
  --pie-blog-gutter: clamp(16px, 3vw, 20px);
  --pie-blog-gap: 20px;
  --pie-blog-radius: 10px;
  --pie-blog-radius-sm: 4px;
  --pie-blog-card-pad: 21px;
  --pie-blog-image-ratio: 2.62 / 1;

  /* Motion */
  --pie-blog-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pie-blog-dur: 0.3s;

  position: relative;
  padding-block: clamp(40px, 5vw, 64px);
  background: var(--pie-blog-bg);
  color: var(--pie-blog-text);
  font-family: var(--pie-blog-font);
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: 24px;
}

.pie-blog *,
.pie-blog *::before,
.pie-blog *::after {
  box-sizing: border-box;
}

.pie-blog__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pie-blog__container {
  width: 100%;
  max-width: calc(var(--pie-blog-container) + var(--pie-blog-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--pie-blog-gutter);
}

/* ==========================================================================
   2. Section heading
   ========================================================================== */
.pie-blog__header {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.pie-blog__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 6px;
  color: var(--pie-blog-gold);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pie-blog__eyebrow::before,
.pie-blog__eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 2px;
  background: currentColor;
}

.pie-blog__title {
  margin: 0;
  color: var(--pie-blog-heading);
  font-family: inherit;   /* WP: theme.css gives headings the display font */
  font-size: clamp(30px, 2.2vw + 16px, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.pie-blog__intro {
  max-width: 680px;
  margin: 12px auto 0;
  font-size: clamp(16px, 0.25vw + 15px, 18px);
  line-height: 1.45;
}

/* ==========================================================================
   3. Category filters
   ========================================================================== */
.pie-blog__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 22px;
}

.pie-blog__filter {
  display: inline-flex;   /* WP: <a> instead of <button> */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid #D9D9D9;
  border-radius: var(--pie-blog-radius-sm);
  background: var(--pie-blog-card);
  color: var(--pie-blog-heading);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--pie-blog-dur) var(--pie-blog-ease),
    border-color var(--pie-blog-dur) var(--pie-blog-ease),
    color var(--pie-blog-dur) var(--pie-blog-ease);
}

.pie-blog__filter:first-child {
  min-width: 75px;
}

.pie-blog__filter:hover {
  border-color: var(--pie-blog-gold);
  color: var(--pie-blog-gold-deep);
}

.pie-blog__filter.is-active,
.pie-blog__filter[aria-current="page"] {
  border-color: var(--pie-blog-gold);
  background: var(--pie-blog-gold);
  color: #FFFFFF;
  font-weight: 600;
}

.pie-blog__filter.is-active:hover,
.pie-blog__filter[aria-current="page"]:hover {
  border-color: var(--pie-blog-gold-deep);
  background: var(--pie-blog-gold-deep);
}

/* ==========================================================================
   4. Article grid
   ========================================================================== */
.pie-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pie-blog-gap);
}

/* WP: focused after a page change (tabindex="-1"), no ring of its own */
.pie-blog__grid:focus {
  outline: none;
}

.pie-blog__grid[aria-busy="true"] {
  cursor: progress;
}

.pie-blog__empty {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  font-size: 16px;
}

/* Hidden empty state / actions; display:flex would otherwise win */
.pie-blog__empty[hidden],
.pie-blog__actions[hidden] {
  display: none;
}

.pie-blog__actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;   /* WP: pagination instead of the 12px-spaced CTA */
}

/* WP: pagination (the_posts_pagination()), styled like the filters */
.pie-blog__pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pie-blog__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #D9D9D9;
  border-radius: var(--pie-blog-radius-sm);
  background: var(--pie-blog-card);
  color: var(--pie-blog-heading);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color var(--pie-blog-dur) var(--pie-blog-ease),
    border-color var(--pie-blog-dur) var(--pie-blog-ease),
    color var(--pie-blog-dur) var(--pie-blog-ease);
}

.pie-blog__pagination a.page-numbers:hover {
  border-color: var(--pie-blog-gold);
  color: var(--pie-blog-gold-deep);
}

.pie-blog__pagination .page-numbers.current {
  border-color: var(--pie-blog-gold);
  background: var(--pie-blog-gold);
  color: #FFFFFF;
  font-weight: 600;
}

.pie-blog__pagination .page-numbers.dots {
  min-width: 0;
  padding-inline: 4px;
  border-color: transparent;
  background: transparent;
}

.pie-blog__pagination-arrow {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--pie-blog-dur) var(--pie-blog-ease);
}

.pie-blog__pagination-arrow--prev {
  transform: scaleX(-1);
}

.pie-blog__pagination .next:hover .pie-blog__pagination-arrow {
  transform: translateX(4px);
}

.pie-blog__pagination .prev:hover .pie-blog__pagination-arrow {
  transform: scaleX(-1) translateX(4px);
}

/* ==========================================================================
   5. Article cards
   ========================================================================== */
.pie-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pie-blog-border);
  border-radius: var(--pie-blog-radius);
  background: var(--pie-blog-card);
  transition: border-color var(--pie-blog-dur) var(--pie-blog-ease);
}

.pie-blog-card__media {
  position: relative;
  aspect-ratio: var(--pie-blog-image-ratio);
  overflow: hidden;
  background: #EEEAE3;   /* placeholder tone while the image loads */
}

/* WP: post without a featured image */
.pie-blog-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9B48F;
}

.pie-blog-card__placeholder-icon {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
}

.pie-blog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pie-blog-focal, 50% 50%);
  transition: transform 0.6s var(--pie-blog-ease);
}

.pie-blog-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px var(--pie-blog-card-pad) 20px;
}

.pie-blog-card__category {
  margin: 0 0 6px;
  color: var(--pie-blog-gold-text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pie-blog-card__title {
  margin: 0;
  color: var(--pie-blog-heading);
  font-family: inherit;   /* WP: see .pie-blog__title */
  font-size: clamp(18px, 0.35vw + 15px, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}

.pie-blog-card__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--pie-blog-dur) var(--pie-blog-ease);
}

/* Stretched link: the whole card opens the article; Read More stays above it */
.pie-blog-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pie-blog-card__excerpt {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

/* Hover / keyboard focus emphasis */
.pie-blog-card:hover,
.pie-blog-card:focus-within {
  border-color: var(--pie-blog-border-hover);
}

.pie-blog-card:hover .pie-blog-card__image,
.pie-blog-card:focus-within .pie-blog-card__image {
  transform: scale(1.04);
}

.pie-blog-card:hover .pie-blog-card__link {
  color: var(--pie-blog-gold-deep);
}

/* ==========================================================================
   6. Metadata and links
   ========================================================================== */
.pie-blog-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 18px;
}

.pie-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-blog-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pie-blog-muted);
  font-size: 13.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.pie-blog-card__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pie-blog-card__more {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 4px 0;
  color: var(--pie-blog-gold-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--pie-blog-dur) var(--pie-blog-ease);
}

.pie-blog-card__arrow {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--pie-blog-dur) var(--pie-blog-ease);
}

.pie-blog-card:hover .pie-blog-card__more,
.pie-blog-card__more:focus-visible {
  color: var(--pie-blog-gold-deep);
}

.pie-blog-card:hover .pie-blog-card__arrow,
.pie-blog-card:focus-within .pie-blog-card__arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   7. Animation-related states
   Before the script runs, revealable elements start transparent so the
   GSAP entrance does not flash. Only applies when scripting is enabled and
   motion is allowed; a CSS fail-safe reveals everything after 2.5s if the
   script never marks the section ready. The script removes this state
   (.is-pie-blog-ready) whether or not GSAP is available.
   ========================================================================== */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .pie-blog:not(.is-pie-blog-ready) :is([data-pie-blog-intro], [data-pie-blog-filters], [data-pie-blog-card], [data-pie-blog-actions]) {
    opacity: 0;
    animation: pie-blog-failsafe 0.01s linear 2.5s forwards;
  }
}

@keyframes pie-blog-failsafe {
  to { opacity: 1; }
}

/* ==========================================================================
   8. Responsive breakpoints
   ========================================================================== */

/* Below desktop: two columns keep titles and the metadata row on one line */
@media (max-width: 1199.98px) {
  .pie-blog {
    --pie-blog-gutter: clamp(16px, 3.2vw, 32px);
    --pie-blog-gap: 18px;
  }

  .pie-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet portrait */
@media (max-width: 991.98px) {
  .pie-blog {
    --pie-blog-card-pad: 20px;
  }

  .pie-blog__filters {
    gap: 10px;
  }

  /* Keep date, reading time and Read More on one line in two-column cards */
  .pie-blog-card__footer {
    column-gap: 10px;
  }

  .pie-blog-card__meta {
    column-gap: 14px;
  }

  .pie-blog-card__meta-item {
    gap: 6px;
  }
}

/* Mobile: single column */
@media (max-width: 767.98px) {
  .pie-blog {
    --pie-blog-gap: 16px;
    --pie-blog-card-pad: 18px;
  }

  .pie-blog__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pie-blog__eyebrow {
    gap: 12px;
    font-size: 14px;
  }

  .pie-blog__eyebrow::before,
  .pie-blog__eyebrow::after {
    width: 28px;
  }

  .pie-blog__intro {
    margin-top: 10px;
    font-size: 15.5px;
  }
}

/* Narrow phones: filters become one horizontally scrollable row that
   bleeds to the screen edges; the section itself never scrolls sideways */
@media (max-width: 599.98px) {
  .pie-blog__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 20px calc(var(--pie-blog-gutter) * -1) 18px;
    padding: 2px var(--pie-blog-gutter) 6px;   /* room for focus outline */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--pie-blog-gutter);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pie-blog__filters::-webkit-scrollbar {
    display: none;
  }

  .pie-blog__filter {
    min-height: 40px;
    scroll-snap-align: start;
  }

  /* WP: Previous / Next keep their arrows, the labels go */
  .pie-blog__pagination :is(.prev, .next) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 359.98px) {
  .pie-blog {
    --pie-blog-card-pad: 16px;
  }

  .pie-blog-card__meta {
    column-gap: 14px;
  }
}

/* ==========================================================================
   9. Accessibility and reduced motion
   ========================================================================== */
.pie-blog__sr,
.pie-blog__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pie-blog :is(a, button):focus-visible {
  outline: 2px solid var(--pie-blog-gold-deep);
  outline-offset: 3px;
}

.pie-blog__filter[aria-current="page"]:focus-visible,
.pie-blog__pagination .current:focus-visible {
  outline-color: var(--pie-blog-heading);
}

/* The stretched title link shows its focus ring around the whole card */
.pie-blog-card__link:focus-visible {
  outline: none;
}

.pie-blog-card__link:focus-visible::after {
  border-radius: var(--pie-blog-radius);
  outline: 2px solid var(--pie-blog-gold-deep);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .pie-blog *,
  .pie-blog *::before,
  .pie-blog *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }

  .pie-blog-card:hover .pie-blog-card__image,
  .pie-blog-card:focus-within .pie-blog-card__image,
  .pie-blog-card:hover .pie-blog-card__arrow,
  .pie-blog-card:focus-within .pie-blog-card__arrow,
  .pie-blog__pagination .next:hover .pie-blog__pagination-arrow {
    transform: none;
  }

  .pie-blog__pagination .prev:hover .pie-blog__pagination-arrow {
    transform: scaleX(-1);
  }
}

@media (forced-colors: active) {
  .pie-blog__filter[aria-current="page"],
  .pie-blog__pagination .page-numbers.current {
    border-width: 2px;
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}