/**
 * DarkHoster Responsive Layout & Media Queries
 * Explicit support for 320px, 375px, 390px, 430px, 768px, 1024px, 1200px, 1440px, 1920px
 */

/* Small Mobile Screens (320px - 390px) */
@media (max-width: 390px) {
  .dh-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .dh-hero-actions .dh-button {
    width: 100%;
  }

  .dh-tld-pills {
    gap: 6px;
  }

  .dh-tld-pill {
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  .dh-infra-visual {
    padding: 16px;
  }

  .dh-platform-features {
    grid-template-columns: 1fr;
  }

  .dh-infra-tier-outputs {
    grid-template-columns: 1fr;
  }
}

/* Medium Mobile Screens (391px - 480px) */
@media (min-width: 391px) and (max-width: 480px) {
  .dh-hero-actions .dh-button {
    width: 100%;
  }

  .dh-platform-features {
    grid-template-columns: repeat(3, 1fr);
  }

  .dh-infra-tier-outputs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet Screens (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .dh-hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .dh-hero-content {
    text-align: center;
    align-items: center;
  }

  .dh-hero-content .dh-eyebrow {
    align-self: center;
  }

  .dh-hero-actions {
    justify-content: center;
  }

  .dh-infra-visual {
    max-width: 540px;
  }
}

/* Desktop & Ultra-wide (1200px - 1920px) */
@media (min-width: 1200px) {
  .dh-hero-grid {
    gap: 80px;
  }
}

@media (min-width: 1440px) {
  .dh-container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Prevent horizontal overflow on major content sections without breaking sticky headers */
.dh-hero-section,
.dh-domain-search-section {
  max-width: 100vw;
  overflow-x: clip;
}