/*
 * Lilit Mobile UX/UI v2 – mobile only  ·  v2.0.0
 * Lilit Core · assets/mobile-v2.css
 *
 * Every rule sits inside @media (max-width: 899px). Apart from the
 * heading/tap-target basics, rules are scoped to .lm2 (set on <html> by
 * mobile-v2.js), so pages without JavaScript only get the safe basics.
 * Nothing here targets .lilit-inquiry. Palette: Lilit red, anthracite,
 * white, beige, #F2F2F2 – no new colours.
 */
@media (max-width: 899px) {

  :root {
    --lm2-red: var(--red, #C1002B);
    --lm2-ink: #29272A;
    --lm2-paper: #FFFFFF;
    --lm2-beige: #F4EDE4;
    --lm2-grey: #F2F2F2;
    --lm2-line: #E4D9CC;
    --lm2-header-h: 62px;
    --lm2-tap: 44px;
  }

  /* ---------- basics (work without JS) ---------- */

  /* long German/Turkish words wrap instead of being cut off */
  .wp-site-blocks :is(h1, h2, h3):not(.lilit-inquiry *) {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
  html[lang|="ar"] .wp-site-blocks :is(h1, h2, h3) { -webkit-hyphens: manual; hyphens: manual; }

  /* anchors land below the sticky header */
  html { scroll-padding-top: calc(var(--lm2-header-h) + 12px); }

  /* touch targets that measured 9–36px */
  .contact-ribbon { padding-block: 0; }
  .contact-ribbon a { min-height: var(--lm2-tap); }
  .heritage-header .heritage-logo { display: flex; align-items: center; min-height: var(--lm2-tap); }
  .catalog-hero .back-link,
  .course-hero .back-link { display: inline-flex; align-items: center; min-height: var(--lm2-tap); }
  .course-hero-actions .course-phone { display: inline-flex; align-items: center; min-height: var(--lm2-tap); }
  .heritage-header .mobile-nav > summary { min-width: var(--lm2-tap); min-height: var(--lm2-tap); display: grid; place-items: center; box-sizing: border-box; }

  /* ---------- compact sticky header ---------- */
  .lm2 .heritage-header {
    position: sticky;
    top: 0;
    min-height: var(--lm2-header-h);
  }
  .lm2 .heritage-header .heritage-logo img { max-height: 40px; width: auto; }
  /* pages whose <main> ends right after the header: sticky cannot work there,
     so mobile-v2.js pins the header (fixed) once it scrolls out and keeps
     its space with a placeholder */
  .lm2 .heritage-header.lm2-header--fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 30;
    box-shadow: 0 1px 0 var(--lm2-line);
  }
  .lm2 .lm2-header-space { height: var(--lm2-header-h); }
  @media (min-width: 601px) and (max-width: 782px) {
    .lm2 body.admin-bar .heritage-header { top: 46px; }
  }

  /* ---------- menu as side panel (theme's <details class="mobile-nav">) ---------- */
  .lm2 .lm2-menu[open] > summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(41, 39, 42, .45);
    cursor: default;
  }
  .lm2 .heritage-header .lm2-menu > nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    z-index: 2;
    width: min(86vw, 380px);
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    margin: 0;
    padding: 64px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lm2-paper);
    border: 0;
    box-shadow: -10px 0 30px rgba(41, 39, 42, .2);
    animation: lm2-in-r .22s ease-out;
  }
  .lm2[dir="rtl"] .heritage-header .lm2-menu > nav {
    right: auto;
    left: 0;
    box-shadow: 10px 0 30px rgba(41, 39, 42, .2);
    animation-name: lm2-in-l;
  }
  @keyframes lm2-in-r { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes lm2-in-l { from { transform: translateX(-100%); } to { transform: none; } }
  .lm2.lm2-menu-open, .lm2.lm2-menu-open body { overflow: hidden; }

  .lm2 .lm2-menu > nav > a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--lm2-line);
    color: var(--lm2-ink);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
  }
  .lm2 .lm2-menu > nav > a.lm2-menu__group { border-bottom: 0; color: var(--lm2-red); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; min-height: var(--lm2-tap); }
  .lm2[lang|="ar"] .lm2-menu > nav > a.lm2-menu__group { letter-spacing: 0; font-size: 14px; }
  .lm2 .lm2-menu > nav a[aria-current="page"] { color: var(--lm2-red); }
  .lm2 .lm2-menu__fields { display: flex; flex-direction: column; margin: 0 0 6px; border-bottom: 1px solid var(--lm2-line); }
  .lm2 .lm2-menu__fields a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 14px;
    border-inline-start: 3px solid var(--lm2-red);
    margin-bottom: 6px;
    background: var(--lm2-beige);
    color: var(--lm2-ink);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }
  .lm2 .lm2-menu__close {
    position: absolute;
    top: 10px;
    inset-inline-end: 14px;
    width: var(--lm2-tap);
    height: var(--lm2-tap);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--lm2-line);
    border-radius: 8px;
    background: var(--lm2-paper);
    color: var(--lm2-ink);
    cursor: pointer;
  }
  .lm2 .lm2-menu__langs { display: flex; gap: 8px; margin-top: auto; padding-top: 24px; }
  .lm2 .lm2-menu__langs a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--lm2-tap);
    border: 1px solid var(--lm2-line);
    border-radius: 8px;
    color: var(--lm2-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .lm2 .lm2-menu__langs a[aria-current="true"] { background: var(--lm2-ink); border-color: var(--lm2-ink); color: var(--lm2-paper); }
  .lm2 .lm2-menu :focus-visible { outline: 3px solid var(--lm2-red); outline-offset: 2px; }

  /* ---------- quick filter bar under the catalog hero ---------- */
  .lm2 .lm2-qnav {
    position: sticky;
    top: var(--lm2-header-h);
    z-index: 20;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding: 10px 16px;
    background: var(--lm2-paper);
    border-bottom: 1px solid var(--lm2-line);
  }
  .lm2 .lm2-qnav::-webkit-scrollbar { display: none; }
  .lm2 .lm2-qnav.lm2-qnav--past { position: relative; top: auto; }
  .lm2 .lm2-qnav__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--lm2-tap);
    padding: 0 16px;
    border: 1px solid var(--lm2-line);
    border-radius: 999px;
    background: var(--lm2-paper);
    color: var(--lm2-ink);
    font: 700 15px/1.2 Arial, "Helvetica Neue", sans-serif;
    white-space: nowrap;
    cursor: pointer;
  }
  .lm2 .lm2-qnav__n { font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
  .lm2 .lm2-qnav__chip[aria-pressed="true"] { background: var(--lm2-ink); border-color: var(--lm2-ink); color: var(--lm2-paper); }
  .lm2 .lm2-qnav__chip:focus-visible { outline: 3px solid var(--lm2-red); outline-offset: 2px; }
  .lm2 .lm2-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ---------- compact course cards ----------
     Scoped with "html.lm2 body" so these win over the page-scoped
     catalog styles (body.page-id-… .catalog-section …) without !important. */
  html.lm2 body .course-grid { margin-top: 20px; gap: 14px; }
  html.lm2 body .course-grid > .lm2-card {
    min-height: 0;
    padding: 18px 18px 16px;
    scroll-margin-top: calc(var(--lm2-header-h) + 76px);
  }
  /* number + decorative icon: page styles force display:block on the icon */
  html.lm2 body .lm2-card > .course-number,
  html.lm2 body .lm2-card > svg { display: none !important; }
  html.lm2 body .lm2-card > .course-format { margin: 0 0 4px; font-size: 12px; }
  html.lm2 body .lm2-card > :is(h2, h3) { margin: 0 0 6px; font-size: 21px; line-height: 1.25; }
  html.lm2 body .lm2-card > p:not(.course-format):not(.course-refs) { flex: none; font-size: 16px; line-height: 1.55; margin: 0 0 8px; }
  /* description shortened only where a detail page holds the full text */
  html.lm2 body .lm2-card--has-details > p:not(.course-format):not(.course-refs) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  html.lm2 body .lm2-card > .course-refs { margin: 0; font: 600 13px/1.5 Arial, "Helvetica Neue", sans-serif; color: #6B6467; }
  html.lm2 body .lm2-card .course-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
  }
  html.lm2 body .lm2-card .course-actions.lm2-card__actions--single { grid-template-columns: 1fr; }
  html.lm2 body .lm2-card .course-actions > a.lm2-act {
    width: auto;
    min-height: var(--lm2-tap);
    margin: 0;
    padding: 6px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font: 700 15px/1.2 Arial, "Helvetica Neue", sans-serif;
    border-radius: 8px;
  }
  html.lm2 body .lm2-card .course-actions > a.lm2-act.lm2-card__details { border: 1px solid var(--lm2-ink); background: transparent; color: var(--lm2-ink); }
  html.lm2 body .lm2-card.lm2-out { display: none; }

  /* ---------- long intro folded (text stays in the page) ---------- */
  html.lm2 body .lm2-fold:not(.lm2-fold--open) .uni-intro-visual { display: none; }
  html.lm2 body .lm2-fold:not(.lm2-fold--open) {
    max-height: 360px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 75%, transparent);
    mask-image: linear-gradient(#000 75%, transparent);
  }
  .lm2 .lm2-fold__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--lm2-tap);
    margin: 4px auto 8px;
    padding: 0 20px;
    border: 1px solid var(--lm2-ink);
    border-radius: 999px;
    background: var(--lm2-paper);
    color: var(--lm2-ink);
    font: 700 15px/1.2 Arial, "Helvetica Neue", sans-serif;
    cursor: pointer;
  }
  .lm2 .lm2-fold__toggle.lm2-fold__toggle--off { display: none; }

  /* ---------- course page: "on this page" + bottom bar ---------- */
  .lm2 .lm2-toc {
    margin: 0 16px 8px;
    border: 1px solid var(--lm2-line);
    border-radius: 10px;
    background: var(--lm2-paper);
  }
  .lm2 .lm2-toc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    font: 700 15px/1.2 Arial, "Helvetica Neue", sans-serif;
    color: var(--lm2-ink);
    list-style: none;
    cursor: pointer;
  }
  .lm2 .lm2-toc > summary::-webkit-details-marker { display: none; }
  .lm2 .lm2-toc > summary::after { content: ""; width: 8px; height: 8px; border: solid var(--lm2-red); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; }
  .lm2 .lm2-toc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .lm2 .lm2-toc ol { margin: 0; padding: 0 16px 10px; padding-inline-start: 36px; }
  .lm2 .lm2-toc li a { display: flex; align-items: center; min-height: 40px; color: var(--lm2-ink); font: 400 15px/1.35 Arial, "Helvetica Neue", sans-serif; }
  .lm2 .lm2-anchor { scroll-margin-top: calc(var(--lm2-header-h) + 16px); }

  .lm2.lm2-has-ctabar body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .lm2 .lm2-ctabar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--lm2-paper);
    border-top: 1px solid var(--lm2-line);
    box-shadow: 0 -6px 18px rgba(41, 39, 42, .08);
    transition: transform .2s ease;
  }
  .lm2 .lm2-ctabar--single { grid-template-columns: 1fr; }
  .lm2 .lm2-ctabar--away { transform: translateY(115%); }
  .lm2.lm2-menu-open .lm2-ctabar { display: none; }
  .lm2 .lm2-ctabar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--lm2-tap);
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--lm2-ink);
    border-radius: 8px;
    background: var(--lm2-paper);
    color: var(--lm2-ink);
    font: 700 15px/1.2 Arial, "Helvetica Neue", sans-serif;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lm2 .lm2-ctabar__btn svg { width: 16px; height: 16px; flex: none; }
  .lm2 .lm2-ctabar__btn[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }
  .lm2 .lm2-ctabar__btn--primary { background: var(--lm2-red); border-color: var(--lm2-red); color: #fff; }

  /* ---------- testimonial rotator ---------- */
  .lm2 .lm2-rv .lilit-rv-item[hidden] { display: none; }
  .lm2 .lm2-rv .lilit-rv-dots { display: none; }
  .lm2 .lm2-rv .lilit-rv-controls { justify-content: space-between; }
  .lm2 .lm2-rv .lilit-rv-prev,
  .lm2 .lm2-rv .lilit-rv-next { width: var(--lm2-tap); height: var(--lm2-tap); }
  .lm2 .lm2-rv__count { font: 700 14px/1 Arial, "Helvetica Neue", sans-serif; color: var(--lm2-ink); font-variant-numeric: tabular-nums; }
  .lm2 .lilit-rv--coaching .lilit-rv-controls { justify-content: space-between; align-self: stretch; }

  @media (prefers-reduced-motion: reduce) {
    .lm2 .heritage-header .lm2-menu > nav { animation: none; }
    .lm2 .lm2-ctabar { transition: none; }
  }
}