/* Polibeli — phone app shell for the public site (below 720px).
   A bottom app bar with the places that matter, a "Menü" sheet for the rest, a slim top bar,
   swipeable card rows instead of long stacks, and a footer reduced to the essentials.
   Above 720px nothing here applies: the tablet and laptop site is unchanged. */

.app-tabs, .app-scrim { display: none; }
.site-nav__more, .site-header__cta, .app-home { display: none; }

@media (max-width: 719.98px) {
  :root { --bar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); --header-h: 56px; --section: 40px; --gutter: 18px; }
  html.js body { padding-bottom: calc(var(--bar-h) + var(--safe-b)); }
  html.menu-open { overflow: hidden; }
  html { scroll-padding-top: calc(var(--header-h) + 8px); }
  body { overscroll-behavior-y: none; }

  /* ---- Top bar: brand and the one conversion action ---- */
  .site-header__inner { min-height: var(--header-h); gap: 10px; }
  .brand { padding: 4px 0; }
  .brand__logo { height: 24px; }
  html.js .site-header .nav-toggle { display: none; }
  html.js .site-header__cta { display: inline-flex; margin-left: auto; min-height: 38px; padding: .5em .95em; font-size: .88rem; }
  html.is-app .site-header { padding-top: env(safe-area-inset-top, 0px); }

  /* ---- Bottom bar ---- */
  html.js .app-tabs { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--bar-h) + var(--safe-b)); padding: 0 6px var(--safe-b); background: rgba(251, 248, 243, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -22px rgba(36, 27, 25, .55); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
  .app-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 6px 2px 4px; border: 0; background: none; color: var(--ink-3); font: 600 .69rem/1.1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .app-tab .ico { position: relative; z-index: 1; width: 24px; height: 24px; transition: transform .2s var(--ease); }
  .app-tab span { position: relative; z-index: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tab::before { content: ''; position: absolute; top: 5px; left: 50%; width: 54px; height: 30px; border-radius: 99px; background: var(--oxblood-50); opacity: 0; transform: translateX(-50%) scale(.6); transition: opacity .2s, transform .25s var(--ease); }
  .app-tab:active .ico { transform: scale(.88); }
  .app-tab[aria-current='page'], .app-tab[aria-expanded='true'] { color: var(--oxblood); }
  .app-tab[aria-current='page']::before, .app-tab[aria-expanded='true']::before { opacity: 1; transform: translateX(-50%) scale(1); }
  .app-tab:focus-visible { outline-offset: -3px; }

  /* ---- Menü sheet: the existing navigation, lifted above the bar ---- */
  html.js .app-scrim { display: block; position: fixed; z-index: 45; inset: 0; background: rgba(63, 12, 21, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  html.js.menu-open .app-scrim { opacity: 1; pointer-events: auto; }
  html.js .site-nav { position: fixed; z-index: 50; left: 0; right: 0; top: auto; bottom: calc(var(--bar-h) + var(--safe-b)); display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: min(80dvh, calc(100dvh - var(--bar-h) - var(--safe-b) - 24px)); overflow-y: auto; overscroll-behavior: contain; padding: 22px var(--gutter) 18px; background: var(--paper); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -24px 60px -28px rgba(63, 12, 21, .6); }
  html.js .site-header.is-open .site-nav { display: flex; animation: sheet-up .3s var(--ease) both; }
  html.js .site-nav::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--line-2); }
  html.js .site-nav__links a { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; font: 600 1.1rem/1.2 var(--serif-display); color: var(--ink); border-bottom: 1px solid var(--line); background: none; }
  html.js .site-nav__links a[aria-current='page'] { color: var(--oxblood); }
  html.js .site-nav__links a::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-top: 1.6px solid var(--line-2); border-right: 1.6px solid var(--line-2); transform: rotate(45deg); flex: none; }
  html.js .site-nav__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; }
  html.js .site-nav__tools .deck-launch { grid-column: 1 / -1; justify-content: center; min-height: 44px; border: 1px solid var(--line-2); border-radius: 3px; }
  html.js .site-nav__tools .lang-switch { justify-content: center; min-height: 44px; border: 1px solid var(--line-2); border-radius: 3px; }
  html.js .site-nav__tools .btn { min-height: 44px; }
  html.js .site-nav__more { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  html.js .site-nav__more a { padding: 6px 0; color: var(--ink-2); font-size: .88rem; text-decoration: none; }
  html.js .site-nav__more a:first-child { color: var(--oxblood); font-weight: 600; }
  .toast { bottom: calc(var(--bar-h) + var(--safe-b) + 12px); }

  /* ---- Less scrolling: sections tighter ---- */
  .hero { padding: 14px 0 36px; }
  .hero__cta .btn { min-height: 48px; }
  .section-head { margin-bottom: 22px; }
  .page-hero { padding: 26px 0 26px; }
  .page-hero--compact { padding-bottom: 22px; }
  .page-hero--photo .page-hero__inner { gap: 22px; }
  .page-hero--photo .photo, .photo--band, .problem__side .photo { aspect-ratio: 16 / 9; }
  .photo--band { margin-bottom: 26px; }
  .problem__side .photo { margin-bottom: 20px; }
  .cta-band__inner { gap: 20px; padding-block: 40px; }
  .cta-band p:not(.eyebrow) { margin-bottom: 1.2em; }
  .faq-page, .legal, .pilot, .login-hub { padding-top: 26px; }

  /* ---- Swipeable card rows (the next card peeks in) ---- */
  .steps__list, .roles__grid, .modes__grid, .control__grid { position: relative; display: flex; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .steps__list::-webkit-scrollbar, .roles__grid::-webkit-scrollbar, .modes__grid::-webkit-scrollbar, .control__grid::-webkit-scrollbar { display: none; }
  .steps__list > *, .roles__grid > *, .modes__grid > *, .control__grid > * { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .step { padding: 22px 18px 24px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
  .step__n { left: auto; right: 16px; top: 16px; }
  .step__icon { width: 64px; height: 64px; margin-bottom: 12px; }
  .step__icon .ico { width: 28px; height: 28px; }
  .step h3 { font-size: 1.35rem; }
  .role { gap: 16px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
  .control__grid { border-top: 0; }
  .principle { padding: 54px 18px 22px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 6px; }
  .principle__n { left: 18px; top: 14px; }
  .modes__grid > .mode { padding-bottom: 6px; }
  .demo-controls { margin-top: 6px; }

  /* ---- Home: product visuals as a swipe row, trust points side by side ---- */
  .evidence-figure { display: flex; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; position: relative; overscroll-behavior-x: contain; }
  .evidence-figure::-webkit-scrollbar { display: none; }
  .evidence-figure > * { flex: 0 0 90%; min-width: 0; scroll-snap-align: start; }
  .room__visual { display: none; }

  /* ---- Érettségizőknek: the card stacks become swipe rows too ---- */
  :root .m-section { padding: 40px 0; }
  :root .m-head { margin-bottom: 22px; }
  :root .m-why__grid, :root .m-steps, :root .m-topics__grid, :root .m-parents__grid { position: relative; display: flex; gap: 16px; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  :root .m-why__grid::-webkit-scrollbar, :root .m-steps::-webkit-scrollbar, :root .m-topics__grid::-webkit-scrollbar, :root .m-parents__grid::-webkit-scrollbar { display: none; }
  :root .m-why__grid > *, :root .m-steps > *, :root .m-topics__grid > *, :root .m-parents__grid > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }

  /* ---- Installed app: quick ways in above the product story ---- */
  html.is-app .app-home { display: block; padding: 18px 0 6px; background: var(--paper); }
  .app-home__eyebrow { margin: 0 0 6px; font: 600 .72rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-700); }
  .app-home__title { margin: 0 0 14px; font: 600 1.75rem/1.08 var(--serif-display); letter-spacing: -.017em; color: var(--oxblood); }
  .app-home__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .app-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 14px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 rgba(36, 27, 25, .04); -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease), box-shadow .15s; }
  .app-card:active { transform: scale(.98); }
  .app-card .ico { width: 28px; height: 28px; color: var(--oxblood); stroke-width: 1.5; margin-bottom: 4px; }
  .app-card b { font: 600 1.08rem/1.2 var(--serif-display); }
  .app-card span { font-size: .82rem; line-height: 1.35; color: var(--ink-3); }
  .app-card--primary { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 18px; background: var(--oxblood); border-color: var(--oxblood); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 14px 26px -16px rgba(123, 29, 42, .7); }
  .app-card--primary .ico { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; color: #F1D9A8; }
  .app-card--primary b { font-size: 1.3rem; }
  .app-card--primary span { color: #F3DDD8; font-size: .9rem; }
  .app-card:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 14px; }
  .app-card:nth-child(4) .ico { grid-row: 1 / 3; margin: 0; }
  html.menu-open .app-tab[aria-current='page']:not([aria-expanded]) { color: var(--ink-3); }
  html.menu-open .app-tab[aria-current='page']:not([aria-expanded])::before { opacity: 0; }

  /* ---- Footer: the long link columns live in the Menü sheet ---- */
  html.js .site-footer__col { display: none; }
  .site-footer { padding: 30px 0 22px; }
  .site-footer__grid { gap: 0; }
  .site-footer__base { margin-top: 24px; padding-top: 16px; }
}
@keyframes sheet-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-tab::before, .app-tab .ico, .app-scrim { transition: none; } html.js.menu-open .site-nav { animation: none; } }
@media print { .app-tabs, .app-scrim, .site-header__cta { display: none !important; } }