/* ==============================================================
   responsive.css - v5 mobile + tablet optimization overlay
   Loaded AFTER all other stylesheets so its rules win.
   Breakpoints:
     >1200  desktop    (untouched)
     901-1200  small desktop
     701-900   tablet
     481-700   large phone / landscape phone
     ≤480     phone
  ============================================================== */

/* ---------- Global safety ----------
   NOTE: use overflow-x: clip (not hidden) - `hidden` on html/body breaks
   position: sticky on descendants by creating an implicit scroll container. */
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; height: auto; }

/* Prevent iOS zoom on form focus */
@media (max-width: 700px) {
  input, textarea, select, button { font-size: 16px !important; }
}

/* ==============================================================
   NAV - mobile drawer
   ============================================================== */
@media (max-width: 1100px) {
  /* Mobile: logo on the LEFT, hamburger on the RIGHT (nav.css sets direction: ltr
     on .nav-inner). The drawer below restores RTL for Hebrew text alignment. */
  .nav-inner {
    padding: 12px 22px !important;
  }
  .nav-logo img { height: 92px !important; }

  /* Drawer opens under sticky header. Force RTL inside so Hebrew text and
     items align to the RIGHT (the nav-inner uses ltr to flip logo/hamburger). */
  .nav.is-open .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--cream);
    padding: 20px 24px 28px;
    gap: 4px;
    border-bottom: 1px solid rgba(201,166,160,0.3);
    box-shadow: 0 20px 40px -20px rgba(44,95,93,0.25);
    animation: ek-slide-down .3s ease both;
    direction: rtl;
    text-align: right;
  }
  .nav.is-open .nav-links > a,
  .nav.is-open .nav-links .nav-drop-wrap {
    width: 100%;
    padding: 12px 6px;
    border-bottom: 1px solid rgba(201,166,160,0.12);
    text-align: right;
    direction: rtl;
  }
  .nav.is-open .nav-links .nav-drop-wrap:last-child,
  .nav.is-open .nav-links > a:last-child { border-bottom: 0; }

  /* Dropdown trigger as tap target (not hover) on mobile */
  .nav.is-open .nav-drop-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0;
    direction: rtl;
    text-align: right;
  }
  .nav.is-open .nav-drop-panel {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 6px 0 2px !important;
    background: transparent !important;
    min-width: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    direction: rtl;
    text-align: right;
  }
  .nav.is-open .nav-drop-wrap.drop-open .nav-drop-panel {
    max-height: 600px;
  }
  .nav.is-open .nav-drop-panel a {
    display: block;
    padding: 10px 14px 10px 14px !important;
    color: var(--ink-soft);
    font-size: 14px;
    text-align: right;
    direction: rtl;
  }
  .nav.is-open .nav-drop-title { padding: 2px 0 8px !important; margin-bottom: 4px; border: 0; text-align: right; }
  /* "Overview" link to the category landing page - more prominent */
  .nav.is-open .nav-drop-overview {
    color: var(--terracotta) !important;
    font-weight: 700 !important;
    padding: 6px 0 10px !important;
    border-bottom: 1px solid rgba(201,166,160,0.18);
    margin-bottom: 6px;
    text-align: right;
  }

  .nav-cta,
  .nav.is-open .nav-cta { display: none !important; }
}

@keyframes ek-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ==============================================================
   CAT-PAGENAV - horizontal swipe scroll on mobile.
   Tabs render in one row, RTL-aligned (first tab on the right),
   user swipes left to reveal more. Scrollbar hidden.
   ============================================================== */
@media (max-width: 900px) {
  .cat-pagenav {
    padding: 0 !important;
    pointer-events: auto !important;
    margin-top: 12px !important;
    top: 101px !important;
    display: flex !important;
    justify-content: center !important;
  }
  .cat-pagenav-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 7px 14px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(31,72,70,0.96) !important;
    width: 92% !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    direction: rtl;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px -10px rgba(0,0,0,0.3) !important;
    isolation: isolate;
  }
  .cat-pagenav-inner::-webkit-scrollbar { display: none !important; }
  .cat-pagenav a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
  }
  /* Hide the underline indicator on mobile - it visually overflows the pill. */
  .cat-pagenav a::after { display: none !important; }
}

/* ==============================================================
   ANCHOR JUMP: account for sticky header + sticky pagenav
   so section targets don't land hidden behind the bars.
   ============================================================== */
