/* Homepage hero — mobile composition based on the supplied visual reference.
   Header, tablet and desktop keep their existing shared layouts. */
@media (max-width: 767px){
  body.home-page:not(.desktop-preview) .hero{
    --home-header-height: 92px;
    min-height: calc(100svh - var(--home-header-height)) !important;
    height: auto;
    gap: 0;
    padding-bottom: 24px !important;
  }

  /* 5.10.2026: more air above the headline on every phone (was 46px) */
  body.home-page .hero-copy{
    margin: 56px 0 0;
  }

  body.home-page .hero .hero-tag{
    width: clamp(82px, 27vw, 114px);
    margin: 8px auto 8px !important;
  }

  body.home-page .hero .hero-tag b{
    font-size: clamp(9.5px, calc(2.3vw + 2px), 11.8px);
  }

  body.home-page .hero-copy h1 .line1{
    font-size: min(var(--h1s1), 10.1vw);
  }

  body.home-page .hero-copy h1 .line2{
    font-size: min(var(--h1s2), 10.1vw);
  }

  :is(body.home-page .hero-copy, .roei-figure) .cta-btn{
    position: relative;
    height: 38px !important;
    min-height: 38px;
    margin-top: 14px;
    padding: 4px 16px 4px 5px !important;
    gap: 8px;
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(241,106,44,.24);
  }

  :is(body.home-page .hero-copy, .roei-figure) .cta-btn::after{
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    border-radius: inherit;
  }

  :is(body.home-page .hero-copy, .roei-figure) .cta-btn .arrow-circle{
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  :is(body.home-page .hero-copy, .roei-figure) .cta-btn .arrow-circle svg{
    width: 15px;
    height: 15px;
  }

  /* order:4 — .hero-copy הוא flex column והכפתור הוא order:3, ולכן יחידת
     כתב היד יושבת מתחתיו ולא מעליו (ב-DOM היא קודמת לו). */
  body.home-page .hero-copy .hero-handnote{
    position: relative;
    order: 4;
    align-self: center;
    width: clamp(212px, 62vw, 260px);
    /* 5.10.2026: גבוה יותר כדי שהשורה תכיל את האותיות במלואן (ראו line-height
       למטה), והמרווח מהכפתור קטן — כך כל ההירו, כולל "כתבו עלינו בתקשורת",
       נכנס למסך גם בטלפון נמוך. */
    height: 64px;
    margin: 8px 0 0 !important;
    display: block !important;
  }

  body.home-page .hero-copy .hero-handnote .deco-script.deco-hand{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: auto;
    margin: 0;
    font-size: clamp(20px, calc(6.4vw - 2px), 25px) !important;
    /* 5.10.2026: שתי הדרישות נפרדות זו מזו. הרווח בין השורות הוא line-height,
       והאוויר שהאות ף הסופית צריכה מעל השורה הראשונה הוא padding. לכן שורה
       צפופה (1.05) עם ריפוד עליון — האותיות שלמות והרווח קטן. */
    line-height: 1.05 !important;
    /* הריפוד נותן מקום לאותיות שחורגות מתיבת השורה: למעלה ל-ף הסופית של
       "בשיתוף", ולמטה לזנבות של ן, נ ו-ת ב"לביטחון תזונתי". מסכת הכתיבה
       חותכת לקופסת האלמנט, ולכן בלי הריפוד התחתון הזנבות נחתכו. */
    padding-top: 6px;
    padding-bottom: 11px;
    text-align: center !important;
  }

  body.home-page .hero-copy .hero-handnote .hero-arrow-code{
    position: absolute;
    top: 16px;
    left: 30px;
    width: clamp(90px, 27vw, 112px) !important;
    height: auto;
    margin: 0 !important;
  }

  body.home-page .hero .hero-slot{
    height: clamp(185px, 61.5vw, 300px);
    min-height: 0 !important;
    margin: 0;
    flex: 0 0 auto;
  }

  /* The decorative title heart is omitted on mobile; donation hearts stay. */
  body.home-page .hero-copy .deco-heart{
    display: none;
  }

  body.home-page .hero .gallery3d{
    width: min(100%, 480px);
    margin-inline: auto;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
  }

  body.home-page .hero .g-stage{
    left: 50%;
    transform: none;
  }

  body.home-page .hero .g-card{
    border-radius: 13px;
    box-shadow: 0 3px 8px -5px rgba(67,31,16,.15);
  }

  /* Fill the portrait frame with a proportional crop, never stretch media.
     Curvature belongs to the card positioning, not to image scaling. */
  body.home-page .hero .g-card img,
  body.home-page .hero .g-card video{
    object-fit: cover;
    transform: none;
  }

  body.home-page .hero .gallery3d::before,
  body.home-page .hero .gallery3d::after{
    width: clamp(12px, 4vw, 20px);
  }

  body.home-page .hero .partners{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    width: min(calc(100% - 36px), 370px);
    margin: -5px auto 0;
    padding: 0;
    column-gap: 3px;
    row-gap: 0;
  }

  body.home-page .hero .partners .joint-badge{
    flex: 0 0 100%;
    height: 58px;
    margin: 0 0 8px;
    align-items: flex-start;
    gap: 4px;
    transform: none;
  }

  body.home-page .hero .partners .joint-text{
    font-size: clamp(19px, calc(5.9vw - 2px), 23px) !important;
    line-height: .98 !important;
  }

  body.home-page .hero .partners .joint-arrow-code{
    width: clamp(88px, 26vw, 110px);
    margin: 8px 0 0;
  }

  body.home-page .hero .partners .partner-welfare,
  body.home-page .hero .partners .partner-mizam{
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    align-items: center;
  }

  /* Matching grid cells keep both welfare logo layers fixed throughout
     the existing colour-reveal animation, as on the activity pages. */
  body.home-page .hero .partners .partner-welfare{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.home-page .hero .partners .partner-welfare img{
    position: static;
    inset: auto;
    grid-area: 1 / 1;
    justify-self: end;
    width: calc(clamp(26px, 8.2vw, 32px) * 3.875);
    height: clamp(26px, 8.2vw, 32px);
    max-width: 100%;
    object-fit: contain;
    transform: none;
    transition: none;
  }

  body.home-page .hero .partners .partner-mizam{
    justify-content: flex-start;
    gap: clamp(4px, 1.54vw, 6px);
  }

  body.home-page .hero .partners .partner-mizam .mizam-icon{
    height: clamp(26px, 8.2vw, 32px);
    max-width: 100%;
    object-fit: contain;
  }

  body.home-page .hero .partners .partner-mizam .mizam-text{
    flex: 0 1 auto;
    font-size: clamp(9px, 2.82vw, 11px) !important;
    line-height: 1.13 !important;
    white-space: nowrap;
  }

  body.home-page .hero .partners .p-divider{
    flex: 0 0 1px;
    height: 32px;
    margin-inline: 2px;
  }
}

@media (max-width: 389px){
  body.home-page:not(.desktop-preview) .hero{
    --home-header-height: 23.5897vw;
  }
}

@media (min-width: 600px) and (max-width: 767px){
  body.home-page:not(.desktop-preview) .hero{
    --home-header-height: 104px;
  }
}

/* Short phones retain the taller cards and readable type; only the open
   space between blocks tightens. The hero can scroll rather than crop cards. */
@media (max-width: 767px) and (max-height: 740px){
  body.home-page:not(.desktop-preview) .hero{ padding-bottom: 16px !important; }
  /* 5.10.2026: an iPhone's visible viewport is about 724px tall, so this block
     used to fire there and squeeze the headline to 16px while a taller Android
     kept 46px. The gap now stays generous on every phone. */
  body.home-page .hero-copy{ margin-top: 48px; }
  /* 5.10.2026: אותה תיבת שורה גבוהה גם בטלפון נמוך, והמרווח מהכפתור קטן
     (היה 40px) — כך כל ההירו עד "כתבו עלינו בתקשורת" נכנס למסך אחד. */
  body.home-page .hero-copy .hero-handnote{
    height: 62px;
    margin-top: 8px !important;
  }
  body.home-page .hero-copy .hero-handnote .hero-arrow-code{ top: 38px; }
  body.home-page .hero .partners .joint-badge{ height: 52px; }
}

@media (max-width: 767px) and (max-height: 620px){
  body.home-page:not(.desktop-preview) .hero{ padding-bottom: 12px !important; }
  body.home-page .hero-copy{ margin-top: 40px; }
  body.home-page .hero .hero-tag{ margin-block: 5px !important; }
  body.home-page .hero-copy .hero-handnote{
    height: 58px;
    margin-top: 6px !important;
  }
  body.home-page .hero-copy .hero-handnote .hero-arrow-code{ top: 29px; }
  body.home-page .hero .partners .joint-badge{
    height: 44px;
    margin-bottom: 6px;
  }
  body.home-page .hero .partners .joint-text{ font-size: 21px !important; }
  body.home-page .hero .partners .joint-arrow-code{ margin-top: 0; }
}