/* ============================================
   RESPONSIVE.CSS — Glassmorphism Breakpoints
   ============================================ */

/* ===== DESKTOP NAV (min 768px) ===== */
@media (min-width: 768px) {
  .header .nav {
    display: flex;
  }

  .header-cta {
    display: flex;
  }

  .mobile-toggle {
    display: none;
  }
}

/* ===== TABLET (max 992px) ===== */
@media (max-width: 992px) {
  :root {
    --section-pad: 80px;
  }

  .hero-title { font-size: 4rem; }

  .section-title { font-size: 2rem; }

  .hero-stats {
    gap: 20px;
  }
}

/* ===== MOBILE NAV BREAKPOINT (max 768px) ===== */
@media (max-width: 768px) {

  .hero {
    padding: 100px 0 60px;
    min-height: calc(100vh - 40px);
  }

  .hero-title { font-size: 3rem; }
  .hero-subtitle { font-size: 1rem; margin-bottom: 32px; }

  .hero-stats {
    margin-top: 36px;
    gap: 12px;
  }

  /* Hide heavy decorations on mobile */
  .hero-quill,
  .hero-book-page,
  .hero-ink-blot {
    display: none;
  }

  .hero-float-letter {
    font-size: 2rem !important;
    opacity: 0.03 !important;
  }

  .hero-ink-drop {
    display: none;
  }

  /* Categories: compact row on mobile */
  .categories-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
  }

  .category-item {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 14px 20px;
  }

  .category-item::before { display: none; }

  .category-icon {
    font-size: 1.5rem;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .category-info {
    flex: 1;
    min-width: 0;
  }

  .category-name {
    font-size: 0.9rem;
    margin-bottom: 2px;
  }

  .category-desc {
    font-size: 0.75rem;
    margin-bottom: 0;
    white-space: normal;
    line-height: 1.4;
  }

  .category-count {
    font-size: 1rem;
    flex-shrink: 0;
  }

  .dict-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .dict-search {
    min-width: 100%;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .card-wrapper {
    height: 200px;
  }

  .card-content { padding: 14px 16px 8px; }
  .card-footer { padding: 6px 16px; }
  .word-title { font-size: 1.05rem; }
  .word-origin { font-size: 0.68rem; margin-bottom: 4px; }
  .word-meaning { font-size: 0.78rem; -webkit-line-clamp: 2; }
  .card-bukvica { font-size: 2.2rem; }

  .section-title { font-size: 1.65rem; }

  .quotes-list {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .quote-card:last-child:nth-child(odd) {
    max-width: none;
  }

  .footer-top {
    flex-direction: column;
    gap: 24px;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* Ambient glows smaller on mobile */
  .ambient-glow-1 { width: 250px; height: 250px; }
  .ambient-glow-2 { width: 200px; height: 200px; }
  .ambient-glow-3 { width: 180px; height: 180px; }
}

/* ===== SMALL MOBILE (max 576px) ===== */
@media (max-width: 576px) {
  .container {
    padding: 0 16px;
  }

  .hero {
    padding: 88px 0 48px;
    min-height: calc(100svh - 20px);
  }

  .hero-title { font-size: 2.5rem; letter-spacing: 0.02em; }
  .hero-badge { font-size: 0.6rem; padding: 4px 12px; margin-bottom: 20px; }
  .hero-subtitle { font-size: 0.92rem; margin-bottom: 28px; }
  .hero-btn { padding: 12px 28px; font-size: 0.85rem; }
  .hero-line { margin-bottom: 16px; }

  .hero-stats {
    margin-top: 28px;
    gap: 10px;
  }

  .hero-stat {
    font-size: 0.75rem;
  }

  .section-title { font-size: 1.4rem; }
  .section-tag { font-size: 0.58rem; }

  .card-wrapper { height: 190px; }
  .card-content { padding: 12px 14px 6px; }
  .card-footer { padding: 6px 14px; }
  .word-title { font-size: 1rem; }
  .card-category-badge { font-size: 0.6rem; padding: 2px 8px; }

  .filter-btn { padding: 8px 14px; font-size: 0.78rem; }
}

/* ===== LARGE SCREENS (min 1400px) ===== */
@media (min-width: 1400px) {
  :root {
    --container-width: 1280px;
    --section-pad: 140px;
  }

  .hero-title { font-size: 5.5rem; }
  .section-title { font-size: 2.6rem; }
}

/* ===== PRINT ===== */
@media print {
  body::before,
  body::after,
  .ambient-bg,
  #dust-canvas,
  .header,
  .btn-theme,
  .hero-line,
  .hero-badge,
  .hero-stats,
  .hero-decorations {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: 40px 0;
  }

  .card-wrapper {
    height: auto;
    break-inside: avoid;
  }

  .word-card {
    transform: none !important;
  }

  .card-front {
    position: static;
    box-shadow: none;
    border: 1px solid #ccc;
    backdrop-filter: none;
  }

  .card-back {
    display: none;
  }
}