/* Panelling Direct — blog bundle (v1.45.54).
   Page-specific layer; loads only on the contexts that need it.
   Source line ranges (v1.45.53): 7367-8441, 12086-12197

   LOAD ORDER IS LOAD-BEARING:
       style.css (core-early)  ->  page bundle(s)  ->  css/core-late.css
   Enqueued by pd_enqueue_assets() in functions.php. */

/* ── source lines 7367–8441 ── */
/* ══════════════════════════════════════════════════════════════
   v1.8.0 — BLOG ARCHIVE
   Figma: node 509:20354 (Blog-L, large breakpoint)
   Loaded by home.php (the WP "Posts page").

   Two intentional deviations from the design:
     1. Hero starts FLUSH with the bottom of the header (the gap
        in the design is being treated as unintentional).
     2. Hero uses a single bleed image with navy-gradient overlay
        on the right (same pattern as About/Trade hero) instead
        of two polaroids.

   Sections:
     1. .pd-blog-hero          — hero band with bleed image
     2. .pd-blog-section       — generic section wrapper (Featured/Latest)
     3. .pd-blog-grid          — grid container (featured: 2-col, latest: 3-col)
     4. .pd-blog-card          — reusable post card with featured/default variants
══════════════════════════════════════════════════════════════ */

.pd-blog {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #000;
}

/* ── 1. HERO ────────────────────────────────────────────────── */
/* Pattern matches About / Trade hero: navy section, content on the
   left in a row-max-capped inner with reserved right-side space, image
   absolute-positioned to right:0 of the section so it bleeds to the
   viewport edge with a navy → transparent gradient on its left edge. */
.pd-blog-hero {
  background: var(--lavender);
  color: #000;
  position: relative;
  overflow: hidden;
}
.pd-blog-hero__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px min(45%, 700px) 32px var(--row-pad);
  position: relative;
  z-index: 2;
  min-height: 340px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 58px;
}
/* Breadcrumb — namespaced to the blog hero so other breadcrumb
   usages (product pages etc.) aren't affected. */
.pd-blog-hero__breadcrumb {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 1.2;
}
.pd-blog-hero__breadcrumb,
.pd-blog-hero__breadcrumb .breadcrumb,
.pd-blog-hero__breadcrumb .woocommerce-breadcrumb {
  color: #000;
}
.pd-blog-hero__breadcrumb a,
.pd-blog-hero__breadcrumb .breadcrumb a,
.pd-blog-hero__breadcrumb .woocommerce-breadcrumb a {
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.pd-blog-hero__breadcrumb a:hover {
  text-decoration: underline;
}
.pd-blog-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-blog-hero__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
.pd-blog-hero__lede {
  font-size: 23px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  color: #000;
  max-width: 620px;
}
/* Hero image — anchored to viewport right edge */
.pd-blog-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(45%, 700px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.pd-blog-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-blog-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--lavender) 0%,
    rgba(244, 240, 248, 0) 50%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── 2. SECTIONS (Featured / Latest) ────────────────────────── */
.pd-blog-section {
  background: #fff;
}
.pd-blog-section__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 60px var(--row-pad);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pd-blog-section__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
/* Tighter top padding on Featured (it's right under the hero) */
.pd-blog-section--featured .pd-blog-section__inner {
  padding-top: 60px;
  padding-bottom: 0;     /* visually butts up against Latest */
}
.pd-blog-section--latest .pd-blog-section__inner {
  padding-top: 60px;
  padding-bottom: 80px;
  gap: 32px;
}
.pd-blog-section--empty .pd-blog-section__inner {
  padding: 60px var(--row-pad);
  text-align: center;
  font-size: 18px;
  color: #555;
}

/* ── 3. GRIDS ───────────────────────────────────────────────── */
.pd-blog-grid {
  display: grid;
  gap: 36px;
}
.pd-blog-grid--featured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pd-blog-grid--latest {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 62px;
}

/* ── 4. CARD ────────────────────────────────────────────────── */
.pd-blog-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.pd-blog-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #d9d9d9;     /* placeholder swatch — matches Figma greybox */
  aspect-ratio: 386 / 230;  /* default cards: 1.68:1 */
}
.pd-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.pd-blog-card:hover .pd-blog-card__media img {
  transform: scale(1.03);
}
.pd-blog-card__media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

.pd-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 22px;
}
.pd-blog-card__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  margin: 0;
  color: #000;
  /* Clamp to 2 lines so card heights stay roughly aligned */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.pd-blog-card__title a:hover,
