/**
 * REATS · Mobile Compact Design System
 * Breakpoint: max-width 768px
 *
 * Goal: ~25–35% more vertical content per screen (Hero density as reference).
 * The homepage carousel hero (.hero--v2) and experience hero card
 * (.exp-event-hero__card) are intentionally excluded.
 *
 * Tokens (override on :root below):
 *   --spacing-xs          6px
 *   --spacing-sm          8px
 *   --spacing-md          12px
 *   --card-padding-mobile 12px
 *   --compact-button-height 44px
 *   --compact-gap         10px
 *   --compact-list-gap    8px
 */

@media (max-width: 768px) {
  :root {
    /* ── Compact spacing tokens ─────────────────────────────────────── */
    --spacing-xs: 6px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --card-padding-mobile: 12px;
    --compact-button-height: 44px;
    --compact-gap: 10px;
    --compact-list-gap: 8px;

    /* Map into existing site variables */
    --page-pad: 12px;
    --bz-pad-x: 12px;
    --bz-gap: var(--compact-gap);

    /* Typography */
    --compact-fs-body: 0.9rem;
    --compact-fs-label: 0.78rem;
    --compact-fs-h1: 1.25rem;
    --compact-fs-h2: 1.25rem;
    --compact-fs-h3: 1rem;
    --compact-fs-h4: 0.94rem;

    /* Icons (~15% smaller than typical 20px baseline) */
    --compact-icon-sm: 14px;
    --compact-icon-md: 17px;
    --compact-icon-lg: 20px;

    /* Experience tokens used downstream */
    --exp-gap: var(--compact-gap);
    --exp-radius-sm: 12px;
  }

  /* ── Base rhythm ─────────────────────────────────────────────────── */
  html {
    font-size: 15px;
  }

  body {
    line-height: 1.5;
  }

  /* ── Layout shells ───────────────────────────────────────────────── */
  .container {
    padding-inline: var(--page-pad);
  }

  body.bz-pilot-layout .bz-main {
    gap: var(--compact-gap);
  }

  body.bz-pilot-layout .bz-page-content {
    padding-top: var(--spacing-sm);
  }

  .bz-block,
  .bz-block--cards {
    margin-bottom: var(--compact-gap);
  }

  .bz-pilot-intro,
  .bz-pilot-intro--page {
    padding-block: var(--spacing-md);
  }

  .retreats-grid,
  .bz-pilot-grid.retreats-grid,
  .search-results-grid {
    gap: var(--compact-gap);
  }

  /* ── Typography (content areas — not hero) ───────────────────────── */
  .exp-section h2,
  .exp-portal__title,
  .bz-block__title,
  .ha-title,
  .search-page__title,
  .hub-editorial__title {
    font-size: var(--compact-fs-h2);
    line-height: 1.2;
  }

  .exp-section h3,
  .exp-section__sub,
  .exp-prose h3,
  .bz-block__sub,
  .ha-lead {
    font-size: var(--compact-fs-h3);
    line-height: 1.35;
  }

  .exp-section .exp-prose,
  .exp-section .prose,
  .exp-booking__tagline,
  .exp-portal__sub,
  .retreat-meta,
  .footer-col p {
    font-size: var(--compact-fs-body);
    line-height: 1.5;
  }

  .exp-section__kicker,
  .exp-booking__kicker,
  .exp-portal__kicker,
  .exp-booking__fact-body strong,
  label,
  .form-label,
  .exp-lead-form__field span {
    font-size: var(--compact-fs-label);
  }

  .exp-section__head {
    margin-bottom: var(--compact-gap);
  }

  .exp-section .exp-prose p,
  .exp-section .prose p {
    margin-bottom: var(--spacing-sm);
  }

  .exp-prose h2,
  .exp-section .exp-prose h2 {
    margin: var(--spacing-md) 0 var(--spacing-sm);
    font-size: var(--compact-fs-h3);
  }

  /* ── Cards & sections ────────────────────────────────────────────── */
  .exp-section {
    padding: var(--card-padding-mobile);
    margin-bottom: var(--compact-gap);
    scroll-margin-top: 96px;
    min-height: 0;
  }

  .exp-event-hero__intro .exp-section {
    padding: var(--card-padding-mobile);
  }

  .exp-booking {
    padding: var(--card-padding-mobile);
    gap: var(--compact-gap);
    min-height: 0;
  }

  .exp-booking__head {
    gap: var(--spacing-xs);
  }

  .exp-booking__facts {
    border-radius: var(--exp-radius-sm);
  }

  .exp-booking__fact {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--compact-fs-body);
    min-height: 0;
  }

  .exp-booking__fact-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .exp-booking__fact-icon svg {
    width: var(--compact-icon-sm);
    height: var(--compact-icon-sm);
  }

  .exp-booking__amount {
    font-size: clamp(1.35rem, 4.5vw, 1.65rem);
  }

  .exp-booking__actions {
    gap: var(--spacing-sm);
  }

  .exp-booking__trust {
    padding-top: var(--spacing-sm);
    gap: var(--spacing-xs);
    font-size: var(--compact-fs-label);
  }

  .exp-booking__trust svg {
    width: var(--compact-icon-sm);
    height: var(--compact-icon-sm);
  }

  .retreat-body {
    padding: var(--card-padding-mobile);
    gap: var(--spacing-sm);
    min-height: 0;
  }

  .retreat-title {
    font-size: 1.05rem;
    line-height: 1.28;
  }

  .retreat-facts {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-xs);
  }

  .retreat-fact__text {
    font-size: var(--compact-fs-label);
  }

  .retreat-footer__bar {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-xs) var(--spacing-sm);
    min-height: 0;
  }

  .retreat-chips {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    left: var(--spacing-sm);
  }

  .retreat-badge {
    padding: 4px 9px;
    font-size: var(--compact-fs-label);
  }

  .bz-deals__band,
  .bz-gift-strip__band,
  .ha-block {
    padding: var(--card-padding-mobile) var(--page-pad);
  }

  .home-about {
    margin-top: var(--compact-gap);
  }

  .exp-community__card {
    padding: var(--card-padding-mobile);
  }

  .exp-community__link {
    min-height: 0;
    padding: var(--spacing-sm) var(--spacing-xs);
    gap: var(--spacing-xs);
  }

  .exp-community__link-icon {
    width: 32px;
    height: 32px;
  }

  /* ── Buttons ─────────────────────────────────────────────────────── */
  .btn {
    min-height: var(--compact-button-height);
    padding: 8px 16px;
    font-size: var(--compact-fs-body);
    gap: var(--spacing-sm);
  }

  .btn-lg {
    min-height: var(--compact-button-height);
    padding: 9px 18px;
    font-size: var(--compact-fs-body);
  }

  .exp-booking__cta,
  .exp-booking__contact {
    min-height: var(--compact-button-height);
    font-size: var(--compact-fs-body);
  }

  .exp-portal__all {
    min-height: var(--compact-button-height);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--compact-fs-body);
  }

  .exp-lead-form__submit {
    min-height: var(--compact-button-height);
    font-size: var(--compact-fs-body);
  }

  .icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .icon-btn svg {
    width: var(--compact-icon-md);
    height: var(--compact-icon-md);
  }

  /* ── Forms & inputs ──────────────────────────────────────────────── */
  .exp-lead-form__grid {
    gap: var(--compact-gap);
  }

  .exp-lead-form__field input,
  .exp-lead-form__field textarea,
  .exp-lead-form__field select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  textarea,
  select {
    padding: 10px 12px;
    font-size: 16px;
    border-radius: var(--radius-xs);
    min-height: 0;
  }

  .exp-lead-form__privacy {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--compact-fs-label);
  }

  .exp-modal__head,
  .exp-modal__body,
  .exp-modal__foot {
    padding: var(--card-padding-mobile);
  }

  .exp-modal__foot--actions {
    padding-top: var(--spacing-sm);
  }

  .sx-form,
  .search-form--page .search-form {
    gap: var(--compact-gap);
  }

  .sx-option {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* ── Info rows, tags, chips ────────────────────────────────────── */
  .retreat-fact,
  .retreat-price .amount,
  .chip,
  .glass-chip {
    min-height: 0;
  }

  .exp-section-nav a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--compact-fs-label);
  }

  .exp-section-nav--hero {
    top: clamp(48px, 9vw, 64px);
  }

  /* ── Portal & similar sections ───────────────────────────────────── */
  .exp-portal {
    padding: var(--spacing-md) 0 clamp(24px, 6vw, 40px);
  }

  .exp-portal__head {
    gap: var(--compact-gap);
    margin-bottom: var(--compact-gap);
  }

  .exp-portal-card {
    min-height: 0;
  }

  /* ── Footer & community ──────────────────────────────────────────── */
  .site-footer {
    padding-block: var(--spacing-md);
  }

  .footer-community {
    padding-block: var(--spacing-md);
  }

  .community-buttons {
    gap: var(--spacing-sm);
  }

  .social-btn {
    min-height: var(--compact-button-height);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--compact-fs-label);
  }

  /* ── Search & filters ────────────────────────────────────────────── */
  .search-section {
    padding-block: var(--spacing-md);
  }

  .disc-hub-intents__grid {
    gap: var(--compact-gap);
  }

  /* ── Gift vouchers ───────────────────────────────────────────────── */
  .gv-amount-chips,
  .gv-designs {
    gap: var(--spacing-sm);
  }

  .gv-thankyou__actions .btn {
    min-height: var(--compact-button-height);
  }

  .exp-bottombar {
    padding: 0;
  }

  .exp-bottombar .btn,
  .exp-bottombar .btn-primary {
    min-height: 0;
  }

  .exp-bottombar__inner {
    gap: clamp(10px, 3vw, 14px);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px clamp(18px, 5vw, 24px) 18px;
    box-sizing: border-box;
  }

  .exp-bottombar__price {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
    align-self: center;
    margin: 0;
    margin-inline-start: clamp(6px, 2vw, 10px);
    padding: 0;
    padding-inline-end: 4px;
  }

  .exp-bottombar__price strong {
    font-size: 0.92rem;
    line-height: 1.15;
  }

  .exp-bottombar__price small {
    font-size: 0.74rem;
    line-height: 1.1;
    margin: 0;
  }

  .exp-bottombar__cta.btn,
  .exp-bottombar__cta.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    margin-inline-end: clamp(6px, 2vw, 10px) !important;
    font-size: 0.76rem !important;
    font-weight: 700;
    line-height: 1 !important;
    gap: 4px;
    flex: 0 1 auto;
    max-width: min(56%, 210px);
    white-space: nowrap;
    box-sizing: border-box;
    transform: none;
  }

  .retreat-fact {
    gap: var(--spacing-sm);
    font-size: var(--compact-fs-label);
  }

  .retreat-fact__icon {
    width: 17px;
    height: 17px;
  }

  .retreat-footer {
    padding-top: var(--spacing-sm);
  }

  .bz-voucher,
  .bz-deals__cards .retreat-card {
    min-height: 0;
  }

  .site-search-modal__panel {
    padding: var(--card-padding-mobile);
  }

  .exp-booking__rating svg,
  .retreat-rating svg,
  .retreat-fact__icon svg {
    width: var(--compact-icon-sm);
    height: var(--compact-icon-sm);
  }

  body.page-experience.bz-pilot-layout {
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }

  /* ── HERO EXCLUSIONS — keep reference density unchanged ──────────── */
  .hero.hero--v2 .hero-cta,
  .hero.hero--v2 .hero-cta__primary,
  .hero.hero--v2 .hero-cta__ghost {
    min-height: revert;
    padding: revert;
    font-size: revert;
  }

  /* Homepage hero — שחזור עיצוב מובייל (אחרי revert של compact) */
  .hero--v2 .hero-content > .hero-cta {
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .hero.hero--v2 .hero-cta__primary {
    flex: 0 1 auto;
    min-height: 42px !important;
    padding: 10px clamp(18px, 5vw, 26px) !important;
    font-size: 0.8rem !important;
    line-height: 1.25;
    white-space: nowrap;
  }

  .hero.hero--v2 .hero-save {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    min-height: 42px !important;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
  }

  .hero.hero--v2 .hero-save svg {
    width: 15px;
    height: 15px;
  }

  .exp-event-hero__card .exp-event-cta,
  .exp-event-hero__card .exp-event-promo__btn,
  .exp-event-hero__card .btn {
    min-height: revert;
    padding: revert;
    font-size: revert;
  }

  /* Experience hero — שמירת padding אחרי revert (לא דחוס) */
  .page-experience .exp-event-hero__card .exp-event-cta {
    box-sizing: border-box;
    min-height: 38px !important;
    padding: 10px clamp(16px, 4.4vw, 24px) !important;
    border-radius: 10px;
    gap: 6px;
    line-height: 1.35;
    font-size: 0.62rem !important;
  }

  .page-experience .exp-event-hero__card .exp-event-cta--primary {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 800;
    white-space: nowrap;
  }

  .page-experience .exp-event-hero__card .exp-event-cta--save {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    min-height: 38px !important;
    padding: 0 !important;
  }

  .page-experience .exp-event-hero__card .exp-event-cta svg {
    width: 11px;
    height: 11px;
  }

  /* Experience hero — כפתור יצירת קשר: padding גדול יותר, טקסט בגודל קבוע */
  .page-experience .exp-event-hero__card .exp-event-promo__btn {
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 0.62rem !important;
    line-height: 1.2;
    margin-inline-start: 4px;
  }
}

/* Experience hero — symmetric width expansion on phones */
@media (max-width: 768px) {
  .page-experience {
    --exp-hero-outer-pad: clamp(5px, 1.4vw, 8px);
  }
}

/* Extra-tight phones — inherit compact tokens, nudge page pad */
@media (max-width: 414px) {
  :root {
    --page-pad: 10px;
    --bz-pad-x: 10px;
    --card-padding-mobile: 10px;
    --compact-gap: 8px;
  }
}

/* סרגל רכישה תחתון — מרכוז אנכי + שטח לבן */
@media (max-width: 959px) {
  .exp-bottombar .btn,
  .exp-bottombar .btn-primary {
    min-height: 0 !important;
    margin: 0 !important;
    padding-block: 0 !important;
    vertical-align: middle;
  }

  .exp-bottombar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px clamp(18px, 5vw, 24px) 18px !important;
    box-sizing: border-box;
  }

  .exp-bottombar__price {
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }

  .exp-bottombar__cta.btn,
  .exp-bottombar__cta.btn-primary {
    height: 32px !important;
    min-height: 0 !important;
    max-height: 32px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    align-self: center !important;
  }
}