/**
 * Mobile UX Optimizations (#229)
 * Improves touch targets, spacing, typography, and visual hierarchy
 * for the first login flow on mobile devices.
 *
 * Screens: landing → login → verify (success) → courses → course detail → lesson
 */

/* ═══════════════════════════════════════
   TABLET (max-width: 768px)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Global layout: tighter horizontal padding ── */
  main[data-testid="main"] {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }

  /* ── Touch targets: all buttons and interactive elements min 44px ── */
  button,
  [role="button"],
  input[type="submit"],
  a.button,
  .button--primary,
  .button--secondary,
  .button--cta,
  .button--ghost {
    min-height: 44px;
  }

  /* ── Form inputs: comfortable touch size ── */
  input[type="email"],
  input[type="text"],
  input[type="password"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* ── Login page ── */
  .login-card {
    padding: var(--spacing-lg) var(--spacing-md) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background-color: white !important;
  }

  /* ── Login button: prevent text wrapping ── */
  .login-card button[type="submit"],
  .login-card input[type="submit"] {
    white-space: nowrap;
  }

  /* ── Footer links: better touch targets ── */
  footer nav a {
    padding: 12px var(--spacing-sm);
  }

  /* ── Header: hide admin buttons on mobile ── */
  [data-testid="admin-button"],
  [data-testid="masquerade-control"] {
    display: none !important;
  }

  /* ── Courses grid: single column, tighter spacing ── */
  [data-testid="courses-grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md) !important;
  }

  /* ── Courses page: reduce gap between subtitle and grid ── */
  [data-testid="courses-page"] {
    gap: var(--spacing-md) !important;
  }

  /* ── Course card: tap affordance chevron ── */
  .course-card::after {
    content: "→";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-text-muted);
  }

  .course-card {
    position: relative;
    padding-right: 40px !important;
  }

  /* ── Course cards: better mobile padding ── */
  .course-card {
    padding: var(--spacing-lg) var(--spacing-md) !important;
  }

  /* Course card hover: reduce transform on mobile (no hover anyway) */
  .course-card:hover {
    transform: none;
  }

  /* ── Lesson links: larger touch target ── */
  .lesson-link,
  .quiz-link {
    min-height: 44px;
  }

  .lesson-link:hover,
  .quiz-link:hover {
    transform: none;
  }

  /* ── Footer: stack links vertically ── */
  footer nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
  }

  footer nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════
   TOUCH TARGETS: specific elements (#288)
   ═══════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Header logo link — height was 30px */
  .header__logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Mobile menu close button — was 40×40 (inline style) */
  [data-testid="mobile-menu-close"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Sidebar close '✕' button — was 32×32 */
  .sidebar-close-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Lesson back button '←' — was 40×40 */
  .lesson-progress-back {
    min-width: 44px;
    min-height: 44px;
  }

  /* 'Wróć do kursów/kursu' back links on lesson pages */
  [data-testid="lesson-page"] a[href*="courses"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════
   SMALL MOBILE (max-width: 480px)
   ═══════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Even tighter padding ── */
  main[data-testid="main"] {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
  }

  /* ── Login page: reduce container padding ── */
  .login-card {
    padding: var(--spacing-md) var(--spacing-sm) !important;
  }

  /* ── Headings: tighter spacing ── */
  h1 {
    font-size: 24px;
    margin-bottom: var(--spacing-xs);
  }

  h2 {
    font-size: 20px;
  }

  /* ── Buttons: full-width on small screens for easy tapping ── */
  button[type="submit"],
  input[type="submit"] {
    min-height: 48px;
    font-size: 16px;
  }

  /* ── Badge row: allow wrapping ── */
  .course-card [style*="flex-wrap"] {
    gap: var(--spacing-xs);
  }
}