.ath-rest-hero {
  --ath-rest-hero-screen: 100vh;
  --ath-rest-hero-taken: var(--ath-admin-bar-height, 0px);
  position: relative;
  width: 100cqw;
  margin-left: calc(50% - 50cqw);
  margin-right: calc(50% - 50cqw);
  height: var(--ath-rest-hero-h, calc(var(--ath-rest-hero-screen) - var(--ath-rest-hero-taken)));
  min-height: var(--ath-rest-hero-h, calc(var(--ath-rest-hero-screen) - var(--ath-rest-hero-taken)));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--ath-arctic-navy, #243C4C);
}
@supports (height: 100svh) {
  .ath-rest-hero {
    --ath-rest-hero-screen: 100svh;
  }
}
/* The site wrapper, never body, is the query container, so 100cqw is the page's width without a classic scrollbar (D-068). */
.atheria-site:has(.ath-rest-hero) {
  container-type: inline-size;
}
body.atheria-header-overlay .ath-rest-hero {
  padding-top: var(--ath-header-overlay-clearance);
}
/* A header that keeps its own room takes it from the screen as well, so the hero fits while it holds in place. */
body:not(.atheria-header-overlay) .ath-rest-hero {
  --ath-rest-hero-taken: calc(var(--ath-admin-bar-height, 0px) + var(--ath-header-height, 0px));
}
.ath-rest-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
}
.ath-rest-hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 8rem);
  line-height: 1;
  color: var(--ath-frost, #F4FCFB);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.02em;
}
/* A line may break only between words. */
.ath-rest-hero__title .ath-rest-hero__word {
  display: inline-block;
  white-space: nowrap;
}
.ath-rest-hero__title .ath-char {
  display: inline-block;
  will-change: transform, opacity;
}
.ath-rest-hero__images {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
/* Under the header the collage lays out in the part of the hero below it, so no photograph starts under the bar. */
body.atheria-header-overlay .ath-rest-hero__images {
  top: var(--ath-header-overlay-clearance);
}
.ath-rest-img {
  position: absolute;
  width: clamp(140px, 20vw, 400px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ath-gallery-radius, 24px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  will-change: transform;
}
.ath-rest-img--1 { top: 10%; left: 8%; }
.ath-rest-img--2 { top: 12%; right: 8%; }
.ath-rest-img--3 { bottom: 10%; left: 10%; }
.ath-rest-img--4 { bottom: 8%; right: 12%; }

@media (max-width: 1024px) {
  .ath-rest-img--1 { top: 15%; left: 5%; }
  .ath-rest-img--2 { top: 18%; right: 5%; }
  .ath-rest-img--3 { bottom: 15%; left: 5%; }
  .ath-rest-img--4 { bottom: 12%; right: 5%; }
}

@media (max-width: 767px) {
  .ath-rest-img { width: clamp(110px, 35vw, 180px); }
  .ath-rest-hero__title { font-size: clamp(2rem, 12vw, 4rem); }
  .ath-rest-img--1 { top: 18%; left: 2%; }
  .ath-rest-img--2 { top: 22%; right: 2%; }
  .ath-rest-img--3 { bottom: 22%; left: 2%; }
  .ath-rest-img--4 { bottom: 18%; right: 2%; }
}

.e-con:has(> .elementor-widget-atheria_restaurant_hero),
.e-con:has(> .e-con-inner > .elementor-widget-atheria_restaurant_hero),
.e-con-inner:has(> .elementor-widget-atheria_restaurant_hero),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-atheria_restaurant_hero),
.elementor-widget-atheria_restaurant_hero {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
}

/* The section around the hero keeps the Vertical Spacing its builder chose. */
:is(.e-con, .elementor-section):is(.section-xxl, .section-xl, .section-l, .section-m, .section-s, .section-xs, .section-xxs):is(
  :has(> .elementor-widget-atheria_restaurant_hero),
  :has(> .e-con-inner > .elementor-widget-atheria_restaurant_hero),
  :has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-atheria_restaurant_hero)
) {
  padding-block: var(--ath-section-block) !important;
}

.elementor-widget-atheria_restaurant_hero > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}