/* ============================================================
   YOUNGHAIR — mobile-fix.css
   רשימת הסגירה של אנטוניו, סעיפים 5, 6, 8, 9, 11, 12, 14.
   נטען אחרון. כל כלל כאן נמדד בדפדפן לפני ואחרי.
   ============================================================ */

/* ---------- 9. ההדר חייב להיות אטום. היה 0.96 והתוכן נראה מבעדו ---------- */
.nav, .nav--scrolled {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--yh-line, #DCE2EB) !important;
  z-index: 1000 !important;
}
.drawer { z-index: 1001 !important; }

@media (max-width: 767px) {

  /* ---------- 8. אלמנטים קבועים: הפס התחתון הוא ה-CTA היחיד ---------- */
  /* הוואטסאפ הצף כפול לפס התחתון, יורד במובייל */
  .floating-btn--whatsapp { display: none !important; }
  /* הנגישות נשארת, אבל קטנה ומעל הפס, ולא באמצע המסך */
  .floating-contact {
    inset-inline-end: 10px !important;
    inset-inline-start: auto !important;
    bottom: calc(77px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 890 !important;
    pointer-events: none !important;
  }
  .floating-contact > * { pointer-events: auto !important; }
  .a11y-btn { width: 42px !important; height: 42px !important; opacity: .92; }
  .a11y-btn svg { width: 20px !important; height: 20px !important; }
  /* החץ למעלה יושב באותה עמודה, לא מעל תוכן */
  .to-top {
    inset-inline-end: 10px !important;
    inset-inline-start: auto !important;
    bottom: calc(77px + env(safe-area-inset-bottom, 0px) + 60px) !important;
    width: 42px !important; height: 42px !important;
    z-index: 890 !important;
  }
  /* פאנל הנגישות מעל הכל וממורכז, לא נחתך */
  .a11y-panel {
    inset-inline: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    bottom: calc(77px + 60px) !important;
    top: auto !important;
    z-index: 1002 !important;
  }
  /* מרווח תחתון אמיתי כדי ששום תוכן לא ייחתך מאחורי הפס */
  body { padding-bottom: calc(77px + env(safe-area-inset-bottom, 0px) + 12px) !important; }
  .mobile-bar { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }

  /* ---------- 5. "אין חבילה אחת": כפתור ומלל אחד מתחת לשני ---------- */
  .pricing-cta,
  .check-block,
  .fit-cta,
  .who-answer,
  .cases__toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .pricing-cta__question { width: 100% !important; margin: 0 !important; }
  .pricing-cta .btn,
  .check-block .btn,
  .fit-cta .btn,
  .who-answer .btn { width: 100% !important; }

  /* ---------- 6. כרטיסי עדויות: כלום לא נחתך ---------- */
  .testimonials { grid-template-columns: 1fr !important; gap: 14px !important; }
  .testimonial { padding: 22px 20px !important; overflow: visible !important; }
  .testimonial__quote { font-size: 15px !important; line-height: 1.65 !important; }
  .testimonial__person { flex-wrap: wrap !important; gap: 10px !important; }
  .testimonial__meta { min-width: 0 !important; flex: 1 1 auto !important; }
  .testimonial__author, .testimonial__verified { white-space: normal !important; word-break: break-word !important; }
  .video-grid, .media-grid, .press-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .media-card, .press-card, .video-card { overflow: hidden !important; }
  .media-card__content, .press-card__body { min-width: 0 !important; }
  .media-card__title, .media-card__body, .press-card__title, .press-card__note {
    white-space: normal !important; overflow-wrap: anywhere !important;
  }

  /* ---------- 11. FAQ: תשובות נפתחות במלואן ---------- */
  .faq-item__a { max-height: none !important; overflow: visible !important; }
  .faq-item__q { gap: 12px !important; align-items: flex-start !important; }
  .faq-item__q span:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
  .faq-item__icon { flex: 0 0 auto !important; }

  /* ---------- 12. הטופס: שדות מלאים ונוחים ---------- */
  .form, .contact__form-wrap { width: 100% !important; }
  .field { margin-bottom: 14px !important; }
  .field__input, .field__textarea {
    width: 100% !important;
    font-size: 16px !important;      /* מתחת ל-16 אייפון מזום את העמוד */
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
  .btn--block { width: 100% !important; min-height: 50px !important; }
  .consent { display: flex !important; align-items: flex-start !important; gap: 10px !important; }
  .consent__box { flex: 0 0 auto !important; width: 20px !important; height: 20px !important; margin-top: 2px !important; }
  .consent__text { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* ---------- 14. פוטר קומפקטי ---------- */
  .footer { padding-top: 40px !important; padding-bottom: 0 !important; }
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding-bottom: 26px !important;
  }
  .footer__col { margin: 0 !important; }
  .footer__title { margin: 0 0 10px !important; font-size: 15px !important; }
  .footer__list { gap: 7px !important; }
  .footer__tag, .footer__legal { margin-top: 8px !important; }
  .footer__logo { height: 56px !important; margin-bottom: 10px !important; }
  .footer__credit { padding: 20px 0 !important; }
  .credit { padding: 16px !important; }
  .footer__bottom { padding: 14px 0 !important; }
  .footer__bottom-inner { flex-direction: column !important; gap: 8px !important; text-align: center !important; }

  /* ---------- 10. תמונות וסרטונים: חיתוך נכון, פנים לא נחתכות ---------- */
  .gallery--strip { scroll-snap-type: x mandatory !important; }
  .gallery__item { scroll-snap-align: center !important; }
  .gallery__item img, .case-card__media img, .press-card__media img {
    object-position: center top !important;
  }
  .media-card__preview video, .media-card__video { object-position: center top !important; }
  .hero-video { width: min(300px, 82vw) !important; margin-inline: auto !important; }
  .story__image img, .contact-closing__photo { object-position: center top !important; }
}

/* ---------- 18. שום דבר לא חורג מהמסך, בשום רוחב ---------- */
img, video, iframe, svg { max-width: 100%; }
.container { overflow-x: clip; }

/* ---------- 8ב. כפתור הנגישות עדיין נגע בשורות ההירו. מקטין ומצמיד לקצה ---------- */
@media (max-width: 767px) {
  .floating-contact {
    inset-inline-end: 6px !important;
    bottom: calc(77px + env(safe-area-inset-bottom, 0px) + 6px) !important;
  }
  .a11y-btn { width: 38px !important; height: 38px !important; opacity: .85 !important; }
  .a11y-btn:hover, .a11y-btn:focus-visible { opacity: 1 !important; }
  /* ההירו מקבל מרווח מהעמודה הצפה כדי ששום שורה לא תיגע בה */
  .hero__micro, .hero__strap { padding-inline-end: 52px !important; }
  /* הפס התחתון: מספרים ואייקונים לא נחתכים */
  .mobile-bar bdi, .mobile-bar__btn { white-space: nowrap !important; }
  .mobile-bar__btn { font-size: 14px !important; padding-inline: 10px !important; }
}

/* ---------- 19. יעדי מגע: הטלפון בפרטי הקשר היה 20px גובה ---------- */
@media (max-width: 767px) {
  .info-row__value, a[href^="tel:"], a[href^="mailto:"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  .info-row { align-items: center !important; }
}

/* ---------- 19ב. יעדי מגע: לשונית שפה וקישורי פוטר היו קטנים מ-44px ---------- */
@media (max-width: 767px) {
  .lang-btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding-inline: 14px !important; }
  .lang-toggle { align-items: stretch !important; }
  .footer__bottom-link, .footer__list a, .footer__social a {
    display: inline-flex !important; align-items: center !important; min-height: 44px !important;
  }
  .footer__bottom-links { display: flex !important; flex-wrap: wrap !important; gap: 4px 18px !important; justify-content: center !important; }
  .footer__social a { width: 44px !important; height: 44px !important; justify-content: center !important; }
  .a11y-reset { min-height: 44px !important; }
  .a11y-option { min-height: 44px !important; }
}

/* ---------- 19ג. קישורים בתוך משפט: מרחיבים את אזור הלחיצה בלי לשבור שורה ---------- */
@media (max-width: 767px) {
  .press-strip a, .trust-bar__item a, .consent__text a, .location-card__list a, .disclaimer a {
    position: relative;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .press-strip a::after, .trust-bar__item a::after, .consent__text a::after,
  .location-card__list a::after, .disclaimer a::after {
    content: ''; position: absolute; inset: -12px -6px; /* אזור מגע נדיב, בלי השפעה על הזרימה */
  }
  .a11y-reset { min-height: 46px !important; }
}

/* ---------- 31.8: תמונות מטופלים אמיתיות בהמלצות במקום ראשי תיבות ---------- */
img.testimonial__avatar {
  width: 56px !important; height: 56px !important; flex: 0 0 56px !important;
  border-radius: 50% !important; object-fit: cover !important; object-position: center top !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px var(--yh-line, #DCE2EB) !important;
}
.testimonial__person { display: flex !important; align-items: center !important; gap: 12px !important; }
/* שם המטופל מתחת לתמונת הלפני/אחרי, קריא תמיד ולא רק ב-hover */
.gallery__item-caption {
  opacity: 1 !important; transform: none !important;
  font-size: 15px !important; font-weight: 700 !important;
  padding: 30px 14px 12px !important;
}

/* ── רשת המדיה: 5 כרטיסים בלי חלל ריק ────────────────────────
   3 בשורה העליונה, 2 רחבים בתחתונה. הכלל האחרון מופעל רק כשיש
   בדיוק 5 כרטיסים, כך שהוספה או הסרה בעתיד לא שוברת את הפריסה. */
@media (min-width: 768px) {
  .media-grid { grid-template-columns: repeat(6, 1fr); }
  .media-grid > .media-card { grid-column: span 2; }
  .media-grid > .media-card:nth-child(4):nth-last-child(2),
  .media-grid > .media-card:nth-child(5):nth-last-child(1) { grid-column: span 3; }
  /* הכרטיסים הרחבים מקבלים יחס שטוח יותר כדי שגובה התמונות
     בשתי השורות יֵצא זהה, אחרת השורה התחתונה נראית כבדה. */
  .media-grid > .media-card:nth-child(4):nth-last-child(2) .media-card__preview,
  .media-grid > .media-card:nth-child(5):nth-last-child(1) .media-card__preview { aspect-ratio: 2 / 1; }
}