/* =========================================================
   responsive.css — התאמות למסכים
   נקודות שבירה: 1440+ / 1200 / 992 / 768 / 480
   ========================================================= */

/* ---------- מסכים רחבים מאוד ---------- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
  .gallery-preview { grid-auto-rows: 250px; }
}

/* ---------- עד 1280px: תפריט המבורגר ---------- */
@media (max-width: 1279.98px) {
  :root { --header-h: 76px; }

  .nav-toggle { display: inline-flex; position: relative; z-index: 120; }

  .site-nav {
    /* גובה מפורש: backdrop-filter של ה-header הופך אותו ל-containing block של position:fixed */
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    z-index: 110;
    display: block;
    padding: 24px var(--gutter) 40px;
    background: var(--background);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--border); }
  .nav-list a {
    padding: 18px 6px;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
  }
  .nav-list a:hover { background: transparent; }
  .nav-list a[aria-current="page"]::after { inset-inline: 6px auto; width: 30px; bottom: 10px; }
  .nav-list .nav-cta { border-bottom: 0; margin-top: 28px; }
  .nav-list .nav-cta a {
    margin: 0;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 1.15rem;
  }
  body.nav-open { overflow: hidden; }

  .values-grid { grid-template-columns: repeat(4, 1fr); }
  .value { padding: 28px 22px; }
}

