/*
  Fixes from Hamutal's mobile review, 25.10.2026 (loaded last in layouts/base.html):
  logo strip, extra white space on mobile, the "1 על 1" block, the small text in the orange "roles" block,
  the home sign-up form (phone, checkboxes, Heebo inside the lime card), the focused CTA on מעצמאית למנכ״לית,
  the infinity arrows over the two circles on the home page, the testimonials arrows, the home-page spacing,
  the CTA with the sign-up card (details first, then the calendar), the cancellation-policy page on wide screens
  and the bottom bar without the designer credit.
*/

/* ---------- Logo strip ---------- */
.logos__viewport { flex: 1; min-inline-size: 0; }
.logos__track { display: block; }
.logos__list--dup { display: none; }

@media (max-width: 860px) {
  .logos { flex-direction: column; align-items: center; gap: 18px; padding-inline: 0; overflow: hidden; }
  .logos__label { justify-content: center; padding-inline: 16px; }
  .logos__label .svg { transform: rotate(-90deg); }
  .logos__viewport {
    inline-size: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
  .logos__track { display: flex; inline-size: max-content; animation: logos-scroll 26s linear infinite; }
  .logos__list, .logos__list--dup {
    display: flex; flex: none; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
    gap: 44px; padding-inline-end: 44px;
  }
  .logos__item .svg { block-size: 24px; max-inline-size: none; }
  .logos__item--marqe .svg { block-size: 15px; }
}
@keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .logos__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logos__list--dup { display: none; }
}

/* ---------- Home: infinity arrows over the two circles (Wix mobile: the same image, turned upright) ---------- */
@media (max-width: 860px) {
  .journey__arrows {
    display: block; inset-block-start: 50%; inset-inline-start: 50%;
    inline-size: calc(min(340px, 88vw) * 1.8); max-inline-size: none;
    transform: translate(50%, -50%) rotate(90deg);
  }
}

/* ---------- Testimonials arrows on mobile: same places as desktop (next on the right →, previous on the left ←),
   so they point outwards instead of at each other ---------- */
@media (max-width: 860px) {
  .slider__viewport { order: 0; }
  .slider__btn--next { order: 1; }
  .slider__btn--prev { order: 2; }
}

/* ---------- "roles" block (orange card with the sunburst): text size like the other cards ---------- */
.roles__text { font-size: 18px; line-height: 1.5; color: var(--ink-3); }

/* ---------- Mobile: remove leftover desktop heights and tighten section spacing ---------- */
@media (max-width: 860px) {
  .one-on-one { padding-block-start: 48px; gap: 24px; }
  .one-on-one__panel { flex: none; inline-size: 100%; padding: 28px 22px; }
  .one-on-one__text { font-size: 22px; line-height: 1.45; }
  .program-hero { min-block-size: 0; }
  .roles { min-block-size: 0; padding: 36px 22px; }
  .roles__text { font-size: 17px; }
  .why__card, .feel__card, .stay--wide, .phase { min-block-size: 0; }

  .steps, .timeline { padding-block: 48px 56px; }
  .life { padding-block: 48px; }
  .areas, .outcomes, .why, .badge-intro { padding-block-start: 48px; }
  .badge-intro--first { padding-block-start: 32px; }
  .stay { margin-block-start: 40px; padding: 32px 20px 36px; }
  .dark-run { padding-block-end: 48px; }
  .faq { padding-block: 48px 56px; }

  /* WhatsApp screenshots: one simple column with even gaps (CSS columns left holes while the images loaded) */
  .client-messages { margin-block-start: 0; padding-block: 48px 40px; }
  .client-messages .pill { margin-block-end: 28px; }
  .client-messages__grid { columns: auto; display: grid; gap: 14px; }
  .client-messages__grid li { margin: 0; }
  .client-messages__grid img { display: block; block-size: auto; }

  /* Home page: gaps between blocks like Wix mobile (about 40–70 px instead of 130–200 px) */
  .home-intro { padding-block: 36px 32px; }
  .journey { padding-block: 40px 44px; }
  .journey__circles { margin-block-start: 40px; }
  .about-me { padding-block: 40px 32px; }
  .projects-cards { padding-block: 40px 24px; }
  .testimonials-wrap { padding-block-start: 16px; }
  .testimonials { padding-block: 44px 36px; }
  .signup-panel { padding-block-start: 32px; }
}

