/**
 * The DropMuse — Mobile-only overrides for the landing page
 *
 * Scope:
 *   - Every rule lives inside `@media (max-width: 820px)` (phones + small tablets).
 *   - Desktop (≥ 821px) is 100% untouched — this file has zero cascade effect there.
 *   - Rules are scoped to `body.page-home` so other pages are unaffected.
 *
 * Design cues: Amazon, Etsy, Artsy, Saatchi Art, 1stDibs — hero search, 2-col grid,
 * larger tap targets (44px+), prominent price, compact header, reduced padding.
 *
 * Loaded AFTER styles.css in index.html so these rules win the cascade
 * within the breakpoint.
 */

@media (max-width: 820px) {
  /* ── Global page adjustments ──────────────────────────────────────────── */

  /** Tighter side padding — art images breathe into nearly the full width.
   *  Scoped with `:not(.site-nav)` so the HEADER container keeps the same
   *  width as every other page (`styles.css` base), and the ☰ / dashboard /
   *  💬 / 🔔 icons sit at identical pixel positions on landing as on
   *  Explore / Messages / etc. */
  body.page-home .container:not(.site-nav) {
    width: min(1280px, calc(100% - 24px));
  }

  /** Prevent horizontal overflow from the multi-span wordmark on narrow phones */
  body.page-home {
    overflow-x: hidden;
  }

  /* ── Header: scrolls with page on landing (no sticky bar on mobile home) ─ */
  /**
   * Keep the same stacking as styles.css @820px (z-index 102): the drawer backdrop
   * is z-index 100, so the whole header bar must stay above it when ☰ is open.
   * `position: static` + `z-index: auto` let the dimmer cover the wordmark / row;
   * only chrome with local z-index 105 looked “lit”. Relative + 102 matches Explore et al.
   */
  body.page-home .site-header {
    position: relative;
    z-index: 102;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Header metrics match global styles.css @820px on all pages */

  /* ── Hero / Search ────────────────────────────────────────────────────── */

  /** Tighter vertical rhythm — phones don't need big hero padding */
  body.page-home .home-hero {
    padding: 8px 0 0;
  }

  /** Hero search: lifted card panel (matches desktop feel, tighter padding on phones) */
  body.page-home .search-card {
    margin-top: 0;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    box-sizing: border-box;
  }

  /** Wider typing field; logo-only search trigger (no pill chrome). */
  body.page-home .search-form {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  body.page-home .search-input {
    min-height: 44px;
    font-size: 15px;
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
  }

  body.page-home #home-search-btn.home-search-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.page-home #home-search-btn .home-search-btn-text {
    display: none;
  }

  body.page-home #home-search-btn .home-search-btn-icon {
    display: block;
    width: 22px;
    height: 22px;
  }

  /* ── Section headings ─────────────────────────────────────────────────── */

  body.page-home .section {
    padding: 22px 0 8px;
  }

  /** Pull first strip (“Your unexpected favorite”) closer under hero search — must follow `.section` padding */
  body.page-home #home-section-today.home-section {
    padding-top: 10px;
  }

  /**
   * Same row as section title (h2), link right — overrides global .section-head column @820px.
   */
  body.page-home .home-section .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  body.page-home .home-section .section-head > div:first-child {
    min-width: 0;
    flex: 1;
  }

  body.page-home .home-section .section-head h2 {
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.15;
    margin: 2px 0 0;
  }

  body.page-home .home-section .section-head .eyebrow {
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  body.page-home .home-section .section-head .section-link {
    font-size: 12px;
    margin-top: 0;
    flex-shrink: 0;
    align-self: flex-end;
    white-space: nowrap;
  }

  /* ── Product cards: tighter, image-first, price emphasized ────────────── */

  body.page-home .home-product-grid {
    gap: 14px 10px;
  }

  body.page-home .home-product-grid .thumb-wrap {
    border-radius: 12px;
  }

  body.page-home .home-product-grid .product-info {
    padding: 6px 2px 0;
  }

  /** Title is the most-scanned element on mobile — 1 line, a touch larger */
  body.page-home .home-product-grid .product-info h3 {
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 2px;
  }

  body.page-home .home-product-grid .product-info h3 a {
    color: var(--text);
  }

  body.page-home .home-product-grid .product-shop {
    font-size: 11.5px;
    line-height: 1.35;
  }

  /** Etsy / Saatchi pattern: price is bold and slightly larger than the size chip */
  body.page-home .home-product-grid .product-meta {
    font-size: 12px;
    gap: 4px;
    margin-top: 4px;
    align-items: baseline;
  }

  body.page-home .home-product-grid .product-meta strong {
    font-size: 14px;
    font-weight: 700;
  }

  /** Save/heart button: meets 44px iOS touch target */
  body.page-home .home-product-grid .like-btn {
    min-height: 36px;
    min-width: 36px;
    padding: 0 10px;
    font-size: 16px;
  }

  body.page-home .home-product-grid .product-actions {
    margin-top: 6px;
  }

  /* Footer mobile styles — site-wide in styles.css (@820px); landing matches automatically */
}

/* ── Phone tier (≤ 640px): 2-column grid, full-width rows ─────────────── */

@media (max-width: 640px) {
  /**
   * Existing styles.css already sets 2-col on the home grid at 640px; we keep
   * that and just tighten it. Nothing about this rule fires above 640px.
   */
  body.page-home .home-product-grid {
    gap: 16px 10px;
  }

  /** Artsy / 1stDibs feel: slightly taller cards emphasize the art */
  body.page-home .home-product-grid .product-thumb {
    aspect-ratio: 4 / 5;
  }

  /** Section title scale for small screens */
  body.page-home .home-section .section-head h2 {
    font-size: 22px;
  }
}

/* ── Very narrow (≤ 380px): iPhone SE / mini ──────────────────────────── */

@media (max-width: 380px) {
  /** Same scoping as the @820px rule above: leave the HEADER container at the
   *  global width so iPhone-SE landing aligns with other pages too. */
  body.page-home .container:not(.site-nav) {
    width: min(1280px, calc(100% - 18px));
  }

  body.page-home .home-product-grid .product-info h3 {
    font-size: 13px;
  }

  body.page-home .home-product-grid .product-meta strong {
    font-size: 13px;
  }
}