.pd-blog-card__title a:focus-visible {
  text-decoration: underline;
}
.pd-blog-card__excerpt {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #000;
  /* Clamp the excerpt so cards line up. Default cards = 5 lines
     to fit the 272px content area; featured cards override below. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* v1.45.56: #969696 = 2.96:1. Dates, bylines and result counts are content. */
.pd-blog-card__date {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #767676; /* v1.45.56: was #969696 = 2.96:1 */
}

/* Featured variant — larger image, tighter excerpt clamp */
.pd-blog-card--featured .pd-blog-card__media {
  aspect-ratio: 598 / 348;
}
.pd-blog-card--featured .pd-blog-card__excerpt {
  -webkit-line-clamp: 3;
}

/* ── Responsive ─────────────────────────────────────────────── */
/* Intermediate breakpoint at ≤999px: Latest collapses 3→2, Featured
   collapses 2→1. */
@media (max-width: 999px) {
  .pd-blog-grid--latest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }
  .pd-blog-grid--featured {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pd-blog-hero__title {
    font-size: 44px;
  }
}

/* No XS Figma frame yet — sensible fallback for ≤779px so the page
   isn't broken on phones in the meantime. Hero image hidden,
   single-column grids. */
/* ── XS responsive (≤779px) ─────────────────────────────────
   Per Figma node 509:20618. Notable XS differences from L:
     1. Hero switches from navy (with bleed image) to a lavender
        band on white — no image, black text.
     2. Latest grid stays 2-column (not 1) but cards get a compact
        treatment: square 1:1 image, no excerpt, smaller title.
     3. Featured grid drops to 1-column but cards keep their full
        layout (image + title + excerpt + date).
*/
/* ── XS responsive (≤779px) ─────────────────────────────────
   Per Figma node 509:20618. XS differences from L:
     1. Hero: image hidden (single-column on lavender). Background
        and text colours unchanged from L — they're already lavender
        and black across all breakpoints.
     2. Latest grid stays 2-column (not 1) but cards get a compact
        treatment: square 1:1 image, no excerpt, smaller title.
     3. Featured grid drops to 1-column but cards keep their full
        layout (image + title + excerpt + date).
*/
@media (max-width: 779px) {

  /* Hero — image hidden, padding tightens. Colours inherited from
     the L rules (already lavender + black). */
  .pd-blog-hero__inner {
    padding: 32px var(--row-pad);
    min-height: 0;
    gap: 36px;
  }
  /* The ≤999px rule reduces the title to 44px to fit the L
     image-bleed layout at mid widths; on XS we revert to 52px per
     Figma because the no-image layout has the full viewport width. */
  .pd-blog-hero__title {
    font-size: 52px;
  }
  .pd-blog-hero__media {
    display: none;
  }

  /* Section paddings tighten */
  .pd-blog-section__inner {
    padding: 32px var(--row-pad);
  }
  .pd-blog-section--featured .pd-blog-section__inner {
    padding-top: 32px;
    padding-bottom: 0;
  }
  .pd-blog-section--latest .pd-blog-section__inner {
    padding-top: 32px;
    padding-bottom: 48px;
    gap: 24px;
  }
  /* .pd-blog-section__title — stays 33px per Figma (not reduced) */

  /* Featured: 1-col stack, cards keep full layout */
  .pd-blog-grid--featured {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Latest: STAYS 2-col on XS (Figma shows 191px cards side-by-side) */
  .pd-blog-grid--latest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    row-gap: 18px;
  }

  /* Compact card treatment for the default (Latest) variant on XS:
     square image, no excerpt, smaller title. Featured variant keeps
     its full layout via the more-specific selectors below. */
  .pd-blog-card--default .pd-blog-card__media {
    aspect-ratio: 1 / 1;
  }
  .pd-blog-card--default .pd-blog-card__body {
    gap: 18px;
    padding: 18px 22px;
  }
  .pd-blog-card--default .pd-blog-card__title {
    font-size: 16px;
    -webkit-line-clamp: 3;     /* allow longer titles to wrap */
  }
  .pd-blog-card--default .pd-blog-card__excerpt {
    display: none;             /* dropped on XS per Figma */
  }
  /* Featured-variant overrides reaffirmed so the more-specific
     `--default` rules above don't bleed across. */
  .pd-blog-card--featured .pd-blog-card__title {
    font-size: 23px;
  }
  .pd-blog-card--featured .pd-blog-card__excerpt {
    display: -webkit-box;
  }
}


/* ══════════════════════════════════════════════════════════════
   v1.9.0 — SINGLE POST
   Figma: node 509:20511 (Article-L, large breakpoint)
   Loaded by single.php.

   Layout:
     1. .pd-post__breadcrumb-row    — breadcrumb above hero
     2. .pd-post__hero              — featured image at full row width
     3. .pd-post__title-row         — H1 + byline, centred 826px column
     4. .pd-post__body-row          — article body, same column
     5. .pd-post-cta                — navy CTA card under article
     6. .pd-blog-section--latest    — reused from home.php (no new CSS)

   Article typography (.pd-post__content) mirrors the legal page —
   same 18px / 1.5 body, 33px Oswald H2, 27px list indent — so this
   block delegates to the existing patterns and only sets layout +
   anything article-specific (figure spacing, hero imagery).
══════════════════════════════════════════════════════════════ */

.pd-post {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #000;
}

/* ── Reusable centred column for article content ──────────────── */
/* The Figma uses a 826px column inside a 1234px row, which works out
   to ~204px gutter on each side. We implement as a simple max-width
   on the column with auto margins, capped at the row-max. */
.pd-post__column {
  max-width: 826px;
  margin: 0 auto;
  padding: 0 var(--row-pad);
  box-sizing: content-box;
}

/* ── 1. BREADCRUMB ─────────────────────────────────────────── */
.pd-post__breadcrumb-row {
  background: #fff;
}
.pd-post__breadcrumb-inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad) 0;
}
/* Breadcrumb scoped to the post page so other usages aren't affected.
   Resets padding/margin/max-width because the global `.breadcrumb`
   styles (lines ~1200) apply otherwise via cascade. */