/* ---------- Home sign-up form (lime card): Heebo, phone, three checkboxes in one row ---------- */
.contact__card, .contact__card .signup__text, .contact__card .contact__form-title, .contact__card .contact__form-text,
.contact__card .ib-submit { font-family: var(--font-text); }
.contact__card .signup__text { font-size: 18px; line-height: 1.6; }
.contact__card .ib-submit { font-weight: 500; }
.contact__card .ib-field-email::after { content: none; }
.contact__card .ib-field-phone::after { content: "באיזה שירות את מתעניינת"; font-weight: 700; font-size: 14px; margin-block-start: 14px; }
.signup-panel .contact__card form[data-ib-form] { grid-template-columns: repeat(3, max-content); justify-content: center; column-gap: 32px; }
.signup-panel .contact__card .ib-field:not(.ib-field-checkbox), .signup-panel .contact__card .ib-submit,
.signup-panel .contact__card .cf-turnstile, .signup-panel .contact__card .ib-consent, .signup-panel .contact__card .ib-form-status { grid-column: 1 / -1; }
.signup-panel .contact__card .ib-field-email + .ib-field-checkbox { grid-column: auto; }
.signup-panel .contact__card .ib-field-checkbox { justify-content: center; }

@media (max-width: 860px) {
  .signup-panel .contact__card form[data-ib-form] { grid-template-columns: 1fr; }
  .signup-panel .contact__card .ib-field:not(.ib-field-checkbox) { justify-items: start; text-align: start; }
  .signup-panel .contact__card .ib-field input:not([type="checkbox"]), .signup-panel .contact__card .ib-field textarea { text-align: start; }
  .signup-panel .contact__card .ib-field-checkbox { justify-self: start; justify-content: flex-start; }
}

/* ---------- Focused CTA (מעצמאית למנכ״לית): one message, a clear price, one action ---------- */
.meeting-cta--focus .meeting-cta__content { max-inline-size: 820px; min-block-size: clamp(560px, 50vw, 720px); align-content: center; }
.meeting-cta--focus .meeting-cta__title { font-size: clamp(48px, 6vw, 90px); line-height: 0.9; }
.meeting-cta--focus .meeting-cta__text { max-inline-size: 560px; }
.meeting-cta__price { display: grid; justify-items: center; gap: 6px; margin-block-start: 28px; }
.meeting-cta__price-n { font-family: var(--font-display); font-weight: 400; font-size: clamp(52px, 5vw, 72px); line-height: 1; color: var(--yellow); }
.meeting-cta__price-note { font-size: 17px; }
.meeting-cta--focus .meeting-cta__btn { margin-block-start: 32px; }

/* ---------- CTA with sign-up (מעצמאית למנכ״לית): short message + price on one side, details card on the other.
   Step 1: name, phone, email (form 'program-signup'). Step 2: /book/ to pick a slot in the calendar. ---------- */
