/**
 * ============================================
 * LAYOUT SYSTEM
 * ============================================
 * Grid, flexbox, and structural layouts
 * All spacing uses config.css variables
 */

/* ==================== MAIN CONTAINER ==================== */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
  z-index: var(--z-content);
  
  /* Fade in animation on page load */
  opacity: 0;
  animation: fadeIn var(--duration-slower) var(--ease-out) forwards;
}


/* ==================== TOP BAR ==================== */

.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-lg) 0;
  gap: var(--space-md);
}


/* ==================== HERO SECTION ==================== */

.hero {
  text-align: center;
  padding: var(--space-4xl) 0 calc(var(--space-4xl) + var(--space-lg));
}

.headline {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-section);
  letter-spacing: var(--letter-spacing-tight);
  
  /* Slide up animation */
  animation: slideUp var(--duration-slow) var(--ease-out);
}


/* ==================== COUNTDOWN SECTION ==================== */

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--countdown-gap);
  margin-bottom: var(--space-xl);
  flex-wrap: nowrap;
  
  /* Slide up animation with delay */
  animation: slideUp var(--duration-slow) var(--ease-out) var(--delay-2) both;
}

.countdown-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-number {
  font-size: var(--font-size-countdown-number);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  margin-bottom: var(--space-sm);
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums; /* Ensures consistent number width */
}

.countdown-label {
  font-size: var(--font-size-countdown-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  font-weight: var(--font-weight-semibold);
}

.countdown-separator {
  font-size: var(--font-size-countdown-number);
  font-weight: var(--font-weight-light);
  opacity: var(--countdown-separator-opacity);
  align-self: center;
  margin-top: calc(var(--space-md) * -1); /* Align with numbers */
  user-select: none;
}


/* ==================== LAUNCH DATE ==================== */

.launch-date {
  font-size: var(--font-size-body-lg);
  margin-bottom: var(--space-section);
  font-weight: var(--font-weight-medium);
  
  /* Slide up animation with delay */
  animation: slideUp var(--duration-slow) var(--ease-out) var(--delay-3) both;
}


/* ==================== VALUE PROPS GRID ==================== */

.value-props {
  display: grid;
  grid-template-columns: repeat(var(--value-props-columns), 1fr);
  gap: var(--grid-gap);
  max-width: 900px;
  margin: var(--space-section) auto;
  
  /* Slide up animation with delay */
  animation: slideUp var(--duration-slow) var(--ease-out) var(--delay-4) both;
}


/* ==================== HOOK SECTION ==================== */

.hook {
  text-align: center;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  margin: var(--space-section) 0 var(--space-2xl);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  
  /* Slide up animation with delay */
  animation: slideUp var(--duration-slow) var(--ease-out) var(--delay-5) both;
}


/* ==================== CTA SECTION ==================== */

.cta-section {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
  padding: var(--space-2xl) 0 calc(var(--space-4xl) + var(--space-xl));
  
  /* Slide up animation with delay */
  animation: slideUp var(--duration-slow) var(--ease-out) var(--delay-6) both;
}

.email-form {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.social-proof {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.social-proof strong {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
}


/* ==================== RESPONSIVE: TABLET & MOBILE ==================== */

@media (max-width: 768px) {
  /* Container adjustments */
  .container {
    padding: 0 var(--container-padding-mobile);
  }
  
  /* Hero adjustments */
  .hero {
    padding: var(--space-2xl) 0 var(--space-section);
  }
  
  /* Countdown adjustments */
  .countdown {
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: 0 var(--space-sm);
  }
  
  .countdown-number {
    font-size: clamp(2.5rem, 15vw, 4rem);
  }
  
  .countdown-separator {
    font-size: clamp(2rem, 12vw, 3rem);
  }
  
  .countdown-label {
    font-size: var(--font-size-caption);
  }
  
  /* Value props - single column on mobile */
  .value-props {
    grid-template-columns: 1fr;
    gap: var(--grid-gap-mobile);
  }
  
  /* Form adjustments */
  .email-form {
    flex-direction: column;
  }
  
  .email-input {
    min-width: 100%;
  }
  
  .cta-button {
    width: 100%;
  }
  
  /* Hook adjustments */
  .hook {
    margin: var(--space-2xl) 0 var(--space-xl);
  }
}


/* ==================== RESPONSIVE: SMALL MOBILE ==================== */

@media (max-width: 480px) {
  .headline {
    margin-bottom: var(--space-2xl);
  }
  
  .countdown {
    gap: var(--space-sm);
  }
  
  .value-props {
    margin: var(--space-2xl) auto;
  }
  
  .hook {
    margin: var(--space-xl) 0 var(--space-lg);
  }
}