.cat-article, .cat-signs, .cat-process, .cat-featured, .cat-hours,
.cat-video, .cat-lectures, .cat-stories, .cat-hero, .cat-cta-lead, .cat-cta,
.cat-split-media {
  scroll-margin-top: 180px;
}
@media (max-width: 900px) {
  .cat-article, .cat-signs, .cat-process, .cat-featured, .cat-hours,
  .cat-video, .cat-lectures, .cat-stories, .cat-hero, .cat-cta-lead, .cat-cta,
  .cat-split-media {
    scroll-margin-top: 140px;
  }
}

/* ==============================================================
   HERO - both home and category
   ============================================================== */
@media (max-width: 900px) {
  .hero,
  .cat-hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .hero-inner,
  .cat-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .hero-title,
  .cat-title {
    font-size: clamp(32px, 8vw, 46px) !important;
    line-height: 1.1 !important;
  }
  .hero-lead,
  .cat-lead { font-size: 16px !important; }
  .hero-portrait,
  .cat-hero-portrait-frame {
    max-width: 320px;
    margin: 0 auto;
  }
  .cat-hero-img { max-height: 320px; }
}

@media (max-width: 480px) {
  .hero-title,
  .cat-title { font-size: clamp(28px, 9vw, 38px) !important; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-meta-divider { display: none !important; }
  .cat-hero-crumbs { font-size: 12px; flex-wrap: wrap; }
}

/* ==============================================================
   CTA - card stacks cleanly on mobile
   ============================================================== */
@media (max-width: 900px) {
  .cat-cta { padding: 48px 20px 70px !important; }
  .cat-cta-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 26px !important;
  }
  .cat-cta-portrait img { width: 200px; height: 200px; }
  .cat-cta-text-col h2 { font-size: clamp(24px, 5vw, 32px) !important; }
  .cat-cta-hours-line {
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
  }
  .cat-cta-hours-line .cat-cta-sep { display: none; }
  .cat-cta-phone { font-size: 20px !important; padding: 14px 24px !important; }
  .cat-cta-lead-inner { padding: 0 !important; }
  .bot-cta-lead { width: 160px !important; }
}

/* ==============================================================
   GRIDS collapse
   ============================================================== */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .cat-featured-grid,
  .cat-featured-grid.cols-4,
  .cat-related-grid,
  .cat-lectures-grid,
  .blog-grid,
  .products-grid,
  .cat-signs-grid,
  .cat-step-grid,
  .cat-story-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .cat-hours-table { grid-template-columns: 1fr 1fr !important; }

  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
}

@media (max-width: 600px) {
  .services-grid,
  .cat-featured-grid,
  .cat-featured-grid.cols-4,
  .cat-related-grid,
  .cat-lectures-grid,
  .blog-grid,
  .products-grid,
  .cat-signs-grid,
  .cat-step-grid,
  .cat-story-grid,
  .stats-grid { grid-template-columns: 1fr !important; }
}

/* ==============================================================
   SECTION padding on tablet + mobile
   ============================================================== */
