/* nexus-live — mobilný showcase (skupina D, 2026-10-11)
 * Bloky: nx_device_media (rámčeky so screenshotmi), channels (FB/IG/YouTube/TikTok/NexusLive/záznam),
 * screen_story (obrazovky v pohybe), matrix (porovnanie platforiem), contact_form.
 * Desktop >=1024 px sa nemení: všetko je v @media (max-width:1023px) alebo užšie.
 * Spec: docs/landing-mobile-20261011/SPEC.md §4.7, §4.8, §4.10, §4.17, §7. */

/* ================= ≤1023: rámčeky, kanály, matica, formulár ================= */
@media (max-width:1023px){

  /* clamp textu (globálne ho definuje A; tu poistka len pre bloky D) */
  :is(.nx-chan-copy,.nx-story-step) .nx-m-clamp:not(.is-open){display:-webkit-box;-webkit-line-clamp:var(--m-lines,3);-webkit-box-orient:vertical;overflow:hidden}

  /* ---------- rámček zariadenia (nx_device_media) ---------- */
  .nx-dev-screen{background:linear-gradient(90deg,var(--m-tint,#f4f3fa) 0,#fff 50%,var(--m-tint,#f4f3fa) 100%);background-size:200% 100%}
  .nx-dev-screen:has(img.nx-shot:not(.is-loaded)){animation:nxmSkel 1.4s linear infinite}
  .nx-dev.-phone .nx-dev-screen{background:#111}
  .nx-dev.-browser{border-radius:var(--m-r,16px);box-shadow:var(--m-shadow-l,0 18px 40px -18px rgba(22,22,29,.28))}
  .nx-dev-bar{padding:8px 12px;gap:5px}
  .nx-dev-bar i{width:8px;height:8px}
  .nx-dev-bar span{font-size:11px;padding:2px 10px}
  /* screenshot celý, bez pohybu (pan na mobile = nečitateľné) */
  .nx-dev .nx-shot.-pan,.nx-dev .nx-shot.-zoom{animation:none}
  .nx-dev-screen .nx-shot.-pan{position:static;height:100%;min-height:0}
  .nx-dev.-browser .nx-shot,.nx-dev.-bare .nx-shot{object-fit:contain;object-position:top center;cursor:zoom-in}
  .nx-shot-cap{font-size:13px;padding:8px 12px}
  .nx-dev.-phone{width:min(280px,74vw);padding:10px;border-radius:34px}
  .nx-dev.-phone .nx-dev-screen{border-radius:26px}

  /* ---------- channels: dlaždice kanálov (§4.10) ---------- */
  .nx-chan-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;border-bottom:0;padding-bottom:0;margin-bottom:var(--m-head-gap,20px)}
  .nx-chan-list .nx-tab{position:relative;flex-direction:column;justify-content:center;gap:6px;min-height:84px;padding:10px 6px;border-radius:var(--m-r,16px);background:#fff;border:1px solid var(--line);box-shadow:var(--m-shadow,0 1px 2px rgba(22,22,29,.05),0 8px 24px -12px rgba(22,22,29,.18));color:var(--text);font-size:12px;font-weight:700;line-height:1.2;text-align:center;white-space:normal}
  .nx-chan-list .nx-tab i{font-size:26px;line-height:1}
  .nx-chan-list .nx-tab.-nexuslive i{color:var(--red)}
  .nx-chan-list .nx-tab.-tiktok i{color:#111}
  .nx-chan-list .nx-tab.is-active{background:#fff;color:var(--ink,#16161d);border:2px solid var(--red);box-shadow:0 10px 26px -14px rgba(255,45,85,.55)}
  .nx-chan-list .nx-tab.is-active.-facebook i{color:#1877f2}.nx-chan-list .nx-tab.is-active.-instagram i{color:#e1306c}
  .nx-chan-list .nx-tab.is-active.-youtube i{color:#ff0000}.nx-chan-list .nx-tab.is-active.-eshop i{color:var(--violet)}
  .nx-chan-list .nx-tab.is-active.-replay i{color:var(--green)}.nx-chan-list .nx-tab.is-active.-nexuslive i{color:var(--red)}
  .nx-chan-list .nx-tab.is-active.-tiktok i{color:#111}
  .nx-chan-list .nx-tab.is-active::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;translate:-50% 0;rotate:45deg;background:#fff;border-right:2px solid var(--red);border-bottom:2px solid var(--red)}
  .nx-chan-row,.nx-chan-row.-wide{grid-template-columns:1fr;gap:var(--m-gap-l,24px);padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--m-r-xl,24px);box-shadow:var(--m-shadow,0 8px 24px -12px rgba(22,22,29,.18))}
  .nx-chan-copy h3{font-size:22px;line-height:1.2;margin-bottom:8px}
  .nx-chan-copy .nx-lead{font-size:var(--m-body,16px);line-height:1.55;color:var(--m-text-2,#3b3f4a)}
  .nx-chan-copy .nx-ways{margin:14px 0 4px;padding:12px;border-radius:14px}
  .nx-chan-copy .nx-ways ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:-12px;padding-inline:12px}
  .nx-chan-copy .nx-ways ul::-webkit-scrollbar{display:none}
  .nx-chan-copy .nx-ways li{flex:none;white-space:nowrap;font-size:13.5px;padding:7px 12px;scroll-snap-align:start}
  .nx-chan-copy .nx-actions{margin-top:14px}
  .nx-chan-media{display:flex;justify-content:center}
  .nx-chan-note{font-size:var(--m-small,13.5px);margin-top:14px}
  /* telefón FB/IG: nižší, plávajúce bubliny vo vnútri šírky */
  .nx-chp{width:min(280px,76vw);padding-bottom:40px}
  .nx-chp-phone{aspect-ratio:9/16;border-radius:34px;padding:10px}
  .nx-chp-msg{right:-6px;width:min(230px,86%)}
  .nx-chp-toast{left:-6px;top:96px;max-width:calc(100% + 6px)}
  /* e-shop prehrávač s košíkom */
  .nx-chs{width:100%}
  .nx-chs-cart .nx-chs-item+.nx-chs-item{display:none}

  /* ---------- matrix: karta na riadok, NexusShop vždy viditeľný (§4.8) ---------- */
  .nx-matrix-wrap{overflow:visible;border:0;background:none;box-shadow:none;border-radius:0;contain:none}
  table.nx-matrix,table.nx-matrix tbody{display:block;min-width:0;width:100%}
  table.nx-matrix thead{display:none}
  table.nx-matrix tbody{display:grid;gap:10px}
  table.nx-matrix tr{container-type:inline-size;display:grid;grid-template-columns:repeat(var(--nx-cols,6),max-content);gap:10px 6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--m-r-l,20px);box-shadow:var(--m-shadow,0 8px 24px -12px rgba(22,22,29,.18))}
  table.nx-matrix tr::-webkit-scrollbar{display:none}
  table.nx-matrix tbody th{grid-column:1/-1;position:sticky;left:0;width:100cqi;min-width:0;padding:0 0 2px;border:0;background:none;text-align:left;font-size:15px;font-weight:700;line-height:1.3;color:var(--text)}
  table.nx-matrix tbody th small{font-size:13px}
  table.nx-matrix td{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;min-height:38px;max-width:190px;padding:5px 10px 5px 12px;white-space:nowrap;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f6f6fa);text-align:center}
  table.nx-matrix td::before{content:attr(data-label);font-size:11.5px;font-weight:700;line-height:1.2;color:var(--muted)}
  table.nx-matrix td.-us{position:sticky;left:0;z-index:1;background:#e9f9f1;border-color:rgba(22,199,132,.45);box-shadow:8px 0 12px -8px rgba(22,22,29,.18)}
  table.nx-matrix td.-us::before{color:var(--red);font-weight:800}
  table.nx-matrix td span{font-size:12.5px;line-height:1.25}
  table.nx-matrix td .nx-yes,table.nx-matrix td .nx-no,table.nx-matrix td .nx-part{width:22px;height:22px;font-size:.7rem;flex:none}
  table.nx-matrix tbody tr:last-child th,table.nx-matrix tbody tr:last-child td{border-bottom:1px solid var(--line)}
  table.nx-matrix tbody tr:last-child th{border-bottom:0}
  table.nx-matrix tbody tr:last-child td.-us{border-color:rgba(22,199,132,.45)}
  .nx-matrix-legend{font-size:13px;line-height:1.7}

  /* ---------- kontaktný formulár (§4.17) ---------- */
  .nx-cf{grid-template-columns:1fr;gap:16px;margin-top:var(--m-head-gap,20px)}
  .nx-cf-form{padding:20px;border-radius:var(--m-r-l,20px);box-shadow:var(--m-shadow,0 8px 24px -12px rgba(22,22,29,.18))}
  .nx-cf-side{order:2;padding:20px;border-radius:var(--m-r-l,20px)}
  .nx-cf-side a{display:inline-flex;align-items:center;min-height:44px}
  .nx-cf-grid{grid-template-columns:1fr;gap:14px}
  .nx-cf-field label{font-size:14px;font-weight:600}
  .nx-cf-field input,.nx-cf-field select{height:52px;font-size:16px;border-radius:14px;padding:0 14px}
  .nx-cf-field textarea{font-size:16px;border-radius:14px;padding:12px 14px;min-height:132px}
  .nx-cf-consent{min-height:44px;align-items:center;margin:14px 0;font-size:14px;line-height:1.4}
  .nx-cf-consent input{width:22px;height:22px;flex:none;margin:0}
  .nx-cf-form .nx-btn{min-height:var(--m-btn-h,52px);font-size:17px;font-weight:700;border-radius:14px}
  .nx-cf-msg{font-size:var(--m-small,13.5px)}
}

/* ================= ≤960: obrazovky v pohybe = swipe karty (JS témy má mobil ≤960) ================= */
@media (max-width:960px){
  .nx-story{display:block}
  .nx-story-steps,.nx-shots-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--m-gutter,20px)*-1);padding:4px var(--m-gutter,20px) 18px;scroll-padding-inline:var(--m-gutter,20px)}
  .nx-story-steps::-webkit-scrollbar,.nx-shots-grid::-webkit-scrollbar{display:none}
  .nx-story-step,.nx-shot-card{flex:0 0 min(560px,calc(100vw - 2*var(--m-gutter,20px)));scroll-snap-align:start;display:flex;flex-direction:column;padding:0 0 18px;overflow:hidden;border-radius:var(--m-r-l,20px);background:#fff;border:1px solid var(--line);box-shadow:var(--m-shadow,0 8px 24px -12px rgba(22,22,29,.18));cursor:default}
  .nx-story-step.is-active{translate:0;border-color:var(--line);box-shadow:var(--m-shadow,0 8px 24px -12px rgba(22,22,29,.18))}
  .nx-story-step.is-active::before{display:none}
  /* obrazovka hore cez celú šírku karty, text pod ňou */
  .nx-story-inline{display:block;order:-1;margin:0 0 16px}
  .nx-story-inline .nx-dev.-browser,.nx-shot-card .nx-dev.-browser{border-radius:0;border:0;border-bottom:1px solid var(--line);box-shadow:none}
  .nx-story-inline .nx-dev.-phone{margin:16px auto 0}
  /* bez reálneho screenshotu by maketa zopakovala ten istý nadpis a odrážky ako text karty */
  .nx-story-inline .nx-dev.-mock{display:none}
  .nx-story-inline:has(.nx-dev.-mock){margin:0;padding-top:18px}
  .nx-story-step>small,.nx-story-step>h3,.nx-story-step>p,.nx-story-step>.nx-bullets,.nx-story-step>.nx-actions{margin-inline:18px}
  .nx-story-step>small{font-size:var(--m-eyebrow,12px);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
  .nx-story-step h3,.nx-shot-card h3{font-size:var(--m-h3,19px);line-height:1.25}
  .nx-story-step p,.nx-shot-card .nx-film-copy p{font-size:15px;line-height:1.5;color:var(--m-text-2,#3b3f4a);--m-lines:3}
  .nx-story-step .nx-actions{margin-top:auto;padding-top:10px}
  .nx-shot-card .nx-film-copy{padding:16px 18px 0}
  .nx-shot-card[data-tilt]{transform:none!important}
  .nx-film-card{flex-basis:calc(100vw - 2*var(--m-gutter,20px))}
  .nx-film-nav{display:none}
  .nx-screen_story .nx-actions.-center .nx-btn{width:100%;justify-content:center}
}

@media (max-width:389px){
  .nx-chan-list{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
  .nx-chan-list .nx-tab{min-height:76px;font-size:11.5px}
  .nx-chan-list .nx-tab i{font-size:22px}
}

/* ================= kolo 2 (2026-10-11): skrátenie home na mobile ================= */
.nx-mx-more{display:none}
@media (max-width:1023px){
  .nx-sec.nx-channels,.nx-sec.nx-screen_story,.nx-sec.nx-matrix{padding-block:var(--m-sec,52px)}

  /* channels: kompaktná mriežka dlaždíc 3+2 (prebíja sticky pás tabov z m-sections.css) */
  .nx-tabs-list.nx-chan-list{position:static!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;overflow:visible;margin:0 0 14px!important;padding:0!important;background:none;border-bottom:0;-webkit-mask-image:none;mask-image:none}
  .nx-chan-list .nx-tab{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:5px;height:auto!important;min-height:64px;padding:8px 4px!important;border-radius:var(--m-r,16px)!important;white-space:normal;font-size:12px;line-height:1.15}
  .nx-chan-list .nx-tab:nth-child(4):nth-last-child(2){grid-column:2/span 2}
  .nx-chan-list .nx-tab i{font-size:24px}
  .nx-chan-list .nx-tab.-facebook i{color:#1877f2}.nx-chan-list .nx-tab.-instagram i{color:#e1306c}
  .nx-chan-list .nx-tab.-youtube i{color:#ff0000}.nx-chan-list .nx-tab.-eshop i{color:var(--violet)}
  .nx-chan-list .nx-tab.-replay i{color:var(--green)}
  .nx-chan-list .nx-tab.is-active{background:#fff!important;color:var(--ink,#16161d)!important;border:2px solid var(--red)!important}
  .nx-chan-row,.nx-chan-row.-wide{padding:16px;gap:16px}
  .nx-chan-copy h3{font-size:20px;margin-bottom:6px}
  .nx-chan-copy .nx-lead{--m-lines:2}
  /* spôsoby objednania + odrážky sa ukážu až po rozbalení textu (zostávajú v DOM) */
  .nx-chan-copy:has(> .nx-m-more.-clamp:not([aria-expanded="true"])) > :is(.nx-ways,.nx-bullets,.nx-m-more.-n){display:none}
  .nx-chan-copy .nx-actions{margin-top:10px}
  .nx-chp{width:min(232px,62vw);padding-bottom:24px}
  .nx-chp-phone{aspect-ratio:9/15}

  /* matica: prvých 6 riadkov, zvyšok cez „+N“ */
  table.nx-matrix tbody[data-m-collapse]:not(.is-open) > tr:nth-child(n+5){display:none}
  table.nx-matrix tbody{gap:8px}
  table.nx-matrix tr{padding:12px;gap:8px 6px}
  .nx-matrix-wrap .nx-mx-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:10px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--violet);font:700 15px/1 inherit;cursor:pointer}
  .nx-matrix-wrap .nx-mx-more i{transition:rotate .2s}
  .nx-mx-more.is-open i{rotate:180deg}
  .nx-mx-more.is-open span{display:none}
}
@media (max-width:960px){
  /* screen_story: karta max 70vh, odrážky až po rozbalení */
  .nx-story-step:not(:has(.is-open)){max-height:70vh}
  .nx-story-step p{--m-lines:2}
  .nx-story-step:has(> .nx-m-more.-clamp:not([aria-expanded="true"])) > :is(.nx-bullets,.nx-m-more.-n){display:none}
  .nx-story-step > .nx-m-more{margin-inline:18px;width:auto;align-self:flex-start}
  .nx-story-inline{margin-bottom:12px}
}

@keyframes nxmSkel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.nx-dev-screen{animation:none!important}}