.pd-post__breadcrumb-inner .breadcrumb,
.pd-post__breadcrumb-inner .woocommerce-breadcrumb {
  max-width: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.pd-post__breadcrumb-inner,
.pd-post__breadcrumb-inner .breadcrumb,
.pd-post__breadcrumb-inner .woocommerce-breadcrumb {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
}
.pd-post__breadcrumb-inner a {
  font-weight: 600;
  color: #000;
  text-decoration: none;
}
.pd-post__breadcrumb-inner a:hover {
  text-decoration: underline;
}

/* ── 2. HERO IMAGE ─────────────────────────────────────────── */
.pd-post__hero {
  background: #fff;
}
.pd-post__hero-inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 14px var(--row-pad) 0;
}
.pd-post__hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 533px;
  object-fit: cover;
  border-radius: 10px;
  background: #d9d9d9;     /* placeholder swatch while image loads */
}

/* ── 3. TITLE + BYLINE ─────────────────────────────────────── */
.pd-post__title-row {
  background: #fff;
  padding: 56px 0 12px;
}
.pd-post__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 47px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #000;
}
.pd-post__byline {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: #767676; /* v1.45.56: was #969696 = 2.96:1 */
}
.pd-post__byline time {
  /* keep the date inline; no special styling */
}

/* ── 4. ARTICLE BODY ──────────────────────────────────────── */
.pd-post__body-row {
  background: #fff;
  padding: 32px 0 60px;
}
.pd-post__content {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
}

/* Block typography — matches the legal page (same Figma typography
   tokens). Headings, paragraphs, lists, links, blockquote, table,
   hr, images all styled. Selectors target .pd-post__content rather
   than reusing .pd-legal__content so the two templates can diverge
   later if needed. */

.pd-post__content h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
.pd-post__content h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  margin: 0;
  color: #000;
}
.pd-post__content h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  color: #000;
}

.pd-post__content p {
  margin: 0;
  line-height: 1.5;
}

/* Lists — Figma uses 27px indent, same as legal */
.pd-post__content ul,
.pd-post__content ol {
  margin: 0;
  padding: 0 0 0 27px;
}
.pd-post__content ul { list-style: disc; }
.pd-post__content ol { list-style: decimal; }
.pd-post__content li {
  margin: 0;
  line-height: 1.5;
}
.pd-post__content li + li {
  margin-top: 8px;
}
.pd-post__content li > ul,
.pd-post__content li > ol {
  margin-top: 8px;
}

