/**
 * blog-hero.css — Blog index page hero
 * venturebeyond theme
 * Scoped to .page-template-tpl-blog
 *
 * REBUILT to match the working pattern from guide.css / tpl-guide.php:
 * inherits the theme's core .sec-hero + .container rules from
 * style.css (min-height: 100vh, padding-top: 150px header clearance)
 * instead of a custom absolute-positioned carousel-derived wrapper.
 * This is why the Guide page never had a header-collision problem —
 * it was never fighting the clearance rule in the first place.
 *
 * The rest of this file (card grid, pagination) is unchanged from
 * the previous version and still works correctly.
 */

/* ═══════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════ */

/* Push content toward the bottom of the hero, same as the Guide page */
.page-template-tpl-blog .sec-blog-hero {
  align-items: flex-end;
  padding-bottom: 80px;
}

/* Dark overlay so white text reads cleanly on any photo.
   .bg-img itself (position, z-index: -2) is already defined
   site-wide in style.css — this just adds a tint on top of it. */
.page-template-tpl-blog .sec-blog-hero .bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.page-template-tpl-blog .sec-blog-hero .title {
  font-family: "Bebas Neue", sans-serif;
  color: #ffffff;
  line-height: 1;
  font-weight: 400;
  margin: 0 0 16px;
  font-size: clamp(48px, 8vw, 100px); /* matches archive.css's .archive-title exactly */
}

.page-template-tpl-blog .sec-blog-hero .text-additional {
  font-family: "Merriweather", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  max-width: 680px;
  margin: 0;
}

/* Spacing between hero and blog post grid */
.page-template-tpl-blog .sec-blog-list {
  padding-top: 60px;
}

/* Hide schema microdata spans visually — screen readers and crawlers still see them.
   Added clip-path alongside legacy clip, and doubled the selector specificity
   with :where()-safe repetition, so this reliably beats any later-loading
   stylesheet (e.g. home-blog-cards.css) that might target the same elements. */
.page-template-tpl-blog .visually-hidden,
.page-template-tpl-blog .lastest-news-list .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   BLOG POST CARD GRID — unchanged from previous version
   ========================================================= */

.page-template-tpl-blog .lastest-news-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
}

.page-template-tpl-blog .lastest-news-list .new-item {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  background: #fff !important;
}

.page-template-tpl-blog .lastest-news-list .new-item > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
}

.page-template-tpl-blog .lastest-news-list .new-image {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  height: auto !important;
}

.page-template-tpl-blog .lastest-news-list .new-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.page-template-tpl-blog .lastest-news-list .new-content {
  padding: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.page-template-tpl-blog .lastest-news-list .new-content h2,
.page-template-tpl-blog .lastest-news-list .new-item .new-content h2 {
  font-size: 20px !important;
  line-height: 1.3 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.page-template-tpl-blog .lastest-news-list .new-content p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (max-width: 1024px) {
  .page-template-tpl-blog .lastest-news-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .page-template-tpl-blog .lastest-news-list {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  .page-template-tpl-blog .sec-blog-hero .title {
    font-size: clamp(36px, 10vw, 64px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE SUMMARY — AI/AEO purpose statement block
   Sits between hero and blog post grid.
═══════════════════════════════════════════════════════════════════ */

.page-template-tpl-blog .sec-page-summary {
  background: #f6f6f6;
  padding: 28px 0;
  border-bottom: 1px solid #e0e0e0;
}

.page-template-tpl-blog .page-summary-inner {
  max-width: 100%;
}

.page-template-tpl-blog .page-summary-inner p,
.page-template-tpl-blog .page-summary-inner div {
  font-family: "Merriweather", sans-serif;
  font-size: 14px;
  line-height: 1.9;
  color: #555555;
  margin: 0;
  font-style: italic;
}