/* Responsive styles */

/* Large desktop and up */
@media (min-width: 1200px) {
  h1 {
    font-size: 3.5rem;
  }
  
  .countdown-title h2 {
    font-size: 2.75rem;
  }
  
  .time {
    font-size: 5rem;
  }
  
  .time-block {
    min-width: 120px;
  }
}

/* Medium desktop and laptops */
@media (max-width: 1199px) {
  .container {
    max-width: 960px;
  }
  
  .time {
    font-size: 3.5rem;
  }
  
  .time-block {
    min-width: 90px;
  }
}

/* Small desktop and tablets in landscape */
@media (max-width: 991px) {
  .container {
    max-width: 720px;
  }
  
  h1 {
    font-size: 2.75rem;
  }
  
  .subtitle {
    font-size: 1.1rem;
  }
  
  .countdown-title h2 {
    font-size: 2.25rem;
  }
  
  .time {
    font-size: 3rem;
  }
  
  .time-block {
    min-width: 80px;
  }
  
  .future-container {
    justify-content: center;
  }
  
  .future-countdown-card {
    min-width: 180px;
    flex-basis: calc(33.333% - var(--space-md));
  }
}

/* Tablets in portrait and large phones */
@media (max-width: 767px) {
  .container {
    max-width: 540px;
    padding: var(--space-sm);
  }
  
  h1 {
    font-size: 2.25rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .countdown-title h2 {
    font-size: 1.75rem;
  }
  
  main {
    gap: var(--space-xl);
  }
  
  .time {
    font-size: 2.5rem;
  }
  
  .time-block {
    min-width: 70px;
  }
  
  .label {
    font-size: 0.875rem;
  }
  
  .time-separator {
    font-size: 2.5rem;
  }
  
  .future-countdown-card {
    flex-basis: calc(50% - var(--space-md));
  }
}

/* Small phones */
@media (max-width: 575px) {
  h1 {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 0.875rem;
  }
  
  .countdown-title h2 {
    font-size: 1.5rem;
  }
  
  .countdown-timer {
    padding: var(--space-md) var(--space-sm);
    flex-wrap: wrap;
  }
  
  .time {
    font-size: 2rem;
  }
  
  .time-block {
    min-width: 60px;
  }
  
  .time-separator {
    font-size: 2rem;
  }
  
  .future-countdowns h2 {
    font-size: 1.5rem;
  }
  
  .future-container {
    flex-direction: column;
    align-items: center;
  }
  
  .future-countdown-card {
    width: 100%;
    max-width: 300px;
  }
  
  .social-icons {
    gap: var(--space-sm);
  }
  
  .social-icon {
    width: 36px;
    height: 36px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  h1 {
    font-size: 1.75rem;
  }
  
  .countdown-timer {
    gap: var(--space-xs);
  }
  
  .time {
    font-size: 1.75rem;
  }
  
  .time-block {
    min-width: 50px;
  }
  
  .time-separator {
    font-size: 1.75rem;
    margin: 0 2px;
  }
  
  .label {
    font-size: 0.75rem;
  }
}