/* Inline */
.pd-post__content strong,
.pd-post__content b { font-weight: 700; }
.pd-post__content em,
.pd-post__content i { font-style: italic; }
.pd-post__content a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-post__content a:hover,
.pd-post__content a:focus-visible {
  color: var(--navy);
}

/* v1.45.62 — the byline author link had NO rule of its own, so it fell all
   the way through to the browser default (#0000EE, and purple once visited).
   Matched to the in-article link treatment above, per M. */
.pd-post__author-link {
  color: var(--navy-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-post__author-link:hover,
.pd-post__author-link:focus-visible {
  color: var(--navy);
}

/* Images / figures — full column width with rounded corners,
   matching the in-article example in the Figma frame. */
.pd-post__content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #d9d9d9;
}
.pd-post__content figure {
  margin: 0;
}
.pd-post__content figcaption {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

/* WP block-editor helpers — full / wide alignment within a narrow
   column. Wide aligns to the row-max (1300px); full breaks out of
   the column entirely. Without these the editor's `alignwide` /
   `alignfull` classes do nothing. */
.pd-post__content .alignwide {
  width: 100vw;
  max-width: var(--row-max);
  margin-left: 50%;
  transform: translateX(-50%);
}
.pd-post__content .alignfull {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}
.pd-post__content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* Blockquote */
.pd-post__content blockquote {
  margin: 0;
  padding: 12px 18px;
  border-left: 3px solid var(--navy-mid);
  background: var(--lavender);
  border-radius: 0 6px 6px 0;
}
.pd-post__content blockquote p { margin: 0; }

/* Tables */
.pd-post__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.pd-post__content th,
.pd-post__content td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.pd-post__content th {
  font-weight: 700;
  background: var(--lavender);
}

/* Horizontal rule */
.pd-post__content hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
}

/* Block rhythm — same per-type adjacent-sibling pattern as the legal
   page (avoids the universal `> * + *` specificity bug we hit there).
   Headings get extra breathing room above. Paragraphs, lists, etc.
   share a 23px rhythm; consecutive paragraphs tighten to 8px. */
.pd-post__content > * + p,
.pd-post__content > * + ul,
.pd-post__content > * + ol,
.pd-post__content > * + blockquote,
.pd-post__content > * + figure,
.pd-post__content > * + table,
.pd-post__content > * + hr,
.pd-post__content > * + img {
  margin-top: 23px;
}
.pd-post__content > * + h2 { margin-top: 40px; }
.pd-post__content > * + h3 { margin-top: 32px; }
.pd-post__content > * + h4 { margin-top: 24px; }
.pd-post__content > p + p { margin-top: 8px; }

/* In-content pagination (Page Break block) */
.pd-post__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.pd-post__pagination a,
.pd-post__pagination > span {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: #000;
}
.pd-post__pagination > span {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ── 5. POST CTA CARD ──────────────────────────────────────── */
.pd-post-cta {
  background: #fff;
  padding: 32px 0 60px;
}
.pd-post-cta__inner {
  max-width: 826px;
  margin: 0 auto;
  padding: 0 var(--row-pad);
  box-sizing: content-box;
}
.pd-post-cta__card {
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 34px 40px;
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.pd-post-cta__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.pd-post-cta__body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  color: #fff;
}
.pd-post-cta__body a {
  color: #fff;
  text-decoration: underline;
}
.pd-post-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 55px;
  padding: 12px 22px;
  background: var(--yellow);
  color: var(--navy);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.41;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  transition: filter 0.15s ease;
}
/* v1.45.56: `outline: none` inside the :focus-visible rule left a 5%
   brightness change as the only focus cue. Hover and focus are now
   distinguishable; the shared outline lives in core-late.css.
   SUPERSEDED: .pd-post-cta__button:hover, .pd-post-cta__button:focus-visible
               { filter: brightness(0.95); color: var(--navy);
                 text-decoration: none; outline: none; } */
.pd-post-cta__button:hover,
.pd-post-cta__button:focus-visible {
  filter: brightness(0.95);
  color: var(--navy);
  text-decoration: none;
}

/* ── 6. RELATED LATEST GRID ────────────────────────────────── */
/* Reuses .pd-blog-section + .pd-blog-grid--latest from the v1.8.0
   blog archive — no new CSS needed. We just add a small border-top
   to visually separate the related strip from the article body. */
.pd-post__related {
  border-top: 1px solid var(--rule);
}

/* ── XS responsive (≤779px) ─────────────────────────────────
   Per Figma node 509:20942. Notable XS findings: typography stays
   unchanged from L (47px title, 33px H2, 18px body, 33px CTA title,
   22px CTA button) — only the structural sizes change (padding, hero
   image height, column width). The narrower viewport just causes
   text to wrap to more lines.

   Latest section reuses .pd-blog-grid--latest which already collapses
   to 2-col with compact cards on XS via the v1.8.1 blog archive
   styles — no additional rules needed here.
*/
@media (max-width: 779px) {
  /* Breadcrumb — tighter top padding */
  .pd-post__breadcrumb-inner { padding-top: 20px; }

  /* Hero image — reduce max-height; on a 440px viewport the natural
     1.8:1 aspect ratio gives ~244px. Cap a touch higher to allow
     wider aspect ratios without cropping aggressively. */
  .pd-post__hero-img {
    max-height: 280px;
    border-radius: 8px;
  }

  /* Title row — tighter vertical padding */
  .pd-post__title-row { padding: 36px 0 12px; }
  /* .pd-post__title — 47px stays per Figma */

  /* Body row — tighter vertical padding */
  .pd-post__body-row { padding: 32px 0 40px; }
  /* .pd-post__content typography (18px body, 33px H2, 24px H3) all
     stay per Figma. Headings will wrap to 2 lines at this width
     which is the intended behaviour. */

  /* CTA — outer wrapper padding tightens, card itself stays at the
     same 34px/40px insets per Figma. Button stays full width at
     55px tall / 22px text. */
  .pd-post-cta { padding: 24px 0 40px; }
  /* .pd-post-cta__card padding stays 34px 40px */
  /* .pd-post-cta__title stays 33px */
  /* .pd-post-cta__body stays 18px */
  /* .pd-post-cta__button stays 55px / 22px */
}


/* ══════════════════════════════════════════════════════════════
   v1.10.0 — SEARCH RESULTS
   Figma: node 562:24098 (Search Results - L)

   Routing: `?s=foo` queries are biased toward products (see
   inc/search.php), so the search results render via
   archive-product.php with `is_search() === true`. That branch
   loads the search-header partial below in place of the title band
   and skips the sub-categories carousel.

   Sections:
     1. .pd-search-header  — title + count + sort dropdown
     2. (product grid)     — reuses .pd-archive ul.products + .pd-card
     3. (pagination)       — reuses .pd-pagination
     4. .pd-search-empty   — friendly "no results" state
══════════════════════════════════════════════════════════════ */

/* ── 1. SEARCH HEADER ──────────────────────────────────────── */
.pd-search-header {
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.pd-search-header__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad) 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-search-header__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.4;
  margin: 0;
  color: #000;
}
.pd-search-header__term {
  /* No special styling — Figma shows the term in the same Oswald
     bold treatment as the rest of the title. We keep the span
     for selector flexibility (e.g. clients adding emphasis later). */
}
.pd-search-header__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pd-search-header__count {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  color: #767676; /* v1.45.56: was #969696 = 2.96:1 */
}

