/**
 * Home: mission statement.
 *
 * Values from Elementor #246: banner min-height 480, radius 12, 56px padding
 * (20 on small screens), photograph cover/centre under a black overlay at 0.5,
 * copy 30/400 white (18 small), pill button with a 1px white border.
 */

.deka-home-mission {
  width: min(100% - 2.5rem, var(--deka-container-wide));
  margin-inline: auto;
  /*
   * 145 top, not 120.
   *
   * The gallery above ends with 50px of its own padding, so this makes 195px of
   * layout gap — but that row drifts up to 75px downward at the end of its
   * parallax, which is precisely when this banner is on screen. Subtract the
   * drift and 120px is what is actually seen; at a literal 120px it would read
   * as 45.
   */
  padding-top: 9.0625rem;  /* 145 = 120 visible + 75 drift − 50 from the gallery */
  padding-bottom: var(--deka-space-lg);
}

.deka-home-mission__banner {
  position: relative;
  isolation: isolate; /* keeps the overlay off the page's z-index scale */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--deka-space-2xl);
  min-height: 30rem; /* 480 */
  padding: 3.5rem; /* 56 */
  border-radius: var(--deka-radius-md); /* 12 */
  overflow: hidden;
  background: var(--deka-teal-900);
}

/* An <img> rather than a background: it can be lazy and does not block the
   statement above it from painting. */
.deka-home-mission__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.deka-home-mission__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.5);
}

/* --- Copy ------------------------------------------------------------------ */

.deka-home-mission__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--deka-space-2xl);
  max-width: 62rem;
}

.deka-home-mission__statement {
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: clamp(1.125rem, 0.8rem + 1.1vw, 1.875rem); /* 18 → 30 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.45;
  color: var(--deka-white);
  text-wrap: pretty;
}

/* --- Button ----------------------------------------------------------------- */

.deka-home-mission__cta {
  display: inline-flex;
  align-items: center;
  padding: 1.25rem; /* 20 */
  border: 1px solid var(--deka-white);
  border-radius: 6.25rem; /* 100 */
  font-family: var(--deka-font-display);
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  color: var(--deka-white);
  text-decoration: none;
  transition: background var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-home-mission__cta:hover {
  background: var(--deka-white);
  color: var(--deka-oxblood-700);
}

.deka-home-mission__cta:focus-visible {
  outline: 2px solid var(--deka-white);
  outline-offset: 3px;
}

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 48rem) { /* 768 */
  .deka-home-mission__banner {
    gap: var(--deka-space-xl);
    padding: var(--deka-space-md); /* 20-ish, matching the live small screen */
  }

  .deka-home-mission__body { gap: var(--deka-space-xl); }
}

/* Phones: the 145 above only makes up for the gallery's parallax drift, and
   the gallery does not drift here (home-about.css). 20 plus the gallery's own
   40 is the 60px the live site leaves between the photo row and this banner. */
@media (max-width: 47.9375rem) { /* 767 */
  .deka-home-mission { padding-top: 1.25rem; }
}