/* ==========================================================================
   HOMEPAGE V2 / INTERIOR PAGES

   Carries the variant B direction across the other nine pages: every page now
   opens on an image band instead of type on white, and every blog thumbnail is
   a real picture instead of a grey gradient.

   Loads after style.css and v2-shared.css. New classes only, so the V1 rules
   for .page-hero, .error-page and .post-thumb are untouched and still apply
   anywhere the new class is absent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P.1  IMAGE BAND PAGE HERO          → Elementor: Container, background image
   -------------------------------------------------------------------------- */
.page-hero--img,
.error-page--img {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-2);
  color: #fff;
}
.page-hero--img { padding: 96px 0 88px; }
.error-page--img { min-height: 68vh; padding: 104px 0; }

.ph-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ph-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-hero--img::after,
.error-page--img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(6, 9, 13, 0.90) 0%, rgba(6, 9, 13, 0.58) 46%, rgba(6, 9, 13, 0.40) 100%),
    linear-gradient(to right, rgba(6, 9, 13, 0.72) 0%, rgba(6, 9, 13, 0.24) 60%, rgba(6, 9, 13, 0.10) 100%);
  pointer-events: none;
}
.page-hero--img > .wrap,
.error-page--img > .wrap {
  position: relative;
  z-index: 2;
}

/* Interior heroes read left aligned, so the page has a shape other than
   centred. The 404 stays centred, because a dead end should feel like one. */
.page-hero--img > .wrap { text-align: left; }
.page-hero--img .hero-sub { margin-left: 0; margin-right: 0; }
.page-hero--img .cta-row { justify-content: flex-start; }

.page-hero--img .breadcrumbs { color: rgba(255, 255, 255, 0.62); }
.page-hero--img .breadcrumbs a { color: rgba(255, 255, 255, 0.82); }
.page-hero--img .breadcrumbs a:hover { color: #fff; }

/* V1 fades the accent line from ink to grey. On a dark band it fades from
   white to a soft white instead, so the treatment survives the inversion. */
.page-hero--img .h1 .accent,
.error-page--img .h1 .accent {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.66) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero--img .hero-sub,
.error-page--img .hero-sub { color: rgba(255, 255, 255, 0.78); }
.error-page--img .error-code { color: var(--accent-on-dark); }

.page-hero--img .btn-primary,
.error-page--img .btn-primary { background: #fff; color: var(--ink); }
.page-hero--img .btn-primary:hover,
.error-page--img .btn-primary:hover { background: #f0f0f3; }
.page-hero--img .btn-ghost,
.error-page--img .btn-ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.30);
}
.page-hero--img .btn-ghost:hover,
.error-page--img .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.page-hero--img .hero-note,
.page-hero--img .form-fine { color: rgba(255, 255, 255, 0.58); }

/* The FAQ segment switcher lives inside the hero on both FAQ pages. */
.page-hero--img .faq-switch {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.page-hero--img .faq-switch a { color: rgba(255, 255, 255, 0.74); }
.page-hero--img .faq-switch a:hover { color: #fff; }
.page-hero--img .faq-switch a.is-on { background: #fff; color: var(--ink); }

/* --------------------------------------------------------------------------
   P.2  BLOG THUMBNAILS               → WP: the_post_thumbnail()
   --------------------------------------------------------------------------
   V1 shipped gradient placeholders with a "Featured image" caption. The image
   now sits inside the same box, so the V1 crop, hover and radius all still
   apply and the caption is gone.
   -------------------------------------------------------------------------- */
.post-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* V1 lays a warm radial wash over the thumb. Over a photograph it wants to be
   a legibility scrim instead, and it has to sit above the image. */
.post-thumb:has(img)::after {
  z-index: 1;
  background: linear-gradient(to top, rgba(8, 12, 18, 0.42), rgba(8, 12, 18, 0.04) 62%);
}

/* --------------------------------------------------------------------------
   P.3  ARTICLE FEATURED IMAGE        → WP: the_post_thumbnail() in single.php
   -------------------------------------------------------------------------- */
.article-figure {
  margin: 0 auto 56px;
  max-width: var(--container);
  padding: 0 var(--gutter);
}
.article-figure .plate { border-radius: var(--radius-lg); }
.article-figure figcaption {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 12px;
  text-align: center;
  letter-spacing: -0.004em;
}

/* --------------------------------------------------------------------------
   P.4  RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .page-hero--img { padding: 64px 0 60px; }
  .error-page--img { padding: 72px 0; min-height: 0; }
  .article-figure { margin-bottom: 40px; }
}