/* =====================================================================
   BLOG — branded card panels, archive listing, single-post reading view
   Loaded after style.css/hero-banner.css (see includes/meta.php).
   Scoped with .blog-* classes so it never collides with the template.
   ===================================================================== */

/* ---- Branded fallback "cover" (used when a post has no image) -------- */
.blog-thumb-fallback {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1200 / 630;   /* match the landscape image cards */
  width: 100%;
  padding: 28px 30px 24px;
  border-radius: 15px;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.5s ease;
  overflow: hidden;
}
.blog-item-4:hover .blog-thumb-fallback {
  transform: scale(1.03);
}
.blog-thumb-fallback .bt-cat {
  font-family: var(--font_bdogrotesk);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.blog-thumb-fallback .bt-brand {
  font-family: var(--font_bdogrotesk);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
/* variant 1 — yellow */
.blog-thumb-fallback[data-variant="1"] {
  background: #FFD80C;
  color: #111111;
}
/* variant 2 — outlined light */
.blog-thumb-fallback[data-variant="2"] {
  background: #F4EFEA;
  color: #111111;
  border: 1px solid rgba(17, 17, 17, 0.12);
}
@media only screen and (max-width: 1399px) {
  .blog-thumb-fallback .bt-cat { font-size: 32px; }
}

/* ---- Archive (blog index + category pages) -------------------------- */
.blog-archive {
  padding-bottom: 120px;
}
.blog-archive__head {
  margin-bottom: 56px;
}
.blog-archive .section-subtitle-2 {
  display: inline-block;
  margin-bottom: 18px;
}
.blog-archive__title {
  font-family: var(--font_ppeditor);
  font-weight: 400;
  font-size: 72px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--primary);
  margin: 0 0 30px;
}
@media only screen and (max-width: 1199px) {
  .blog-archive__title { font-size: 52px; }
}
@media (max-width: 575px) {
  .blog-archive__title { font-size: 38px; }
}
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.blog-cats a {
  font-family: var(--font_bdogrotesk);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--primary);
  text-decoration: none;
  padding: 9px 20px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 100px;
  transition: all 0.3s ease;
}
.blog-cats a:hover {
  border-color: #111111;
}
.blog-cats a.is-active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}
.blog-empty {
  font-size: 18px;
  color: var(--secondary);
  padding: 20px 0 60px;
}

/* ---- Single post (reading view) ------------------------------------- */
.blog-single-area {
  padding-bottom: 120px;
  /* Responsive side gutters so the column never touches the edges on any screen. */
  padding-left: clamp(18px, 5vw, 40px);
  padding-right: clamp(18px, 5vw, 40px);
}
.blog-single {
  /* Wider, more spacious reading column than before; scales down on tablet/mobile.
     Capped so justified lines stay a comfortable length with the larger body font. */
  max-width: 960px;
  margin: 0 auto;
}
.blog-single__head {
  margin-bottom: 40px;
}
.blog-single__cat {
  display: inline-block;
  font-family: var(--font_bdogrotesk);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111111;
  background: #FFD80C;
  padding: 7px 16px;
  border-radius: 100px;
  text-decoration: none;
  margin-bottom: 26px;
}
.blog-single__title {
  font-family: var(--font_bdogrotesk);
  font-weight: 600;
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--primary);
  margin: 0 0 24px;
  text-wrap: balance;
}
.blog-single__title .bt-main { font-family: var(--font_bdogrotesk); font-weight: 600; }
.blog-single__title .bt-accent {
  font-family: var(--font_ppeditor);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}
@media only screen and (max-width: 1199px) {
  .blog-single__title { font-size: 42px; }
}
@media (max-width: 575px) {
  .blog-single__title { font-size: 31px; }
}
.blog-single__meta {
  font-family: var(--font_bdogrotesk);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--secondary);
}
.blog-single__thumb {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 50px;
}
.blog-single__thumb img { width: 100%; display: block; }

.blog-single__body {
  font-family: var(--font_opensans);   /* warm, humanist, highly readable body font */
  /* Fluid: ~19px on phones up to ~22px on large screens. */
  font-size: clamp(19px, 1.05rem + 0.35vw, 22px);
  line-height: 1.85;
  color: rgba(17, 17, 17, 0.9);
}
.dark .blog-single__body { color: rgba(255, 255, 255, 0.85); }
/* Clear separation between blocks, with extra air between paragraphs so each stands out. */
.blog-single__body > * + * { margin-top: 1.9em; }
.blog-single__body p + p { margin-top: 2.3em; }
.blog-single__body p { margin: 0; }
/* Justified, hyphenated body copy for a clean print-like measure (not the lead). */
.blog-single__body p:not(.blog-lead-para) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.blog-single__body h2 {
  font-family: var(--font_bdogrotesk);
  font-weight: 500;
  font-size: clamp(28px, 1.6rem + 1vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--primary);
  margin-top: 64px;
}
.blog-single__body h3 {
  font-family: var(--font_bdogrotesk);
  font-weight: 500;
  font-size: clamp(21px, 1.2rem + 0.4vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-top: 48px;
}
/* Heading hugs the text it introduces. */
.blog-single__body h2 + *,
.blog-single__body h3 + * { margin-top: 16px; }
.blog-single__body ul,
.blog-single__body ol {
  padding-left: 26px;
}
.blog-single__body li { margin-top: 13px; padding-left: 6px; }
.blog-single__body li::marker { color: var(--primary); }
.blog-single__body blockquote {
  margin: 46px 0;
  padding: 4px 0 4px 32px;
  border-left: 4px solid #FFD80C;
  font-family: var(--font_ppeditor);
  font-style: italic;
  font-size: clamp(23px, 1.3rem + 0.6vw, 31px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--primary);
}
.blog-single__body strong { font-weight: 600; color: var(--primary); }
.blog-single__body a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.blog-single__body a:hover { text-decoration-color: #FFD80C; }

.blog-single__foot {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}
.blog-back {
  font-family: var(--font_bdogrotesk);
  font-size: 16px;
  color: var(--primary);
  text-decoration: none;
}
.blog-back:hover { color: var(--secondary); }

/* "All posts →" link in the homepage blog section */
.blog-viewall {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--font_bdogrotesk);
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.3s ease;
}
.blog-viewall:hover { opacity: 0.6; }

/* Landscape card that matches the 1200x630 hero, so the whole image shows
   (was a portrait crop that cut the hero in half). */
.blog-item-4 .thumb {
  aspect-ratio: 1200 / 630;
  border-radius: 15px;
  overflow: hidden;
}
.blog-item-4 .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Blog lead paragraph: large editorial first para, yellow→black on scroll ---- */
.blog-lead-para {
  font-family: var(--font_bdogrotesk) !important;
  font-size: clamp(1.95rem, 3.4vw, 2.9rem) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.03em !important;
  text-align: left !important;   /* never justify the animated lead */
}
.blog-lead-para > div {
  background-image: linear-gradient(to right, #111111 50%, #FFD80C 51%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  display: block;
}
.blog-single__body .blog-lead-para + * {
  margin-top: 3rem;
}