/* Sort form ----------------------------------------------------- */
.pd-search-sort {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-search-sort__label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}
/* Wrapper holds the chevron caret */
.pd-search-sort__control {
  position: relative;
  width: 181px;
}
.pd-search-sort__control::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.pd-search-sort__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 38px;
  padding: 8px 36px 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  cursor: pointer;
}
.pd-search-sort__select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8, 1, 83, 0.1);
}
/* No-script fallback submit — only visible if JS is disabled
   (auto-submit on change is wired up in main.js). */
.pd-search-sort__submit {
  appearance: none;
  cursor: pointer;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--navy);
  border-radius: 5px;
  background: var(--navy);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

/* ── 2. PRODUCT GRID ───────────────────────────────────────── */
/* The grid itself is provided by .pd-archive ul.products from the
   v1.0 archive styles — no new rules needed. We just give the
   search variant of the archive a top margin to separate it from
   the search header (the archive's normal margin sits under the
   subcategories carousel which doesn't render here). */
.pd-archive--search .pd-products-wrap {
  margin-top: 32px;
}

/* ── 3. PAGINATION ─────────────────────────────────────────── */
/* Reuses .pd-pagination from v1.0 — no new CSS. */

/* ── 4. EMPTY STATE ────────────────────────────────────────── */
.pd-search-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px var(--row-pad) 80px;
  text-align: center;
}
.pd-search-empty__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #000;
}
.pd-search-empty__body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 24px;
  color: #000;
}
.pd-search-empty__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 12px 32px;
  background: var(--navy);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.41;
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.pd-search-empty__link:hover,
.pd-search-empty__link:focus-visible {
  background: var(--navy-mid);
  color: #fff;
}

