/**
 * Boxed page hero.
 *
 * Geometry taken from the page it replaces (Elementor container `be01df0` on
 * template #44): min-height 480px (300px on small screens), 12px radius,
 * content bottom-left, a flat 50% black overlay, and the image covering,
 * centred. Padding is 56px on all four sides at every width — the live site
 * drops to 24px on phones, but this was asked for uniform.
 */

.deka-page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;

  /*
   * 1560px cap, but never edge to edge: the live site nests this in a boxed
   * container with 20px padding, so there is always a gutter no matter how
   * narrow the window. A bare max-width leaves the hero touching both edges on
   * any viewport under 1560px, which is most laptops.
   */
  width: min(100% - 2.5rem, var(--deka-container-wide));
  min-height: 30rem; /* 480 */
  margin: 1.25rem auto; /* 20px above and below, as on the live site */
  padding: 3.5rem; /* 56 */
  border-radius: var(--deka-radius-md); /* 12 */
  overflow: hidden;
  isolation: isolate;
  background-color: var(--deka-oxblood-900);
  background-image: var(--deka-page-hero-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--deka-white);
}

/*
 * Deliberately NOT background-attachment: fixed.
 *
 * `fixed` resolves `cover` against the viewport instead of this box, so a
 * 1560×480 hero ends up showing a narrow band through a viewport-sized image —
 * heavily zoomed, and the framing shifts with window height. Scrolling
 * attachment is what makes `cover` mean "cover this element", which is the
 * framing the design shows. The live site gets its drift from an Elementor
 * motion-effects layer, not from this property.
 */

.deka-page-hero--plain { background-image: none; }

/* Flat 50% black across the whole image, matching the live site. A bottom-only
   gradient leaves the top of the render bright and reads as a different photo. */
.deka-page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 50%);
}

/* 48/56 on the live site, 30/32 on small screens. Weight 400 with the accent
   word at 700 — not a light base, which is what I had first. */
.deka-page-hero__title {
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); /* 30 → 48 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.1667; /* 56/48 */
  letter-spacing: var(--deka-tracking-tight);
  text-shadow: 0 2px 18px rgb(0 0 0 / 35%);
}

.deka-page-hero__accent { font-weight: var(--deka-weight-bold); }

@media (max-width: 48rem) { /* 768 */
  .deka-page-hero {
    min-height: 18.75rem; /* 300 — the live site's mobile height */
  }
}