/* Godz Casino — hero block */
.hero {
  position: relative;
  min-height: 60dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9,15,16,0.35) 0%, rgba(9,15,16,0.55) 55%, rgba(9,15,16,0.92) 100%);
}
.hero__content {
  padding-block: 2.5rem 2.75rem;
  display: grid;
  gap: 0.85rem;
  max-width: 760px;
}
/* Grid items default to min-width:auto (their max-content size), which
   silently defeats overflow-wrap on long headings — this resets that so
   long German compound words actually wrap instead of overflowing. */
.hero__content > * {
  min-width: 0;
}
.hero__rating {
  width: fit-content;
}
.hero__title {
  color: var(--color-white);
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.hero__subtitle {
  color: var(--color-white);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
  max-width: 60ch;
}
.hero__cta { width: fit-content; margin-top: 0.5rem; }

.breadcrumb .breadcrumb__current,
.breadcrumb a { text-shadow: 0 1px 6px rgba(0,0,0,0.6); }

/*
 * Mobile keeps the fixed-height crop above: the spec allows the banner to
 * act purely as a background behind the heading text on small screens, so
 * content of the image doesn't matter there and object-fit:cover is fine.
 * From tablet width up, the banner must show the whole, uncropped image
 * at full width — so the section's aspect-ratio is locked to the real
 * banner asset's own ratio (1895x830) and object-fit switches to contain
 * as a safety net in case a future image doesn't share that exact ratio.
 */
@media (min-width: 768px) {
  /* Crop 18% off the top of the banner (keep the bottom, where the subjects
     sit) and vertically center the text block so it sits closer to the
     header instead of hugging the bottom of a very tall image. */
  .hero {
    min-height: 0;
    aspect-ratio: 1895 / 680.6;
    align-items: center;
  }
  .hero__bg { object-fit: cover; object-position: center bottom; }
  .hero__content { padding-block: 2rem; }
}