/* ============================================================
   נעול עליה — MOBILE OVERHAUL
   Loaded after style.css (depends on naal-child-style).
   Goal: make the site excellent on phones.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- No horizontal overflow ---- */
  html, body { overflow-x: hidden; }
  .naal-container { padding-inline: var(--space-md); }

  /* ============================================================
     1) SHOP ARCHIVE BUG FIX
     WooCommerce's default `.product { width:30.75%; float }`
     was shrinking our cards inside the grid. Neutralise it.
     ============================================================ */
  .naal-product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .naal-product-grid > .product,
  .naal-product-grid > .naal-product-card,
  .naal-product-grid li.product {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
  }
  .naal-product-card-body { padding: var(--space-md); }
  .naal-product-card-body .naal-card-title { font-size: var(--text-base); line-height: 1.35; }
  .naal-product-card-body .naal-card-excerpt { display: none; }      /* keep cards compact */
  .naal-product-card-footer { gap: var(--space-sm); align-items: center; }

  /* ============================================================
     2) HOMEPAGE CARDS — single column, full-bleed image with the
        post TITLE overlaid (consistent with desktop). Title + category
        sit on a readable dark gradient over the editorial image.
     ============================================================ */
  .naal-dynamic-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: var(--space-md);
  }
  .naal-dynamic-grid .naal-post-card,
  .naal-dynamic-grid .naal-post-card:nth-child(1),
  .naal-dynamic-grid .naal-post-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 10;
    min-height: 200px;
    border: none !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(58, 32, 16, 0.10);
  }
  .naal-dynamic-grid .naal-post-card:first-child { aspect-ratio: 16 / 11; }

  /* image fills the card */
  .naal-dynamic-grid .naal-post-card .naal-card-image {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    aspect-ratio: unset !important;
  }
  /* tag + TITLE overlaid on a readable gradient */
  .naal-dynamic-grid .naal-post-card .naal-card-body {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    padding: var(--space-md) !important;
    background: linear-gradient(to top, rgba(35,15,5,0.90) 0%, rgba(35,15,5,0.40) 55%, transparent 100%) !important;
  }
  .naal-dynamic-grid .naal-post-card .naal-card-tag {
    display: inline-block !important;
    background: var(--color-accent) !important;
    color: #fff !important;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 6px;
    align-self: flex-start;
  }
  .naal-dynamic-grid .naal-post-card .naal-card-title {
    display: block !important;
    color: #fff !important;
    font-size: var(--text-lg) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  }
  .naal-dynamic-grid .naal-post-card:first-child .naal-card-title { font-size: var(--text-xl) !important; }
  .naal-dynamic-grid .naal-post-card .naal-card-excerpt,
  .naal-dynamic-grid .naal-post-card .naal-card-meta { display: none !important; }

  /* ---- Tabs: horizontal scroll + comfortable taps ---- */
  .naal-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .naal-tabs::-webkit-scrollbar { display: none; }
  .naal-tab { white-space: nowrap; }

  /* ============================================================
     3) HERO + HEADER
     ============================================================ */
  .naal-hero-banner { min-height: 300px; }
  .naal-hero-banner-frame h2 { font-size: var(--text-3xl); line-height: 1.25; }
  .naal-hero-banner-frame p { font-size: var(--text-sm); }
  .naal-hero-key-decor { display: none; }            /* declutter */

  /* Logo lockup on phones: smaller emblem + wordmark, stays left-aligned */
  .naal-logo-emblem { height: 54px; }
  .naal-logo { gap: var(--space-sm); }
  .naal-logo-word { font-size: var(--text-2xl); }
  .naal-logo-sub { font-size: 11px; line-height: 1.25; }
  .naal-header-top { padding: var(--space-sm) var(--space-md); }
  .naal-header-top .naal-container { justify-content: flex-start; }
  .naal-menu-toggle { padding: var(--space-sm); }

  /* ============================================================
     4) TOUCH TARGETS (≥44px) + buttons full-width where sensible
     ============================================================ */
  .naal-btn, .naal-btn-outline, .naal-btn-hero,
  .button, .single_add_to_cart_button, .add_to_cart_button,
  .naal-quick-view-trigger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ============================================================
     5) READING (single post) — light first pass
     ============================================================ */
  .naal-single, .entry-content, .naal-single-content {
    font-size: 1.07rem;
    line-height: 1.85;
  }
  .naal-single-title, .naal-single h1 { font-size: var(--text-3xl); line-height: 1.2; }
  .naal-single-content h2, .entry-content h2 { font-size: var(--text-2xl); margin-top: var(--space-xl); }
}

/* ---- Phones: single-column shop ---- */
@media (max-width: 480px) {
  .naal-product-grid { grid-template-columns: 1fr; }
  .naal-product-card-body .naal-card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---- Homepage light intro on mobile ---- */
@media (max-width: 768px) {
  .naal-home-lead { padding: var(--space-lg) 0 var(--space-sm); }
  .naal-home-title { font-size: var(--text-3xl); }
  .naal-home-sub { font-size: var(--text-base); padding-inline: var(--space-md); }

  /* reading: comfortable, not oversized, on phones */
  .naal-article { font-size: 1.09rem; line-height: 1.8; }
  .naal-article > p:first-of-type { font-size: 1.18rem; }
  .naal-single-featured { aspect-ratio: 4 / 3; }
  .naal-single-title { font-size: var(--text-3xl); }
}