@media (max-width: 900px) {
  .hero { padding-top: 60px !important; padding-bottom: 60px !important; }
  .about, .quote, .services, .products, .blog, .cta, .testimonials,
  .cat-hero, .cat-article, .cat-intro, .cat-stories, .cat-process,
  .cat-signs, .cat-hours, .cat-featured, .cat-video, .cat-lectures,
  .cat-cta-lead {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .cat-article.split .cat-article-inner,
  .about-inner { gap: 32px !important; }
}
@media (max-width: 600px) {
  .about, .quote, .services, .products, .blog, .cta, .testimonials,
  .cat-article, .cat-intro, .cat-stories, .cat-process,
  .cat-signs, .cat-hours, .cat-featured, .cat-video, .cat-lectures,
  .cat-cta-lead {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cat-cta-inner { padding: 34px 20px !important; }
}

/* ==============================================================
   FOOTER
   ============================================================== */
@media (max-width: 900px) {
  .footer { padding: 50px 24px 20px !important; }
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  .footer-brand { grid-column: 1 / -1; max-width: 100%; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-social { justify-content: flex-start; }
}

/* ==============================================================
   TOUCH TARGETS - ensure tappable at ≥44px
   ============================================================== */
@media (max-width: 900px) {
  .nav-cta, .btn, .btn-primary, .btn-outline,
  .cat-cta-phone, .cat-cta-form button,
  .service-link, .cat-featured-card, .cat-related-card,
  .footer-social a { min-height: 44px; }
  .footer-social a { width: 40px; height: 40px; }
}

/* ==============================================================
   ANIMATION perf on mobile - disable parallax + heavy effects
   ============================================================== */
@media (max-width: 900px) {
  .anim-on .bot-about,
  .anim-on .bot-products,
  .anim-on .bot-services {
    transform: none !important;
  }
  .anim-on .bot-hero { animation-iteration-count: 1 !important; }
  /* Smaller reveal distance on mobile = less motion */
  .anim-on [data-reveal] { transform: translateY(14px); }
}

/* Hide super-decorative botanicals on tiny phones.
   bot-quote-l/r intentionally KEPT visible on mobile - they frame the quote
   section on both sides and look right at a smaller size. */
@media (max-width: 480px) {
  .bot-hero, .bot-services-1, .bot-services-2 {
    display: none !important;
  }
  .bot-about, .bot-products, .bot-cta-lead {
    width: 140px !important;
    opacity: 0.5 !important;
  }
  /* Smaller flower flanks on phones so they don't crowd the quote text.
     Vertically centered (top:50% + translateY(-50%) from base CSS) and
     inset 30px from each edge per Alon's spec. */
  .bot-quote {
    height: 130px !important;
    width: auto !important;
    opacity: 0.22 !important;
    top: 50% !important;
  }
  .bot-quote-r {
    right: 5px !important;
    left: auto !important;
    transform: translateY(-50%) rotate(-10deg) !important;
  }
  .bot-quote-l {
    left: 5px !important;
    right: auto !important;
    transform: translateY(-50%) scaleX(-1) rotate(-10deg) !important;
  }
}

/* ==============================================================
   TYPOGRAPHY - slightly tighter on mobile
   ============================================================== */
@media (max-width: 700px) {
  .section-title, .services-head h2, .cat-featured-head h2,
  .about-col h2, .cat-article-col h2, .products-head h2, .blog-head h2 {
    font-size: clamp(26px, 6vw, 34px) !important;
    line-height: 1.15 !important;
  }
  p { font-size: 15.5px; line-height: 1.7; }
  .eyebrow { font-size: 11.5px; }
}

/* ==============================================================
   ARTICLE 2-col splits → single col
   ============================================================== */
@media (max-width: 900px) {
  .cat-article.split .cat-article-inner,
  .cat-intro-inner,
  .cat-process-head,
  .cat-signs-inner,
  .about-inner,
  .cat-cta-lead-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .cat-article-image { min-height: 260px; height: auto; }
}

/* ==============================================================
   QUOTE / TESTIMONIALS / STORY CARDS
   ============================================================== */
@media (max-width: 700px) {
  .quote-card, .stats-grid { padding: 22px !important; }
  .quote-text { font-size: 18px !important; }
}

/* ==============================================================
   HOMEPAGE - image+text two-col sections need text-first stacking
   on mobile (DOM has image first, but RTL readers should see text
   above image on phone).
   ============================================================== */
@media (max-width: 900px) {
  .about-inner,
  .cta-inner {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}

/* Clamp image heights on small phones so they don't dominate the screen */
@media (max-width: 600px) {
  .about-img-frame,
  .about-visual,
  .cta-img-frame,
  .cta-visual { max-height: 280px; overflow: hidden; }
  .about-img-frame img,
  .about-visual img,
  .cta-img-frame img,
  .cta-visual img { width: 100%; height: 100%; object-fit: cover; }

  .p-card .p-media,
  .blog-card .blog-img,
  .product-card img,
  .blog-card img { max-height: 220px; object-fit: cover; }

  .cta-inner { padding: 30px 20px !important; }
}

/* ==============================================================
   HOMEPAGE MOBILE - comprehensive layout fixes
   - Hero: 2 buttons same line, chips wrap cleanly, image not chopped
   - About: portrait BELOW the title (DOM-order swap via CSS), clinic
     float-card sits inside the frame (not cropped off-screen)
   - Products: card images full-bleed (not 85% with white gutter)
   - CTA: trust-card sits below image cleanly, not cropped
   ============================================================== */
@media (max-width: 1100px) {
  /* About: stack with TEXT first, image after - user wants portrait
     under the heading "נעים להכיר אני אפרת קידר", not above it. */
  .about-inner { display: flex !important; flex-direction: column !important; }
  .about-inner .about-text { order: 1 !important; }
  .about-inner .about-visual { order: 2 !important; }
}
/* Desktop: hide all the mobile-only image clones we add for layout. */
.hero-img-mobile,
.about-visual-mobile,
.about-bio-portrait-mobile { display: none; }

/* Desktop: ignore the inline background-image on product cards (we set
   it inline so the mobile CSS can use it as a CSS background — desktop
   keeps using the <img> tag inside the card with object-fit). */
@media (min-width: 901px) {
  .p-card .p-media,
  .p-card .p-media-course,
  .p-card .p-media-luach,
  .p-card .p-media-book {
    background-image: none !important;
  }
}

/* /about/ page mobile: hide the column portrait, show the H2-anchored
   clone that appears INSIDE the body content right under the heading. */
@media (max-width: 980px) {
  .about-bio > .about-bio-inner > .about-bio-portrait { display: none !important; }
  .about-bio-portrait-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    aspect-ratio: 3/4 !important;
    margin: 18px auto 26px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 24px 48px -22px rgba(44,95,93,0.35) !important;
  }
}

@media (max-width: 900px) {
  /* HERO ----------------------------------------------------- */
  .hero { padding: 80px 22px 60px !important; }
  /* Hide the original desktop hero visual; show mobile-clone right after H1. */
  .hero-visual { display: none !important; }
  .hero-img-mobile {
    display: block !important;
    margin: 22px auto 26px !important;
    width: 100% !important;
    max-width: 380px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 50px -22px rgba(44,95,93,0.35) !important;
    aspect-ratio: 4 / 5;
  }
  .hero-img-mobile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  .hero-actions {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-bottom: 36px !important;
  }
  .hero-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 13px 14px !important;
    font-size: 14px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  /* Chips: 2 rows of equal-width chips. Use a 6-col grid so row 1
     fits 3 chips (each spans 2 cols → 33% each) and row 2 fits 2 chips
     (each spans 3 cols → 50% each). 5 chips total, no orphans. */
  .hero-meta {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    padding-top: 22px !important;
  }
  .hero-meta-divider { display: none !important; }
  .hero-meta-tag {
    padding: 8px 4px !important;
    font-size: 12.5px !important;
    background: rgba(255,255,255,0.7) !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .hero-meta-tag:nth-child(1),
  .hero-meta-tag:nth-child(2),
  .hero-meta-tag:nth-child(3) { grid-column: span 2 !important; }
  .hero-meta-tag:nth-child(4),
  .hero-meta-tag:nth-child(5) { grid-column: span 3 !important; }

  /* ABOUT ---------------------------------------------------- */
  .about { padding: 60px 22px !important; }
  .about-inner { gap: 30px !important; }
  /* Hide the desktop visual column on mobile and use the clone we render
     INSIDE .about-text right after the H2. */
  .about > .about-inner > .about-visual { display: none !important; }
  .about-visual-mobile {
    display: block !important;
    margin: 22px auto 28px !important;
    text-align: center;
  }
  .about-visual-mobile .about-img-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    aspect-ratio: 1 !important;
    border-radius: 50% 50% 24px 24px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-shadow: 0 24px 48px -22px rgba(44,95,93,0.32) !important;
    background: var(--cream);
  }
  .about-visual-mobile .about-img-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block;
  }
  .about-visual-mobile .about-float-card {
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    margin: -22px auto 0 !important;
    max-width: 300px !important;
    padding: 12px 18px !important;
    background: white !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 28px -10px rgba(44,95,93,0.25);
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
  }

  /* PRODUCTS / SERVICES ------------------------------------- */
  .products-grid { grid-template-columns: 1fr !important; gap: 18px !important; max-width: 100% !important; }
  .p-card {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: var(--r-lg) !important;
  }
  /* Bullet-proof full-bleed: aspect-ratio box + background-image pulled
     from the <img> src via inline style (set on the .p-media element).
     We hide the <img> entirely on mobile to avoid any flex/sizing bugs
     and just paint the image as a CSS background that covers the box. */
  .p-card .p-media,
  .p-card a.p-media {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--cream-deep) !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
  }
  /* Hide the <img> tag on mobile — we draw the image via background-image
     set inline (see the JS hydration below). */
  .p-card .p-media > img,
  .p-card .p-media-luach > img,
  .p-card .p-media-book > img,
  .p-card .p-media-course > img {
    display: none !important;
  }
  /* The luach/book product images aren't full-bleed photos — they're
     product shots on a colored panel. Keep their gradient backdrop. */
  .p-card .p-media-luach { background-color: #E8D4CE !important; background-position: center !important; background-size: 88% auto !important; }
  .p-card .p-media-book { background-color: #D4A89E !important; background-position: center !important; background-size: 88% auto !important; }
  /* Course image is a real lifestyle photo — anchor to bottom-center. */
  .p-card .p-media-course { background-position: center bottom !important; background-size: cover !important; }
  /* Badges sit above the bg image. */
  .p-card .p-media .p-tag,
  .p-card .p-media .p-badge {
    position: absolute !important;
    z-index: 2 !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
  }

  /* CTA - "מתחילים עם שיחת היכרות" --------------------------- */
  .cta-inner { padding: 36px 22px !important; gap: 24px !important; }
  .cta-visual {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .cta-img-frame {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
    border-width: 3px !important;
    order: 2 !important;
  }
  /* Mobile-only: hide the "ייעוץ טלפוני ראשוני - חינם" badge entirely
     (per user request). Desktop keeps its corner-pinned position. */
  .cta-badge { display: none !important; }
  .cta-actions { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .cta-actions .btn { justify-content: center !important; }
  /* Style the phone link as a proper outlined pill on mobile so it doesn't
     look like a stranded inline link. Desktop styling untouched. */
  .cta-actions .cta-phone {
    justify-content: center !important;
    padding: 13px 22px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 233, 229, 0.45) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--cream) !important;
    font-weight: 600 !important;
    font-size: 15.5px !important;
    direction: ltr !important;
    letter-spacing: 0.02em !important;
  }
  .cta-actions .cta-phone svg { flex-shrink: 0; }
}

/* ==============================================================
   Mobile: tame the category hero - min-height 620px is way too tall
   on phones, and crumbs margin 90px adds dead air at the top.
   ============================================================== */
@media (max-width: 900px) {
  .cat-hero {
    min-height: auto !important;
    padding: 26px 24px 48px !important;
  }
  .cat-hero-crumbs {
    margin-bottom: 28px !important;
  }
}
@media (max-width: 480px) {
  .cat-hero {
    padding: 22px 18px 40px !important;
  }
  .cat-hero-crumbs { margin-bottom: 20px !important; }
}

/* ==============================================================
   ek-stacked-cards - used on /early-childhood/ lectures grid and
   anywhere we want a 3-column inline-styled card row to STACK
   full-width on mobile rather than crunch into 3 cramped columns.
   ============================================================== */
@media (max-width: 720px) {
  .ek-stacked-cards { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ==============================================================
   Child page (post-body) hero - same tightening
   ============================================================== */
@media (max-width: 900px) {
  .post-hero { min-height: auto !important; padding: 26px 24px 36px !important; }
  .post-crumbs { margin-bottom: 18px !important; font-size: 12.5px !important; flex-wrap: wrap; }
  .post-hero-inner h1 { font-size: clamp(26px, 6.5vw, 36px) !important; line-height: 1.15 !important; }
  .post-eyebrow { font-size: 12px !important; }
}
@media (max-width: 480px) {
  .post-hero { padding: 22px 18px 30px !important; }
}

/* Mobile header: LOGO on the RIGHT, HAMBURGER on the LEFT (Hebrew RTL).
   Flex container in RTL: first child (logo) → flex-start = RIGHT,
   last child (hamburger) → flex-end = LEFT. */
@media (max-width: 640px) {
  .nav-inner {
    padding: 10px 20px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    direction: rtl !important;
    min-height: 0 !important;
  }
  .nav-inner::after { content: none !important; }
  .nav-logo {
    order: 0 !important;
    margin: 0 !important;
    transform: none !important;
    max-width: calc(100vw - 80px) !important;
    direction: rtl !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .nav-logo img {
    height: 84px !important;
    width: auto !important;
    display: block !important;
  }
  .nav-hamburger {
    order: 1 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
    margin: 0 !important;
  }
  .hero {
    padding-top: 16px !important;
  }
  .hero-inner {
    gap: 22px !important;
  }
}