.meeting-cta--form .meeting-cta__content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; justify-items: stretch;
  column-gap: clamp(32px, 4vw, 56px); row-gap: 32px;
  max-inline-size: 1120px; min-block-size: 0; padding: clamp(48px, 5vw, 72px) clamp(20px, 4.5vw, 64px);
  text-align: start;
}
.meeting-cta--form .meeting-cta__message { display: grid; justify-items: start; }
.meeting-cta--form .meeting-cta__eyebrow { font-size: 20px; }
.meeting-cta--form .meeting-cta__title { margin-block-start: 10px; font-size: clamp(44px, 4.5vw, 64px); line-height: 0.95; }
.meeting-cta__line { display: block; text-wrap: balance; }
.meeting-cta--form .meeting-cta__text { margin-block-start: 18px; max-inline-size: 440px; font-size: 20px; }
.meeting-cta--form .meeting-cta__price { justify-items: start; gap: 4px; margin-block-start: 24px; }
.meeting-cta--form .meeting-cta__price-note { font-size: 16px; opacity: .9; }

.meeting-cta__card {
  padding: 28px 28px 24px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius);
  background: rgba(17, 16, 16, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-shadow: none; font-family: var(--font-text);
}
.meeting-cta__card-title { margin-block-end: 18px; font-family: var(--font-text); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--yellow); }
.meeting-cta__card form[data-ib-form] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.meeting-cta__card .ib-field { display: grid; gap: 6px; margin: 0; }
.meeting-cta__card .ib-field-text, .meeting-cta__card .ib-submit, .meeting-cta__card .cf-turnstile,
.meeting-cta__card .ib-form-status, .meeting-cta__card .ib-consent { grid-column: 1 / -1; }
.meeting-cta__card .ib-field::after { content: none; }
.meeting-cta__card label { font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.2; color: var(--paper); text-align: start; }
.meeting-cta__card .ib-req { color: var(--yellow); }
.meeting-cta__card input:not([type="checkbox"]):not([type="hidden"]) {
  inline-size: 100%; block-size: 48px; min-block-size: 48px; padding: 0 14px; margin: 0;
  border: 0; border-radius: 8px; background: var(--white); color: var(--ink);
  font-family: var(--font-text); font-weight: 400; font-size: 17px; text-align: right;
}
.meeting-cta__card input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.meeting-cta__card .ib-submit {
  inline-size: 100%; block-size: 56px; min-block-size: 56px; margin: 6px 0 0; padding: 0 20px;
  border: 0; border-radius: 100px; background: var(--yellow); color: var(--ink);
  font-family: var(--font-text); font-weight: 700; font-size: 18px; cursor: pointer;
}
.meeting-cta__card .ib-submit:hover { background: var(--paper); }
.meeting-cta__card .cf-turnstile:empty, .meeting-cta__card .ib-form-status:empty { display: none; }
.meeting-cta__card .ib-form-status { font-size: 15px; color: var(--paper); }
.meeting-cta__card-note { margin-block-start: 14px; font-size: 15px; line-height: 1.4; text-align: center; color: var(--paper); opacity: .85; }

@media (max-width: 860px) {
  .meeting-cta--form .meeting-cta__content { grid-template-columns: 1fr; padding: 32px 16px 20px; row-gap: 22px; text-align: center; }
  .meeting-cta--form .meeting-cta__message, .meeting-cta--form .meeting-cta__price { justify-items: center; }
  .meeting-cta--form .meeting-cta__title { font-size: 38px; }
  .meeting-cta--form .meeting-cta__text { margin-block-start: 14px; font-size: 17px; }
  .meeting-cta--form .meeting-cta__price { margin-block-start: 16px; }
  .meeting-cta--form .meeting-cta__price-n { font-size: 48px; }
  .meeting-cta__card { padding: 22px 18px 18px; }
  .meeting-cta__card-title { margin-block-end: 14px; text-align: center; }
}

/* ---------- Cancellation policy (and any .policy page): the side padding grew with wide screens and squeezed the
   text into a narrow column. Now a 765 px column, like Wix, with a fixed small side padding ---------- */
.policy { box-sizing: content-box; max-inline-size: 765px; padding-inline: 18px; }

/* ---------- Bottom bar without the designer credit: copyright on the right, links on the left ---------- */
@media (min-width: 861px) {
  .bottom-bar { grid-template-columns: 1fr auto; }
}