/* 404 Hero — simple full-width background image + left content */

/* Full-bleed wrapper (ignores parent paddings) */
.tv3-404-hero {
  position: relative;
  isolation: isolate;
  height: clamp(500px, 54.7vw, 800px);
  display: grid;
  align-items: center;
  overflow: hidden;

  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Maintain site-side gutters for inner content */
.tv3-404-hero__content {
  position: relative;
  width: 100%;
  height: 100%;
  padding-inline-start: var(--wp--style--root--padding-left, 0);
  padding-inline-end: var(--wp--style--root--padding-right, 0);
}

/* Background image */
.tv3-404-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover; /* <- was contain */
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Gentle darkening from left → right for legibility */
.tv3-404-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
      143% 99.46% at 100% 29.41%,
      rgba(0, 0, 0, 0) 25%,
      rgba(0, 0, 0, 0.15) 40%,
      #000 70%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
}

/* Content (left column) */
.tv3-404-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--wp--style--global--content-size, 1100px) + 16px);
  margin: 0 auto;
  padding-top: clamp(24px, 6vw, 176px);
  color: #fff;
}

.tv3-404-hero__title {
  margin-bottom: 24px;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(36px, 5.5vw, 56px);
  letter-spacing: 0.2px;
}

.tv3-404-hero__excerpt {
  max-width: 520px;
  margin-bottom: 40px;
  opacity: 0.9;
  font-size: 15px;
  line-height: 1.6;
}

.tv3-404-hero__actions {
  margin-top: 10px;
}

/* Mobile tweaks (match HomeHero rhythm) */
@media (max-width: 781px) {
  .tv3-404-hero {
    height: auto;
  }

  /* keep inner text padded, but make the image full-bleed */
  .tv3-404-hero__bg {
    position: relative; /* stacked flow */
    height: clamp(208px, 54.7vw, 400px);

    /* full-bleed regardless of parent padding */
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: none;
    margin-left: -50vw;
    margin-right: -50vw;

    /* ensure it truly fills */
    background-size: cover; /* override 'contain' on mobile */
    background-position: center;
  }

  .tv3-404-hero__content {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .tv3-404-hero__inner {
    padding-inline-start: 24px;
    padding-inline-end: 24px;
  }

  .tv3-404-hero__actions {
    padding-bottom: 80px;
  }
}

@media (max-width: 425px) {
  .tv3-404-hero__actions {
    width: 100%;
  }

  .tv3-404-hero__actions .cta_button {
    width: 100%;
  }

  .tv3-404-hero__actions .cta_button .wp-block-button__link {
    width: 100%;
  }
}
