/* Hero section — full-viewport below fixed header */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--tg-offwhite);
  height: calc(90vh - var(--header-height, 64px)) !important;
  min-height: calc(90vh - var(--header-height, 64px)) !important;
  padding: 0;
  margin: 0;
}
/* Video container fills hero; clip any overflow */
.hero-video-container {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,35,64,0.55), rgba(12,35,64,0.1)); }
.hero-content { position: relative; top: 50%; transform: translateY(-50%); width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 24px 16px; box-sizing: border-box; text-align: center; }
.hero-content h2 { color: var(--tg-beer); font-weight: 800; }
.hero-content p { color: #ffffff; }
.hero-content #countdownTitle { color: var(--tg-offwhite); font-weight: 800; }
.hero-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.hero-buttons .btn { max-width: 100%; }

/* Countdown */
.countdown { margin-top: 16px; }
.countdown-container { display: grid; grid-auto-flow: column; gap: 12px; justify-content: center; }
.countdown-item { background: transparent; border: none; border-radius: var(--radius-8); min-width: 72px; }
.countdown-number { font-size: 22px; font-weight: 800; color: var(--tg-beer); }
.countdown-label { font-size: 12px; color: var(--tg-charcoal); }

@media (max-width: 576px) { .countdown-container { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } }

/* Small screens: stack content below video and cap video height */
@media (max-width: 768px) {
  .hero {
    height: auto !important;
    min-height: auto !important;
  }
  .hero-video-container {
    position: relative;
    inset: auto;
    width: 100% !important;
    max-width: 100vw;
    height: 350px !important;
    max-height: 350px !important;
    overflow: hidden !important;
  }
  .hero-video {
    position: relative;
    inset: auto;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
  }
  .hero-content {
    top: 0;
    margin-top: 12px;
    transform: none;
  }
  /* Make specified texts black on small screens */
  .hero-content > p,
  .hero-content #countdownTitle {
    color: var(--tg-charcoal) !important;
  }
  .countdown-container {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-height: 650px) {
  .hero { height: calc(90vh - var(--header-height, 64px)) !important; min-height: calc(90vh - var(--header-height, 64px)) !important; }
  .hero-content { top: 50%; transform: translateY(-50%); }
  .hero-video { object-fit: contain !important; }
}

/* 500px–768px: keep countdown items in a single horizontal line */
@media (min-width: 500px) and (max-width: 768px) {
  .countdown-container {
    grid-auto-flow: column;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
  }
}

/* <500px: keep countdown items on one horizontal line, tighter spacing */
@media (max-width: 500px) {
  .countdown-container {
    grid-auto-flow: column;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    gap: 8px;
  }
  .countdown-item {
    min-width: auto;
    padding: 8px 8px;
  }
}

/* <370px: further compress countdown to fit one line */
@media (max-width: 370px) {
  .countdown-container {
    gap: 6px;
  }
  .countdown-item {
    min-width: auto;
    padding: 6px 6px;
  }
  .countdown-number {
    font-size: 18px;
  }
  .countdown-label {
    font-size: 10px;
  }
}