/* ---------- עד 992px: טאבלט ---------- */
@media (max-width: 991.98px) {
  .split,
  .story-hero,
  .candle-stage,
  .contact-layout,
  .details-grid { grid-template-columns: 1fr; }

  .split-media { aspect-ratio: 4 / 3; }
  .chapter-reverse .split-media-col { order: 0; }
  .story-hero-media { justify-self: start; max-width: 420px; }

  .media-offset::before { inset: 18px -14px -18px 14px; }

  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid,
  .quotes-grid,
  .assoc-grid,
  .candles-wall { grid-template-columns: repeat(2, 1fr); }

  .masonry { column-count: 3; }

  .gallery-preview { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .gallery-preview a:nth-child(4) { grid-row: span 1; }
  .gallery-preview a:nth-child(n+6) { display: none; }

  .trip-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .cta-band { grid-template-columns: 1fr; }

  .hero::after {
    background:
      linear-gradient(to right, rgba(20, 38, 58, .7) 0%, rgba(20, 38, 58, .4) 55%, rgba(20, 38, 58, .1) 90%),
      linear-gradient(to top, rgba(20, 38, 58, .5), transparent 45%);
  }
  .candle-visual { min-height: 380px; }
}

/* ---------- עד 768px: מובייל גדול ---------- */
@media (max-width: 767.98px) {
  :root { --gutter: 20px; --fs-base: 1.075rem; }

  /* Hero במובייל: התמונה למעלה במלואה, הטקסט מתחתיה — כך הפנים תמיד גלויים */
  .hero {
    display: block;
    min-height: 0;
    background: var(--primary-deep);
    --hero-img-h: 62vh;
  }
  @supports (height: 1svh) { .hero { --hero-img-h: 62svh; } }
  .hero-media {
    position: relative;
    inset: auto;
    height: var(--hero-img-h);
    transform: none !important;
  }
  .hero-slide { object-position: var(--pos-m, center); }
  .hero::after {
    inset: 0 0 auto 0;
    height: var(--hero-img-h);
    background: linear-gradient(to top, #172e45 0%, #172e45 3%, rgba(23, 46, 69, .6) 20%, rgba(23, 46, 69, 0) 44%);
  }
  .hero-inner { display: block; }
  .hero-content { position: relative; margin-top: -64px; padding-block: 0 44px; }
  .hero-controls { top: calc(var(--hero-img-h) - 118px); bottom: auto; }
  .hero-scroll { display: none; }

  .brand-name { font-size: 1.25rem; }
  .brand-sub { font-size: .8rem; }
  .brand-mark { width: 40px; height: 40px; }

  .cards-grid,
  .quotes-grid,
  .assoc-grid,
  .candles-wall { grid-template-columns: 1fr; }

  .form-grid { grid-template-columns: 1fr; }

  .masonry { column-count: 2; column-gap: 12px; }
  .masonry-item { margin-bottom: 12px; border-radius: 12px; }

  .gallery-preview { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 10px; }
  .gallery-preview a:nth-child(1) { grid-row: span 2; }

  .trip-mosaic { grid-auto-rows: 180px; gap: 10px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }

  .details-list > div { grid-template-columns: 1fr; gap: 2px; }

  .photo-stack .media-frame:first-child { width: 88%; }

  .lightbox-prev, .lightbox-next { top: auto; bottom: 22px; transform: none; }
  .lightbox-prev { right: calc(50% + 12px); }
  .lightbox-next { left: calc(50% + 12px); }
  .lightbox-img { max-height: 70vh; }
  .lightbox-figure { max-width: 100vw; padding-inline: 8px; }

  .chapter-nav { top: var(--header-h); }

  .epitaph { border-radius: 140px 140px var(--radius-lg) var(--radius-lg); }

  .modal-media { aspect-ratio: 16 / 10; }
}

/* ---------- עד 480px: מובייל קטן ---------- */
@media (max-width: 479.98px) {
  :root { --gutter: 16px; --header-h: 70px; }

  .brand-sub { display: none; }
  .brand-name { font-size: 1.2rem; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .card-footer .btn { width: auto; }

  .values-grid { grid-template-columns: 1fr; }
  .value { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; align-items: start; padding: 22px 20px; }
  .value-icon { margin-bottom: 0; grid-row: span 2; }

  .sayings li { font-size: 1.05rem; padding: 8px 16px; }

  .gallery-preview { grid-auto-rows: 150px; }

  .filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; }

  .trip-mosaic { grid-template-columns: 1fr 1fr; }
  .trip-mosaic .media-frame:nth-child(1) { grid-column: span 2; grid-row: span 1; }

  .quote-card { padding: 30px 22px 24px; }
  .candle-visual { min-height: 340px; padding: 50px 20px 30px; }
  .epitaph { border-radius: 100px 100px var(--radius) var(--radius); padding-inline: 18px; }
  .epitaph-text { line-height: 1.9; }
  .timeline li { padding-inline-start: 40px; }
}

/* ---------- 1280–1439px: תפריט דחוס כדי שכל הפריטים ייכנסו בשורה ---------- */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .brand-sub { display: none; }
  .nav-list a { padding: 10px 9px; font-size: .98rem; }
  .nav-list .nav-cta a { margin-inline-start: 6px; padding: 10px 16px; }
}

/* ---------- אירועים ותרומות ---------- */
@media (max-width: 991.98px) {
  .event-feature,
  .donate-grid { grid-template-columns: 1fr; }
  .event-flyer { max-width: 460px; }
  .event-band { grid-template-columns: 120px 1fr; }
  .event-band .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 479.98px) {
  .schedule li { grid-template-columns: 1fr; gap: 4px; }
  .bank-details > div { grid-template-columns: 1fr auto; }
  .bank-details dt { grid-column: 1 / -1; }
  .event-band { grid-template-columns: 1fr; }
  .event-band-img { max-width: 200px; }
}

/* ---------- כפתורי סכום לתרומה ---------- */
@media (max-width: 991.98px) {
  .amount-grid { grid-template-columns: repeat(4, 1fr); }
  .amount-open { grid-column: 1 / -1; }
  .amount-open .amount-btn { min-height: 80px; }
}
@media (max-width: 479.98px) {
  .amount-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .amount-btn { min-height: 92px; }
  .donate-main-head { align-items: flex-start; }
  .standing-order { padding: 16px; gap: 14px; }
  .org-details > div { grid-template-columns: 1fr; }
}