/* ── Fallback search.php (non-product) results list ────────── */
/* Rendered when WC is disabled or a non-product search is forced.
   Plain article cards stacked vertically. */
.pd-search-results {
  list-style: none;
  margin: 0 auto;
  padding: 32px var(--row-pad);
  max-width: 826px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pd-search-result__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.pd-search-result__title a {
  color: var(--navy);
  text-decoration: none;
}
.pd-search-result__title a:hover {
  text-decoration: underline;
}
.pd-search-result__excerpt {
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}

/* ── Responsive ────────────────────────────────────────────── */
/* Per Figma node 562:24347. Notable XS findings: title shrinks
   33px → 27px, sort moves BELOW the result count and aligns to
   the left (was inline + right-aligned on L). Result count and
   sort text both shrink 16px → 14px. The product grid is handled
   by the existing archive responsive rules (.pd-archive
   ul.products goes 4→3→2 at the standard breakpoints).

   Breakpoint matched to ≤560px so the search-header layout shift
   syncs with the existing 4→2 grid shift (also at 560px) — there's
   no explicit tablet design, so the 561-779px range keeps the
   horizontal sort layout from L. */
@media (max-width: 560px) {
  .pd-search-header__inner {
    padding: 18px var(--row-pad) 14px;
    gap: 10px;
  }
  .pd-search-header__title {
    font-size: 27px;
  }
  /* Sort stacks below count, aligned to the left edge of the inner. */
  .pd-search-header__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pd-search-header__count {
    font-size: 14px;
  }
  .pd-search-sort {
    /* Override the L `align-items: center` — XS keeps the label and
       select aligned at the same row but no further constraints. */
    margin: 0;
  }
  .pd-search-sort__label {
    font-size: 14px;
  }
  .pd-search-sort__select {
    height: 36px;
    font-size: 14px;
  }
  /* Empty state */
  .pd-search-empty {
    padding: 40px var(--row-pad) 60px;
  }
  .pd-search-empty__title { font-size: 24px; }
  .pd-search-empty__body  { font-size: 16px; }
}



/* ── source lines 12086–12197 ── */
/* ══════════════════════════════════════════════════════════════
   AUTHOR ARCHIVE (author.php) — Figma 890:10906
══════════════════════════════════════════════════════════════ */
.pd-author { background: #fff; }

.pd-author-hero__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad) 16px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.pd-author-hero__copy {
  flex: 1 1 0;
  min-width: 0;
  max-width: 725px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pd-author-hero__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.pd-author-hero__role {
  font-family: 'Open Sans', sans-serif;
  font-size: 23px;
  line-height: 1.5;
  color: #000;
  margin: 0;
}
.pd-author-hero__bio p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  margin: 0 0 16px;
  max-width: 613px;
}
.pd-author-hero__bio p:last-child { margin-bottom: 0; }
.pd-author-hero__bio-more:not([hidden]) { margin-top: 16px; }
.pd-author-hero__more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 4px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-mid, #30287C);
  cursor: pointer;
}
.pd-author-hero__more:hover { text-decoration: underline; }
.pd-author-hero__links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.pd-author-hero__linkedin { display: inline-flex; }
.pd-author-hero__email {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #000;
  text-decoration: none;
}
.pd-author-hero__email:hover span { text-decoration: underline; }

/* Tilted framed photo — the design's polaroid-style card. Hidden on
   mobile (the XS frame omits it). */
.pd-author-hero__media {
  flex: 0 0 auto;
  padding: 24px 40px 40px 24px;
}
.pd-author-hero__frame {
  display: block;
  background: #fff;
  padding: 23px;
  border: 1px solid var(--rule, #ececec);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(8, 1, 83, 0.14);
  transform: rotate(6deg);
  max-width: 406px;
}
.pd-author-hero__frame img {
  display: block;
  width: 347px;
  max-width: 100%;
  height: 329px;
  object-fit: cover;
}

.pd-author-posts .pd-blog-section__inner { padding-top: 22px; }

@media (max-width: 999px) {
  .pd-author-hero__media { display: none; }
}
@media (max-width: 779px) {
  .pd-author-hero__title { font-size: 40px; }
  .pd-author-hero__role { font-size: 20px; }
}