/* C:\xampp\htdocs\ahaondeag\public\assets\stylesheets\layout.css */

.page{
  /* min-height: 100dvh; */
  padding: var(--space-3) var(--space-2);
}

/* Only center when you ask for it */
.page--centered{
  display: grid;
  place-items: center;
}

/* Width helpers */
.page--narrow{
  width: min(100%, var(--max-sml));
  margin-inline: auto;
}

.page--wide{
  width: min(100%, var(--max-lge));
  margin-inline: auto;
}

.container{
  width: min(100%, var(--max-sml));
}
.container--wide{
  width: min(100%, var(--max-lge));
}

.container,
.container--wide{
  margin-inline: auto;
}



/* ---------------------------------
   Wallpaper surface
---------------------------------- */

body.has-wallpaper .site-header,
body.has-wallpaper main,
body.has-wallpaper footer{
  position: relative;
  z-index: 1;
}

body.has-wallpaper main{
  position: relative;
  isolation: isolate;
}

/* ---------------------------------
   WALLPAPER (mobile-first)
---------------------------------- */

body.has-wallpaper::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  opacity: 1;

  /* Base (mobile): 4 logos */
  background-image:
    url("/images/logo/celtic-undecagon-10percent-100px.webp"),
    url("/images/logo/celtic-undecagon-10percent-100px.webp"),
    url("/images/logo/celtic-undecagon-10percent-100px.webp"),
    url("/images/logo/celtic-undecagon-10percent-100px.webp");

  background-position:
    -40px 50px,
    calc(100% + 28px) 20%,
    40px 90%,
    calc(100% + 36px) calc(100% + 42px);

  background-size:
    80px, 76px, 60px, 88px;
}

@media (min-width: 421px){
  body.has-wallpaper::before{
    background-image:
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp");

    background-position:
      -15px 60px,
      17.5% 21.9%,
      74% 16.7%,
      20.1% 96.1%,
      calc(100% + 14px) calc(100% + 18px);

    background-size:
      80px, 85px, 56px, 76px, 88px;
  }
}

@media (min-width: 1025px){
  body.has-wallpaper::before{
    background-image:
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp"),
      url("/images/logo/celtic-undecagon-10percent-100px.webp");

    background-position:
      -15px 60px,
      17.5% 21.9%,
      74% 16.7%,
      20.1% 92.1%,
      64.6% 87%,
      calc(100% + 14px) calc(100% + 18px);

    background-size:
      92px, 84px, 100px, 100px, 120px, 100px;
  }
}