/* Features — horizontal carousel on phone; grid on desktop */

.cap-carousel__hint,
.cap-tabs,
.cap-carousel__controls {
  display: none;
}

@media (max-width: 767px) {
  .cap-carousel {
    width: 100%;
    max-width: 100%;
  }

  .cap-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 0.65rem;
    padding: 0.15rem 0 0.35rem;
  }

  .cap-tabs::-webkit-scrollbar {
    display: none;
  }

  .cap-tab {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0.55rem 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
  }

  .cap-tab.is-active {
    color: #e8f4fc;
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(125, 211, 252, 0.45);
  }

  .cap-carousel__hint {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-dim);
    text-align: center;
  }

  .cap-carousel__viewport {
    margin: 0 calc(-1 * max(1rem, env(safe-area-inset-left, 0)));
    padding: 0;
    overflow: hidden;
  }

  .cap-carousel__track.cap-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    max-width: none;
    margin: 0;
    padding: 0.35rem max(1rem, env(safe-area-inset-left, 0)) 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(1rem, env(safe-area-inset-left, 0));
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cap-carousel__track.cap-grid::-webkit-scrollbar {
    display: none;
  }

  .cap-carousel__track .cap-card {
    flex: 0 0 min(88vw, 22.5rem);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-height: 11.5rem;
    box-sizing: border-box;
  }

  .cap-carousel__track .cap-card[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .cap-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding: 0 0.25rem;
  }

  .cap-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }

  .cap-carousel__arrow:active {
    background: rgba(255, 255, 255, 0.12);
  }

  .cap-carousel__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 12rem;
  }

  .cap-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
  }

  .cap-carousel__dot.is-active {
    background: #7dd3fc;
    transform: scale(1.15);
  }
}