/* ============================================
   1) WRAPPER & BACKGROUND PAPER
   - Keeps your paper texture background
   - Centers the section content
============================================ */
.image-hero-block-narrow-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0;
}
.image-hero-block-narrow-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #b4abaa8f;
  background-image: url('https://www.highchaparral.se/wp-content/uploads/2025/01/paper-texture-web.jpg');
  background-size: cover;       /* ensure full coverage */
  background-position: center;  /* center texture */
  background-repeat: no-repeat; /* no tiling */
  background-blend-mode: darken;
}

/* ============================================
   2) HERO IMAGE CONTAINER
   - Switch from background-image to a real <img>
   - Supports both legacy .image-hero-block and new .image-hero-block-narrow
============================================ */
.image-hero-block-narrow,
.image-hero-block-narrow-wrapper .image-hero-block {
  position: relative;
  min-height: 60vh;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Background image element (fills container) */
.image-hero-background {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  aspect-ratio: 16 / 8;
}

/* ============================================
   3) OVERLAY & CONTENT CONTAINER
   - Overlay positions the content card above the image
   - Content card uses your paper + multiply style
============================================ */
.image-hero-overlay {
  /* separate layer above image */
  position: relative;
  z-index: 1;
  /* pull content up over the image */
  margin: -130px auto 0;
  width: 100%;
  max-width: 1200px;
}

/* Content card */
.image-hero-content-container {
  background-color: #534440;
  background-image: url('https://www.highchaparral.se/wp-content/uploads/2025/01/paper-texture-web.jpg');
  background-size: cover;       /* ensure full coverage */
  background-position: center;  /* center texture */
  background-repeat: no-repeat; /* no tiling */
  background-blend-mode: multiply;

  position: relative;
  overflow: hidden;
  padding: 40px;
  max-width: 800px;
  z-index: 56;
  box-shadow: 0 1px 22px 0 #0808083b;
}

/* Alignment modifiers (left/center/right) */
.image-hero-content-container--left  { margin-left: 0;      margin-right: auto; }
.image-hero-content-container--right { margin-left: auto;   margin-right: 0;    }
.image-hero-content-container--center{ margin-left: auto;   margin-right: auto; }

/* Inner content width */
.image-hero-content {
  max-width: 800px;
  margin: 0 auto;
}
.image-hero-content .button {
  margin: 0 auto;
  display: flex;
  width: max-content;
}

/* ============================================
   4) TYPOGRAPHY
============================================ */
.image-hero-content h2 {
  color: #f7f2e7;
  font-size: 2.2rem;
  text-align: left;
  margin: 0;
}
.image-hero-content p,
.image-hero-richtext {
  color: #f7f2e7;
  font-size: 1.2rem;
  margin: 1rem 0;
  text-align: left;
}

/* ============================================
   5) DECORATIVE TEXTURES (if used in markup)
============================================ */
.image-text-Dirt_light-right,
.image-text-Dirt_light-left {
  pointer-events: none; /* decorative: don't intercept focus/clicks */
}

/* ============================================
   6) WCAG 2.2 HELPERS
   - SR-only utility
   - Focus visible
   - Minimum target size
   - Reduced motion
============================================ */
/* Screen-reader-only text (e.g., "(opens in a new tab)") */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Ensure keyboard focus is clearly visible and not obscured */
.hero-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  scroll-margin: 1rem; /* helps with sticky headers */
}

/* Comfortable hit target (≥ 44x44) */
.hero-button {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .image-hero-background,
  .image-hero-content,
  .hero-button {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   7) RESPONSIVE TWEAKS
============================================ */
@media (max-width: 1200px) {
  .image-hero-overlay {
    margin: -100px auto 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
  .image-hero-overlay {
    margin: -60px auto 0;
  }
  .image-hero-content-container {
    padding: 28px;
    max-width: 100%;
  }
  .image-hero-content h2 {
    font-size: 1.4rem;
  }
  .image-hero-content p,
  .image-hero-richtext {
    font-size: 1rem;
  }
}