/* =======================================================
   Homepage responsive polish

   This file contains homepage-only refinements that sit on
   top of the shared AgeFile styles.
======================================================= */

/* Bring the age-specific guidance higher into the first
   desktop viewport without weakening the hero typography. */
@media (min-width: 641px) {
  .site-header {
    padding-top: 18px;
    padding-bottom: 10px;
  }

  .intro {
    padding-top: clamp(28px, 3.4vw, 50px);
    padding-bottom: 26px;
  }

  .age-control {
    margin-bottom: 24px;
  }
}

/* Make the category rail behave like an intentional
   horizontal control rather than a clipped row of buttons. */
.category-nav {
  padding-right: 28px;
  scroll-padding-inline: 2px 28px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.category-tab {
  scroll-snap-align: start;
}

.category-tab:not(:disabled) {
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.category-tab:not(:disabled):hover {
  transform: translateY(-1px);
}

.category-sleep.active {
  border-color: var(--pink-strong);
  background: var(--pink-strong);
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(169, 80, 115, 0.16);
}

/* Categories that have not launched should read as clearly
   unavailable, while preserving their shape and position. */
.category-tab:disabled {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--ink-faint);
  opacity: 1;
  cursor: default;
}

.category-tab:disabled .category-icon {
  opacity: 0.72;
}

@media (max-width: 900px) {
  .category-nav {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 34px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 34px),
      transparent 100%
    );
  }
}

@media (max-width: 640px) {
  .intro {
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .age-control {
    margin-bottom: 18px;
  }

  .category-nav {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 44px;
    padding-left: 12px;
    scroll-padding-inline: 12px 44px;
  }

  .category-tab {
    min-height: 42px;
  }
}