/* ==========================================================================
   Knitting Dreams — responsive layer
   Desktop-first: 1440+ is the base in style.css.
   ========================================================================== */

/* Touch devices: card controls are always reachable (no hover state) */
@media (hover: none) {
  .card-actions .icon-btn { opacity: 1; transform: none; }
  .card-cta { opacity: 1; transform: none; left: 8px; right: 8px; bottom: 8px; min-height: 40px; background: rgba(34, 32, 29, .88); }
  .card:hover .card-img-main { transform: none; }
  .love-thumb { opacity: 1; transform: none; }
  .cursor { display: none; }
}

/* ---------- ≤ 1200px ---------- */
@media (max-width: 1200px) {
  :root { --header-h: 70px; }
  .primary-nav ul { gap: 20px; }
  .primary-nav a { font-size: .72rem; letter-spacing: .12em; }
  .loop { --per-view: 3; }
  .story-copy { grid-column: 8 / span 5; }
  .edit-copy { grid-column: 8 / span 5; }
  .phil-copy { grid-column: 9 / span 4; }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
  .footer-form { margin-top: 0; justify-self: end; width: 100%; }
  .footer-cols { grid-column: 1 / -1; }
}

/* ---------- ≤ 1024px (tablet landscape) ---------- */
@media (max-width: 1024px) {
  .menu-toggle { display: inline-grid; }
  .primary-nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .header-inner .logo { justify-self: center; align-items: center; }
  .header-actions { justify-self: end; }

  .hero-inner { flex-direction: column; align-items: flex-start; }
  .hero-card { width: min(340px, 100%); }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scroller { grid-auto-columns: calc((100% - 2 * var(--gap)) / 2.6); }

  .story-media { grid-column: 1 / span 6; }
  .story-copy { grid-column: 7 / span 6; }

  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value:nth-child(3) { padding-left: 0; border-left: 0; }
  .value:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 32px; }

  .cat-grid { grid-auto-rows: clamp(200px, 26vw, 280px); }
  .cat-card--candles { grid-column: 1 / span 12; grid-row: span 1; }
  .cat-card--crochet { grid-column: 1 / span 6; }
  .cat-card--decor { grid-column: 7 / span 6; }
  .cat-card--gifting { grid-column: 1 / span 12; }
  .cat-card--aurisg { grid-column: 1 / span 7; }
  .cat-card--sale { grid-column: 8 / span 5; }

  .edit-media { grid-column: 1 / span 6; }
  .edit-copy { grid-column: 7 / span 6; }

  .phil-media { grid-column: 1 / -1; }
  .phil-copy { grid-column: 1 / span 8; margin-top: 24px; }

  .love-head { grid-column: 1 / -1; position: static; margin-bottom: 24px; }
  .love-list { grid-column: 1 / -1; }

  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-grid .post:nth-child(3) { display: none; }

  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(3) { border-left: 0; }
  .trust-item:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .nl-media { grid-column: 1 / span 5; }
  .nl-copy { grid-column: 6 / span 7; }

  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ≤ 768px (tablet portrait / large phones) ---------- */
@media (max-width: 768px) {
  :root { --header-h: 64px; --announce-h: 34px; }
  .hide-mobile { display: none !important; }
  .announce { font-size: .62rem; letter-spacing: .14em; }
  .logo-word { font-size: 1.3rem; }
  .logo-sub { display: none; }

  .hero { min-height: max(600px, calc(100svh - var(--announce-h))); }
  .hero-shade { background: linear-gradient(0deg, rgba(34, 32, 29, .78) 0%, rgba(34, 32, 29, .35) 55%, rgba(34, 32, 29, .15) 100%); }
  .hero-card { display: none; }
  .hero-thread { opacity: .7; }

  .section-head { align-items: flex-start; }
  .section-head .slider-controls { display: none; }
  .scroller { grid-auto-columns: 72%; }
  .loop { --per-view: 2; }

  .story-grid, .edit-grid, .nl-grid, .phil-grid { grid-template-columns: 1fr; }
  .story-media, .story-copy, .edit-media, .edit-copy, .nl-media, .nl-copy, .phil-media, .phil-copy { grid-column: 1 / -1; }
  .story-media { max-width: 560px; }
  .story-copy { margin-top: 24px; }
  .edit-media { aspect-ratio: 4 / 4.4; }
  .edit-copy { margin-top: 20px; }
  .edit-list { margin-top: 28px; }
  .nl-media { aspect-ratio: 16 / 10; }
  .nl-copy { margin-top: 12px; }

  .cat-grid { grid-auto-rows: 240px; gap: 12px; }
  .cat-card--aurisg, .cat-card--sale { grid-column: 1 / -1; }

  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .journal-grid { grid-template-columns: 1fr; }
  .journal-grid .post:nth-child(3) { display: flex; }

  .footer-brand { grid-template-columns: 1fr; }
  .footer-form { justify-self: start; }

  .modal { padding: 0; place-items: end center; }
  .modal-panel { grid-template-columns: 1fr; max-height: 92dvh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .qv-media { aspect-ratio: 4 / 3.4; min-height: 0; }
  .qv-body { overflow: visible; }

  .search-overlay { bottom: 0; }
  .search-results { grid-template-columns: 1fr; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
  :root { --gap: 14px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .product-grid { gap: 28px 12px; }
  .card-desc { display: none; }
  .card-title { font-size: 1.05rem; }
  .card-actions .icon-btn { width: 36px; height: 36px; }
  .card-cta { font-size: .66rem; letter-spacing: .1em; min-height: 42px; }
  .loop { --per-view: 1.2; }
  .scroller { grid-auto-columns: 78%; }

  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value { padding: 28px 12px 4px 0; }
  .value + .value { padding-left: 12px; }
  .value:nth-child(3) { padding-left: 0; }
  .value h3 { font-size: 1.1rem; }
  .value p { font-size: .86rem; }
  .value-icon { width: 36px; height: 36px; margin-bottom: 16px; }

  .cat-grid { grid-auto-rows: 200px; }
  .cat-card--crochet, .cat-card--decor { grid-column: 1 / -1; }

  .edit-item a { grid-template-columns: 34px 1fr; }
  .edit-price { grid-column: 2; }

  .love-item a { grid-template-columns: 1fr 52px; gap: 14px; }
  .love-thumb { width: 52px; }

  .trust-grid { grid-template-columns: 1fr; }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--line); }

  .nl-form { grid-template-columns: 1fr; }
  .nl-form .btn { width: 100%; }

  .footer-cols { gap: 32px 16px; }
  .footer-bottom { flex-direction: column; }

  .drawer-body, .drawer-head, .drawer-foot { padding-inline: 20px; }
  .drawer--right { width: 100%; }
}

/* ---------- ≤ 390px ---------- */
@media (max-width: 390px) {
  .logo-word { font-size: 1.16rem; }
  .icon-btn { width: 40px; height: 40px; }
  .hero-title { font-size: 2.7rem; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .line-item { grid-template-columns: 68px 1fr auto; gap: 12px; }
  .line-media { width: 68px; }
}