/* HDR01: one fixed homepage header over a stable full-height slot. */
html.homepage--atelier-band {
  --atelier-header-full: 96px;
  --atelier-header-compact: 64px;
  --atelier-header-current: var(--atelier-header-full);
  --atelier-header-gap: 12px;
  scroll-padding-top: 0;
}

html.homepage--atelier-band.is-atelier-header-compact {
  --atelier-header-current: var(--atelier-header-compact);
}

.homepage--atelier-band .site-header-slot {
  min-height: var(--atelier-header-full);
}

.homepage--atelier-band .site-header--atelier-band {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  min-height: var(--atelier-header-full);
  margin-inline: auto;
  isolation: isolate;
  background: transparent;
  transition: none;
}

.homepage--atelier-band .site-header--atelier-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  border-bottom: 1px solid #e8dfe5;
  background: var(--soft);
  box-shadow: none;
  transform: translateX(-50%);
  transition: none;
}

.homepage--atelier-band .site-header--atelier-band .brand,
.homepage--atelier-band .site-header--atelier-band .brand img,
.homepage--atelier-band .site-header--atelier-band .location {
  transition: none;
}

.homepage--atelier-band .site-header--atelier-band .brand {
  transform: translateY(0);
}

.homepage--atelier-band .site-header--atelier-band .location {
  max-height: 24px;
  overflow: hidden;
  opacity: 1;
}

.homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band {
  transition: min-height 400ms cubic-bezier(.22, .61, .36, 1);
}

.homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band::before {
  transition: box-shadow 400ms ease-out;
}

.homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band .brand {
  transition:
    font-size 400ms cubic-bezier(.22, .61, .36, 1),
    transform 400ms cubic-bezier(.22, .61, .36, 1);
}

.homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band .brand img {
  transition:
    width 400ms cubic-bezier(.22, .61, .36, 1),
    height 400ms cubic-bezier(.22, .61, .36, 1);
}

.homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band .location {
  transition:
    opacity 200ms ease-out,
    max-height 400ms cubic-bezier(.22, .61, .36, 1),
    margin-block 400ms cubic-bezier(.22, .61, .36, 1);
}

.homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band {
  min-height: var(--atelier-header-compact);
}

.homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band::before {
  box-shadow: 0 5px 15px #61284908;
}

.homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band .brand {
  font-size: 28px;
}

.homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band .brand img {
  width: 35px;
  height: 42px;
}

.homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band .location {
  max-height: 0;
  opacity: 0;
}

.homepage--atelier-band #obsah,
.homepage--atelier-band #lekce,
.homepage--atelier-band #terminy,
.homepage--atelier-band #lektorky,
.homepage--atelier-band #jak-vybrat,
.homepage--atelier-band #prvni-navsteva {
  scroll-margin-top: calc(var(--atelier-header-full) + var(--atelier-header-gap));
}

.homepage--atelier-band.has-atelier-header-js #terminy,
.homepage--atelier-band.has-atelier-header-js #lektorky,
.homepage--atelier-band.has-atelier-header-js #jak-vybrat,
.homepage--atelier-band.has-atelier-header-js #prvni-navsteva {
  scroll-margin-top: calc(var(--atelier-header-compact) + var(--atelier-header-gap));
}

@media (max-width: 768px) {
  html.homepage--atelier-band {
    --atelier-header-full: 82px;
    --atelier-header-compact: 56px;
  }

  .homepage--atelier-band .site-header--atelier-band {
    background: transparent;
  }

  .homepage--atelier-band .site-header--atelier-band .location {
    max-height: 18px;
  }

  .homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band .brand {
    font-size: 26px;
    transform: translateY(8px);
  }

  .homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band .brand img {
    width: 29px;
    height: 35px;
  }

  .homepage--atelier-band.is-atelier-header-compact .site-header--atelier-band .location {
    max-height: 0;
    margin-block: 0;
  }

  .homepage--atelier-band .site-header--atelier-band .primary-nav.is-open {
    max-height: calc(100dvh - var(--atelier-header-current));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .homepage--atelier-band:not(.has-atelier-header-js) {
    scroll-padding-top: 12px;
  }

  .homepage--atelier-band:not(.has-atelier-header-js) .site-header-slot {
    min-height: 0;
  }

  .homepage--atelier-band:not(.has-atelier-header-js) .site-header--atelier-band {
    position: relative;
    inset: auto;
  }

  .homepage--atelier-band:not(.has-atelier-header-js) .site-header--atelier-band .menu-button {
    display: none;
  }

  .homepage--atelier-band:not(.has-atelier-header-js) .site-header--atelier-band .primary-nav {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    max-height: none;
    overflow: visible;
  }

  .homepage--atelier-band:not(.has-atelier-header-js) #obsah,
  .homepage--atelier-band:not(.has-atelier-header-js) #lekce,
  .homepage--atelier-band:not(.has-atelier-header-js) #terminy,
  .homepage--atelier-band:not(.has-atelier-header-js) #lektorky,
  .homepage--atelier-band:not(.has-atelier-header-js) #jak-vybrat,
  .homepage--atelier-band:not(.has-atelier-header-js) #prvni-navsteva {
    scroll-margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band,
  .homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band::before,
  .homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band .brand,
  .homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band .brand img,
  .homepage--atelier-band.is-atelier-header-ready .site-header--atelier-band .location {
    transition: none !important;
  }
}

@media (min-width: 769px) {
  .homepage--atelier-band .site-header--editorial .primary-nav > a[aria-current="location"]::after {
    transform: scaleX(1);
  }
}

@media (max-width: 768px) {
  .homepage--atelier-band .primary-nav > a[aria-current="location"] {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}