/**
 * REATS · Responsive Audit Fixes (2026-06)
 * Cross-cutting layout, typography, touch targets, and breakpoint harmonization.
 * Loaded last on public, account, admin, and supplier stacks.
 */

/* ── Foundation: prevent horizontal scroll & overflow clipping ───────────── */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(img:not(.reats-cover__img):not(.exp-gallery-fill):not([width]):not([height])),
:where(video),
:where(svg),
:where(canvas),
:where(iframe) {
  max-width: 100%;
  height: auto;
}

/* תמונות גלריה — ממלאות את המסגרת (עוקף height:auto הגלובלי) */
.exp-gallery-fill,
.exp-hero-aside-gallery__cell img,
.exp-hg__cell img,
.exp-gallery__item img,
.post-gallery-item img,
.exp-event-hero__media img,
.exp-event-hero__mini-cell img {
  position: absolute !important;
  inset: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.reats-cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.reats-cover__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Long URLs, emails, Hebrew/English mixed copy */
.prose,
.exp-section__body,
.hub-editorial__wrap,
.hub-editorial__p,
.hub-editorial__list li,
.category-content,
.bz-inner-content,
.magazine-article__body,
.review-text,
.acc-card__body,
.admin-prose,
table td,
table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* iOS: prevent zoom on focus (inputs < 16px trigger zoom) */
@media (max-width: 1023px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* Flex/grid children must shrink on narrow screens */
.container,
.header-inner,
.footer-inner,
.bz-main,
.bz-main__content,
.exp-grid,
.exp-event-hero__grid,
.search-form,
.sx-form,
.retreat-card,
.card,
.sup-main,
.admin-main {
  min-width: 0;
}

/* ── Touch targets (WCAG 2.5.5 advisory 44×44) ─────────────────────────── */
@media (pointer: coarse) {
  .icon-btn,
  .menu-toggle,
  .sx-picker__clear,
  .exp-portal__nav,
  .carousel__nav,
  .bz-rowhead__all,
  .footer-legal a {
    min-width: 44px;
    min-height: 44px;
  }

  .reats-bottomnav__item,
  .bz-mobile-tabs__btn,
  .sup-tabbar__item {
    min-height: 48px;
  }
}

/* Bottom navigation coordination — reats-bottomnav is primary on mobile */
@media (max-width: 1099px) {
  .bz-mobile-tabs {
    display: none !important;
  }

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

/* Experience purchase bar stacks above mobile bottom nav */
@media (max-width: 959px) {
  body.page-experience .exp-bottombar {
    z-index: 8100;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

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

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

  body.page-experience .reats-a11y,
  body.page-experience .reats-admin-edit-fab {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 959px) and (min-width: 1100px) {
  body.page-experience .exp-bottombar {
    bottom: 0;
  }
}

/* Non-buyz public pages: bottom nav padding handled in header.css */

/* ── Tablet header compaction (981–1099px) ─────────────────────────────── */
@media (min-width: 981px) and (max-width: 1099px) {
  .site-header--v2 .main-nav a {
    padding: 7px 10px !important;
    font-size: 0.82rem !important;
  }

  .site-header--v2 .header-cta-group {
    padding-inline-start: 4px;
    gap: 4px;
  }

  .site-header--v2 .btn-header-add,
  .site-header--v2 .header-cta-group .btn-primary {
    padding-inline: 12px;
    font-size: 0.84rem;
  }

  .site-header--v2 .header-user-chip__label {
    max-width: min(28vw, 120px);
  }

  .site-header--v2 .logo--image .site-logo__img {
    max-width: min(160px, 36vw);
  }
}

/* ── Mobile phones: 320–414px ──────────────────────────────────────────── */
@media (max-width: 414px) {
  :root {
    --page-pad: clamp(12px, 3.5vw, 16px);
  }

  .site-search-modal {
    padding: 12px var(--page-pad);
    align-items: flex-end;
  }

  .site-search-modal__panel {
    width: 100%;
    max-height: min(92dvh, 640px);
    margin-top: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .sx-when-presets {
    grid-template-columns: 1fr;
  }

  .sx-chip {
    max-width: calc(100% - 8px);
  }

  .exp-bottombar__inner {
    gap: 8px;
  }

  .exp-bottombar__cta {
    padding-inline: 14px;
    font-size: 0.9rem;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .community-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
  }

  .social-btn {
    min-height: 48px;
    padding: 10px 12px;
    font-size: clamp(0.76rem, 3.2vw, 0.84rem);
  }
}

@media (max-width: 360px) {
  .reats-bottomnav__label {
    font-size: 0.62rem;
  }

  .reats-bottomnav__icon {
    width: 22px;
    height: 22px;
  }

  .bz-mobile-tabs__btn {
    font-size: 0.72rem;
    padding-inline: 2px;
  }
}

/* ── Tablet: 768–1024px ────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .bz-pilot-grid.retreats-grid,
  .bz-listing-hub-grid .bz-pilot-grid.retreats-grid {
    gap: clamp(10px, 1.8vw, 14px);
  }

  .disc-hub-intents__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exp-portal-card {
    flex: 0 0 min(280px, 78vw);
  }
}

/* ── Laptop: 1366px ────────────────────────────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1400px) {
  :root {
    --container: 1200px;
  }

  body.bz-pilot-layout {
    --bz-nav-w: clamp(190px, 13vw, 230px);
    --bz-widget-w: clamp(190px, 14vw, 250px);
  }
}

/* ── Wide screens: 1920px+ ─────────────────────────────────────────────── */
@media (min-width: 1920px) {
  :root {
    --container: 100%;
  }
}

/* ── Search & filters ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .search-form--page .search-form,
  .search-page-form-block .sx-form {
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .sx-dropdown--when {
    min-width: 0;
    inset-inline: 0;
    max-width: 100%;
  }

  .sx-option {
    padding: 12px 10px;
  }
}

/* ── Modals & drawers ──────────────────────────────────────────────────── */
.auth-hub__panel,
.site-search-modal__panel {
  overscroll-behavior: contain;
}

@media (max-height: 640px) {
  .auth-hub__panel,
  .site-search-modal__panel {
    max-height: 96dvh;
    padding-top: 40px;
  }
}

/* ── Card rows → horizontal carousel (mobile/tablet, homepage portal rows only) ── */
@media (max-width: 899px) {
  .bz-block--cards:not(.bz-listing-hub-grid) .retreats-grid.bz-pilot-grid:not(.bz-portal-carousel__track):not(.bz-deals__cards) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bz-pad-x, 14px);
    gap: 12px;
    padding-bottom: 6px;
    margin-inline: calc(-1 * var(--bz-pad-x, 14px));
    padding-inline: var(--bz-pad-x, 14px);
    scrollbar-width: none;
    grid-template-columns: unset !important;
  }

  .bz-block--cards:not(.bz-listing-hub-grid) .retreats-grid.bz-pilot-grid:not(.bz-portal-carousel__track):not(.bz-deals__cards)::-webkit-scrollbar {
    display: none;
  }

  .bz-block--cards:not(.bz-listing-hub-grid) .retreats-grid.bz-pilot-grid:not(.bz-portal-carousel__track):not(.bz-deals__cards) .retreat-card {
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: start;
    height: auto;
    min-height: 100%;
  }

  .bz-block--cards:not(.bz-listing-hub-grid) .retreats-grid.bz-pilot-grid:not(.bz-portal-carousel__track):not(.bz-deals__cards) .retreat-body {
    min-height: 148px;
  }

  .bz-listing-hub-grid > .retreats-grid.bz-pilot-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    gap: clamp(12px, 3vw, 16px);
  }

  .bz-listing-hub-grid > .retreats-grid.bz-pilot-grid .retreat-card {
    flex: unset;
    width: 100%;
    max-width: 100%;
  }

  .bz-listing-hub-grid:not(.is-expanded) > .retreats-grid .retreat-card:nth-child(n + 7) {
    display: none;
  }

  .bz-block--cards {
    margin-bottom: clamp(16px, 3.5vw, 24px);
  }
}

/* ── Card grid: auto-fit on tablet/desktop (carousel only ≤899px, homepage rows) ── */
@media (min-width: 900px) {
  .bz-block--cards:not(.bz-listing-hub-grid) .retreats-grid.bz-pilot-grid:not(.bz-deals__cards),
  .bz-listing-hub-grid > .retreats-grid.bz-pilot-grid:not(.bz-deals__cards) {
    display: grid;
    width: 100%;
    max-width: 100%;
    flex-wrap: unset;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.retreats-grid,
.bz-pilot-grid.retreats-grid {
  width: 100%;
  align-items: stretch;
}

.retreat-card {
  height: 100%;
}

.retreat-media .reats-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.retreat-media-link {
  display: block;
}

.retreat-save {
  min-width: 44px;
  min-height: 44px;
}

.retreat-body {
  gap: clamp(8px, 2vw, 10px);
}

.retreat-footer__bar {
  min-height: 44px;
  align-items: center;
}

/* כרטיסי חוויות — פוטר רוחב מלא */
@supports not (container-type: inline-size) {
  @media (max-width: 400px) {
    .retreat-host__name {
      font-size: 0.8rem;
    }

    .retreat-price .amount {
      font-size: 0.9rem;
      padding: 5px 10px;
    }
  }
}

/* ── Typography scale ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  h1, .ha-title, .bz-inner-hero__title, .exp-event-hero__title {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2;
  }

  h2, .bz-block__head h2, .exp-section h2 {
    font-size: clamp(1.15rem, 4.5vw, 1.45rem) !important;
    line-height: 1.25;
  }

  h3, .ha-card__title, .retreat-title {
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    line-height: 1.3;
  }

  .ha-lead,
  .bz-block__filter,
  .exp-prose,
  .ha-prose p {
    font-size: clamp(0.92rem, 2.8vw, 1rem);
    line-height: 1.6;
  }
}

/* ── Header: prevent nav line breaks on desktop ────────────────────────── */
@media (min-width: 981px) {
  .site-header--v2 .main-nav a,
  .site-header-link,
  .btn-header-add {
    white-space: nowrap;
  }

  .site-header--v2 .header-inner {
    flex-wrap: nowrap;
  }
}

@media (max-width: 980px) {
  .site-header--v2 .header-bar {
    min-width: 0;
    overflow: hidden;
  }

  .site-header--v2 .main-nav.open {
    max-height: min(80dvh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Footer mobile optimization ────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-footer {
    padding-top: clamp(28px, 6vw, 40px);
  }

  .footer-inner {
    gap: clamp(24px, 5vw, 32px);
  }

  .footer-brand p {
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 42ch;
  }

  .footer-links h5 {
    margin-bottom: 10px;
    font-size: clamp(0.72rem, 3.2vw, 0.82rem);
    line-height: 1.25;
    letter-spacing: 0.02em;
  }

  .footer-links ul {
    gap: 4px;
  }

  .footer-links a {
    display: block;
    min-height: 0;
    padding-block: 1px;
    font-size: clamp(0.68rem, 2.9vw, 0.8rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* מובייל — שלוש עמודות בשורה; מגבילים קישורים לגובה סביר */
  .footer-links__col--info li:nth-child(n + 8),
  .footer-links__col--workshops li:nth-child(n + 7),
  .footer-links__col--retreats li:nth-child(n + 7) {
    display: none;
  }

  /* תנאי שימוש · פרטיות · נגישות — כבר בעמודת «מידע חיוני» */
  .footer-legal {
    display: none;
  }
}

/* ── Forms: touch-friendly ─────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-ghost,
.ha-btn,
.sx-submit,
.auth-hub-submit,
.sup-btn,
.sup-field input,
.sup-field select,
.sup-field textarea {
  min-height: 44px;
}

/* ── Blog / magazine cards ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .magazine-grid,
  .magazine-list {
    gap: clamp(12px, 3vw, 16px);
  }

  .magazine-item,
  .magazine-feature {
    min-width: 0;
  }
}

/* ── Supplier registration ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .sup-auth-card,
  .sup-auth-card-wide {
    margin-inline: auto;
    width: 100%;
  }

  .sup-row-2 {
    grid-template-columns: 1fr !important;
  }

  .sup-actions-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .sup-actions-bar .sup-btn {
    width: 100%;
  }
}

/* ── Design consistency tokens (mobile) ────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
  }

  .btn,
  .btn-primary,
  .ha-btn,
  .bz-rowhead__all {
    border-radius: 999px;
  }

  .glass,
  .search-card,
  .retreat-card,
  .exp-section,
  .ha-card {
    border-radius: var(--radius-md);
  }
}

/* ── Cards: workshops & retreats (mobile titles) ───────────────────────── */
@media (max-width: 580px) {
  .retreat-card .retreat-title,
  .bz-pilot-grid .retreat-card .retreat-title {
    font-size: clamp(0.88rem, 3.8vw, 0.96rem);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .retreat-card .retreat-meta,
  .retreat-rating {
    font-size: 0.78rem;
  }
}

/* ── Forms & file picker ───────────────────────────────────────────────── */
@media (max-width: 520px) {
  .reats-file__ui {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .reats-file__btn {
    width: 100%;
    justify-content: center;
  }

  .reats-file__name {
    text-align: center;
  }
}

/* ── Admin front edit buttons (tablet) ─────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .exp-event-admin-edit {
    min-height: 44px;
    font-size: 0.84rem;
    padding: 8px 14px;
  }

  .magazine-admin-edit__btn {
    top: 8px;
    inset-inline-start: 8px;
  }
}

/* ── Admin & supplier tables ───────────────────────────────────────────── */
.admin-table-scroll,
.sup-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 720px) {
  .admin-table,
  .sup-table {
    min-width: 520px;
  }
}

/* ── Account area: stat row on very small phones ─────────────────────────── */
@media (max-width: 380px) {
  .acc-stat-row {
    grid-template-columns: 1fr;
  }

  .acc-topbar-out {
    padding: 0 10px;
    font-size: 0.82rem;
  }
}

/* ── Gift vouchers ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .gv-amount-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .gv-designs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .gv-thankyou__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gv-thankyou__actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ── Performance: reduce motion of heavy decorative layers on mobile ───── */
@media (max-width: 768px) {
  .ambient .orb {
    filter: blur(60px);
    opacity: 0.55;
  }

  .ambient .grain {
    opacity: 0.04;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient .orb,
  .ambient .grain {
    display: none;
  }
}