/**
 * Főoldal — mobil + tablet (≤1024px)
 * Mindig utolsóként töltődik: animációk/árnyékok stabilizálása, app-shell szélesség, overflow.
 */

@media (max-width: 1024px) {
  html:has(body.home-page) {
    overflow-x: clip;
    scroll-behavior: auto !important;
  }

  body.home-page {
    overflow-x: clip;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  /* Fő sáv: teljes név szélesség, grid minmax(0) bug ellen */
  body.home-page main.home-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* App-shell-lel egyező, erősített .container (home-shell / styles felülírása) */
  body.home-page main.home-main .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  body.home-page .hero-grid,
  body.home-page .about-box,
  body.home-page .home-reviews-layout,
  body.home-page .trust-pillars {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Modulok: egy oszlop tableten is (olvasható, nem széteső rács) */
  body.home-page .cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Hero előnézet: képernyőhöz igazítva */
  body.home-page .visual-card.home-preview-shell {
    max-width: min(100%, 520px);
    width: 100%;
    margin-inline: auto;
    min-width: 0;
  }

  body.home-page #heroCarousel.screen-carousel,
  body.home-page .screen-slides {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ——— Animációk kikapcsolása (toast kivétel) ——— */
  body.home-page main.home-main *:not(.pipsy-toast):not(.pipsy-toast *),
  body.home-page section.hero *:not(.pipsy-toast):not(.pipsy-toast *),
  body.home-page .site-footer * {
    animation: none !important;
  }

  /*
   * Animáció nélkül a sok helyen (home-premium / home-sections) opacity:0, clip-path,
   * scaleX(0) stb. csak keyframe-mel kerül „végállapotba”. Itt kényszerítjük a láthatóságot.
   */
  body.home-page .supported-platform-card {
    opacity: 1 !important;
    transform: none !important;
  }

  body.home-page .screen-slide.is-active .sj-sparkline,
  body.home-page .screen-slide.is-active .sj-spark-area {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
  }

  body.home-page .screen-slide.is-active .sj-spark-line {
    stroke-dashoffset: 0 !important;
  }

  body.home-page .screen-slide.is-active .sj-donut-arc {
    stroke-dasharray: 71.6 35.2 !important;
  }

  body.home-page .screen-slide.is-active .sj-context-meter span {
    transform: scaleX(1) !important;
  }

  body.home-page .screen-slide.is-active .sj-context-days span {
    transform: scaleY(1) !important;
    opacity: 1 !important;
  }

  body.home-page .screen-slide.is-active .sa-session-fill {
    transform: scaleX(1) !important;
  }

  body.home-page .screen-slide.is-active .sa-heat-cell {
    opacity: 1 !important;
    transform: none !important;
  }

  body.home-page .screen-slide.is-active .sa-dist span {
    transform: scaleX(1) !important;
  }

  body.home-page .screen-slide.is-active .sp-gauge-arc {
    stroke-dasharray: 123.1 52.8 !important;
  }

  body.home-page .screen-slide.is-active.theme-journal .insight-progress-card__fill,
  body.home-page .screen-slide.is-active.theme-prop .insight-prop-bar__fill,
  body.home-page .screen-slide.is-active.theme-discipline .insight-discipline-bar__fill {
    transform: scaleX(1) !important;
  }

  body.home-page .btn::after,
  body.home-page .btn::before {
    animation: none !important;
    transition: none !important;
  }

  body.home-page .stat-premium,
  body.home-page .cards .card,
  body.home-page .trust-pillar,
  body.home-page .home-trial-card,
  body.home-page .home-review-quote,
  body.home-page .home-reviews-hero,
  body.home-page .about-main,
  body.home-page .about-side,
  body.home-page .contact-box,
  body.home-page .supported-platform-card,
  body.home-page .visual-card.home-preview-shell {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  body.home-page .home-hero-badge,
  body.home-page .stat-premium,
  body.home-page .btn-secondary,
  body.home-page .nav-dropdown-panel a {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.home-page .site-header {
    backdrop-filter: blur(10px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
  }

  body.home-page .pipsy-toast-host {
    width: min(24rem, calc(100% - 1.5rem)) !important;
    max-width: calc(100% - 1.5rem);
    box-sizing: border-box;
  }

  body.home-page main.home-main section[id] {
    scroll-margin-top: clamp(4rem, 11vw, 5.5rem);
  }
}

/* Apró telefon: további szűkítés a toastnak */
@media (max-width: 480px) {
  body.home-page .pipsy-toast-host {
    width: calc(100% - 1.5rem) !important;
    right: 0.75rem !important;
  }
}