*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: #000;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-height: 100dvh;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
}

/* ─── Desktop: celý obsah ve viewportu (web_desktop_ATB) ─── */
@media (min-width: 768px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .page {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: clamp(0.5rem, 1.5dvh, 1.25rem);
    padding: clamp(0.75rem, 2dvh, 2rem) clamp(1rem, 3vw, 2.5rem);
  }

  .header {
    flex: 0 0 auto;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    max-width: min(92vw, 72rem);
    /* Make header image pure white */
    filter: brightness(0) invert(1);
  }

  .header__img {
    width: auto;
    height: clamp(1.25rem, 3.5dvh, 2.75rem);
    max-width: min(48vw, 28rem);
    margin-inline: auto;
    object-fit: contain;
  }

  .hero {
    position: relative;
    container-type: size;
    container-name: hero;
    width: min(94vw, 80rem, 100%);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 0;
    justify-self: center;
    align-self: center;
  }

  .logo--desktop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    z-index: 1;
    pointer-events: none;
    user-select: none;
  }

  .countdown {
    position: absolute;
    left: 50%;
    top: 14.3%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 3vw, 3.5rem);
    width: 96%;
    max-width: 90rem;
    text-align: center;
  }

  /* Velikost odpočtu odvozená od šířky, aby vyplnil prostor jako na mockupu */
  .countdown__value {
    font-size: clamp(5rem, 16vw, 15rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.045em;
  }

  .countdown__label {
    margin-top: clamp(0.25rem, 0.5vw, 0.5rem);
    font-size: clamp(0.38rem, 0.55vw, 0.52rem);
    font-weight: 400;
    letter-spacing: 0.14em;
  }

  .logo-footer {
    display: none;
  }
}

/* ─── Mobile: web_mobile_ATB ─── */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page {
    justify-content: flex-start;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .header {
    flex-shrink: 0;
    padding: clamp(1.25rem, 5vw, 2rem) clamp(1rem, 4vw, 1.5rem) 0;
    text-align: center;
    /* Make header image pure white */
    filter: brightness(0) invert(1);
  }

  .header__img {
    width: min(88vw, 20rem);
    height: auto;
    margin-inline: auto;
  }

  .hero {
    flex: 0 0 auto;
    position: relative;
    padding: clamp(1rem, 4vw, 1.75rem) clamp(0.75rem, 3vw, 1rem) clamp(2rem, 6vw, 3rem);
    min-height: auto;
    max-height: none;
    aspect-ratio: auto;
  }

  .logo--desktop {
    display: none;
  }

  .countdown {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.25rem, 2vw, 0.75rem);
    width: min(92vw, 22rem);
    margin-inline: auto;
    text-align: center;
  }

  .countdown__value {
    font-size: clamp(3.4rem, 17.5vw, 5rem);
    font-weight: 400;
    line-height: 0.86;
    letter-spacing: -0.045em;
  }

  .countdown__label {
    margin-top: clamp(0.35rem, 1.5vw, 0.5rem);
    font-size: clamp(0.36rem, 1.6vw, 0.48rem);
    font-weight: 400;
    letter-spacing: 0.11em;
  }

  .logo-footer {
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    padding: 0 clamp(1rem, 4vw, 1.5rem) clamp(2.5rem, 10vw, 4rem);
    margin-top: auto;
  }

  .logo--mobile {
    width: min(92vw, 22rem);
  }
}

/* Shared countdown typography */
.countdown__value {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.countdown__label {
  display: block;
  text-transform: uppercase;
  color: #fff;
}