/* ------------------------------------------------------------------
   EDITORIAL FAMILY — blog index, archives, search, 404
   Built 26 Aug 2026. These families are absent from the design of record
   (Mitch, 24 Aug: "Claude designs the pages the ChatGPT design does not
   contain"), so they are assembled from the design's own vocabulary and
   sit alongside the testimonials archive as a matching pair.
   Declared explicitly because Elementor does not enqueue Global Class CSS
   on a theme template.
   ------------------------------------------------------------------ */
/* Hello Elementor constrains .site-main, which capped this whole family at 1140px and
   stopped the hero band ever reaching the viewport edge. Released so the design's own
   `.page-hero.fd-shell { width:100%; padding-inline: calc(0.5*(100% - shell)) }` breakout
   works here exactly as it does on the 13 design pages, and so the closing CTA band runs
   full-bleed too. (Mitch, 26 Aug: the blog hero must be full width like the other pages.) */
/* Hello Elementor's cap is `body:not([class*="elementor-page-"]) .site-main` = (0,2,1),
   so a bare .fd-editorial (0,1,0) loses to it. Matched and beaten explicitly. */
body .site-main.fd-editorial.fd-editorial { width: 100%; max-width: none; margin: 0; padding: 0; }

/* Inner sections stay on the shell line. The hero and the CTA band deliberately do NOT
   carry this: they are full-bleed and hold their copy in place with symmetric padding. */
.fd-editorial .fd-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.fd-editorial .page-hero.fd-shell { width: 100%; }

/* The hero itself is left to the design layer (border, padding-block, stripe, ornament,
   type scale), so this family cannot drift from the other pages. Only the intro line,
   which the design has no equivalent for, is styled here. */
.fd-editorial .fd-ed-intro { margin: 18px 0 0; max-width: 720px; font-size: 19px; line-height: 1.6; color: var(--fd-text-2, #555); }

/* Category chips */
.fd-editorial .fd-ed-filters { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 34px 0; }
.fd-editorial .fd-chip {
  display: inline-block; padding: 8px 16px; border: var(--fd-border, 2px solid #000);
  background: #fff; color: var(--fd-ink, #000); font-size: 14px; text-decoration: none;
}
.fd-editorial .fd-chip:hover { box-shadow: 3px 3px 0 var(--fd-ink, #000); transform: translate(-1px,-1px); }
.fd-editorial .fd-chip.is-on { background: var(--fd-ink, #000); color: #fff; }

/* Card grid */
.fd-editorial .fd-ed-list { padding-block: 40px 96px; }
.fd-editorial .fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.fd-editorial .fd-card {
  display: flex; flex-direction: column; background: #fff; color: var(--fd-ink, #000);
  border: var(--fd-border, 2px solid #000); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fd-editorial .fd-card:hover { transform: translate(-3px,-3px); box-shadow: var(--fd-shadow, 5px 5px 0 #000); }
.fd-editorial .fd-card__media {
  display: block; aspect-ratio: 16 / 9; background: var(--fd-accent, #fd2eb3);
  border-bottom: var(--fd-border, 2px solid #000); overflow: hidden;
}
.fd-editorial .fd-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-editorial .fd-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; flex: 1; }
.fd-editorial .fd-card__cat {
  align-self: flex-start; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--fd-yellow, #fdd365); border: var(--fd-border, 2px solid #000); padding: 3px 9px;
}
.fd-editorial .fd-card__title { font-size: 21px; line-height: 1.22; }
.fd-editorial .fd-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--fd-text-2, #555); }
.fd-editorial .fd-card__foot {
  margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; font-size: 13px; color: var(--fd-text-2, #555);
  border-top: 1px solid #e6e6e6;
}
.fd-editorial .fd-card__more { color: var(--fd-pink-deep, #8f005f); }

/* 404 helper cards */
.fd-editorial .fd-grid--links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fd-editorial .fd-linkcard {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; text-decoration: none;
  color: var(--fd-ink, #000); background: #fff; border: var(--fd-border, 2px solid #000);
  border-top: 8px solid var(--fd-accent, #fd2eb3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.fd-editorial .fd-linkcard:hover { transform: translate(-3px,-3px); box-shadow: var(--fd-shadow, 5px 5px 0 #000); }
.fd-editorial .fd-linkcard__title { font-size: 20px; line-height: 1.2; }
.fd-editorial .fd-linkcard__sub { font-size: 14px; color: var(--fd-text-2, #555); }
.fd-editorial .fd-ed-help { padding-block: 0 96px; }

/* Pagination */
.fd-editorial .fd-pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.fd-editorial .fd-pager .page-numbers {
  display: inline-block; min-width: 42px; text-align: center; padding: 9px 12px;
  border: var(--fd-border, 2px solid #000); background: #fff; color: var(--fd-ink, #000); text-decoration: none;
}
.fd-editorial .fd-pager .page-numbers.current { background: var(--fd-ink, #000); color: #fff; }
.fd-editorial .fd-pager a.page-numbers:hover { box-shadow: 3px 3px 0 var(--fd-ink, #000); transform: translate(-1px,-1px); }

/* Empty state */
.fd-editorial .fd-empty { border: var(--fd-border, 2px solid #000); padding: 40px 28px; background: var(--fd-blue-tint, #effbff); }
.fd-editorial .fd-empty p { margin: 0 0 18px; font-size: 18px; }
.fd-editorial .fd-empty input[type="search"] { border: var(--fd-border, 2px solid #000); padding: 10px 12px; font: inherit; min-width: min(320px, 100%); }
.fd-editorial .fd-empty button,
.fd-editorial .fd-empty input[type="submit"] {
  background: var(--fd-orange, #fb8d62); color: var(--fd-ink, #000);
  border: var(--fd-border, 2px solid #000); border-radius: 0; box-shadow: none;
  padding: 10px 18px; font: inherit; cursor: pointer;
}

/* Closing CTA band */
.fd-editorial .next-step { padding-block: 84px; background: var(--fd-pink, #fd2eb3); border-top: 2px solid var(--fd-ink, #000); }
.fd-editorial .next-step > .fd-shell { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fd-editorial .next-step h2 { margin: 0; font-size: var(--fd-t-h2, clamp(34px,4.6vw,68px)); line-height: 1.05; }
.fd-editorial .next-step p { margin: 0; max-width: 620px; }
.fd-editorial .next-step .fd-btn {
  margin-top: 10px; display: inline-block; padding: 14px 26px; text-decoration: none;
  background: #fff; color: var(--fd-ink, #000); border: var(--fd-border, 2px solid #000);
  box-shadow: var(--fd-shadow, 5px 5px 0 #000);
}
.fd-editorial .next-step .fd-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--fd-ink, #000); }

@media (max-width: 1024px) {
  .fd-editorial .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-editorial .fd-grid--links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fd-editorial .fd-shell { width: min(100% - 30px, 1180px); }
  .fd-editorial .page-hero { padding-block: 60px 44px; }
  .fd-editorial .fd-grid,
  .fd-editorial .fd-grid--links { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fd-editorial .next-step { padding-block: 60px; }
}