/**
 * assets/css/responsive.css
 *
 * Global responsive adjustments.
 * Loaded on every page via head-common.php.
 *
 * Page-specific responsive rules belong in their
 * own CSS files scoped under .page--{name}.
 * This file handles global shell elements only:
 * container, typography scale, section spacing.
 */

/* =========================================================
   BREAKPOINTS
   Tablet:  ≤ 900px
   Mobile:  ≤ 640px
   Compact: ≤ 420px
   ========================================================= */

/* =========================================================
   TABLET — up to 900px
   ========================================================= */

@media (max-width: 900px) {
  .section {
    padding-block: var(--space-16);
  }

  .section--lg {
    padding-block: var(--space-20);
  }

  .display-1 {
    font-size: clamp(var(--text-3xl), 5.5vw, var(--text-5xl));
  }

  .display-2 {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  }

  .display-3 {
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  }
}

/* =========================================================
   MOBILE — up to 640px
   ========================================================= */

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-12);
  }

  .section--lg {
    padding-block: var(--space-16);
  }

  .section--sm {
    padding-block: var(--space-8);
  }

  .display-1 {
    font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
  }

  .display-2 {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  }

  .display-3 {
    font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
  }

  /* Cards full-width on mobile */
  .card {
    padding: var(--space-5);
  }

  /* Button full-width on mobile */
  .btn--full-mobile {
    width: 100%;
  }

  /* Dialog — full screen on mobile */
  .dialog-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .dialog {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 100%;
  }
}

/* =========================================================
   COMPACT — up to 420px
   ========================================================= */

@media (max-width: 420px) {
  .container {
    padding-inline: var(--space-4);
  }

  .mood-picker {
    gap: var(--space-2);
  }

  .mood-option {
    padding: var(--space-2) var(--space-3);
  }
}

/* =========================================================
   TOUCH TARGETS
   Enforce 44x44px minimum on interactive elements
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 48px;
  }

  .nav__link {
    min-height: 44px;
  }

  .type-option,
  .mood-option {
    min-height: 44px;
    min-width: 44px;
  }
}

/* =========================================================
   HIGH CONTRAST MODE
   ========================================================= */

@media (forced-colors: active) {
  .card,
  .btn--secondary,
  .btn--ghost {
    border: 1px solid ButtonText;
  }

  .btn--primary,
  .btn--cta {
    forced-color-adjust: none;
  }

  :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
}