/* ==========================================================================
   Responzivita
   - mockupy reagujú na šírku vlastného kontajnera (container queries),
     takže sú čitateľné v hero, v detailných blokoch aj na mobile
   - layout stránky: 1180 / 1024 / 760 / 480 px
   ========================================================================== */

/* ---------- Mockupy: kontajner okna aplikácie ---------- */
@container app (max-width: 620px) {
  .app-body { grid-template-columns: 62px minmax(0, 1fr); }
  .app-sidebar { padding: 14px 8px; align-items: center; }
  .app-brand span, .app-user > span:last-child, .app-menu-group, .app-menu-item > span { display: none; }
  .app-brand { padding: 0; }
  .app-user { padding: 6px; background: none; }
  .app-menu { gap: 4px; }
  .app-menu-item { justify-content: center; padding: 10px; }
  .app-menu-item.is-active::before { left: -8px; }
}
@container app (max-width: 540px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar { display: none; }
  .app-chrome .demo-chip { display: none; }
  .app-main { padding: 12px !important; }
}

/* ---------- Mockupy: obsah obrazovky ---------- */
@container scr (max-width: 620px) {
  .rep-filters { grid-template-columns: 1fr 1fr; }
  .rep-filters .scr-field--grow { grid-column: 1 / -1; }
  .rep-recalc { grid-column: 1 / -1; }
  /* tabuľka → karty */
  .rep-table thead { display: none; }
  .rep-table, .rep-table tbody, .rep-table tr, .rep-table th, .rep-table td { display: block; width: 100%; }
  .rep-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .rep-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 12px; border: 1px solid var(--c-line); border-radius: 12px; }
  .rep-table tbody tr:hover { background: #fff; }
  .rep-table th, .rep-table td { padding: 0; border: 0 !important; }
  .rep-table tbody th { grid-column: 1 / -1; font-size: 13px; margin-bottom: 2px; }
  .rep-table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--c-muted); }
  .rep-table td.rep-usage { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
  .rep-table td.rep-usage::before { display: none; }
  .rep-table-wrap { overflow: visible; }
}

@container scr (max-width: 600px) {
  .cal-day { min-height: 46px; padding: 4px; }
  .cal-ev, .cal-more, .cal-holiday-name { display: none; }
  .cal-dots { display: flex; }
  .cal-agenda { display: flex; }
  .cal-dow { font-size: 9.5px; letter-spacing: .02em; }
  .cal-toolbar .fake-select { width: 100%; }
}

@container scr (max-width: 440px) {
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .gauge-ring { max-width: 104px; }
  .gauge-num { font-size: 20px; }
}

@container scr (max-width: 560px) {
  .appr { grid-template-columns: auto minmax(0, 1fr); }
  .appr-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .appr-actions .mbtn { width: auto; flex: 1 1 auto; }
  .appr-result { grid-column: 1 / -1; align-items: flex-start; }
  .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scr-banner { flex-direction: column; align-items: flex-start; }
}

@container scr (max-width: 400px) {
  .scr-row { grid-template-columns: 1fr; }
  .rep-head { flex-direction: column; }
  .scr-actions .mbtn { flex: 1; }
  .gauge-legend { font-size: 10.5px; }
}

/* ---------- Layout stránky ---------- */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; z-index: 95; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 16px var(--gutter) 24px; background: #fff;
    border-bottom: 1px solid var(--c-line); box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .25);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease), visibility 0s; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { min-height: 48px; padding: 12px 14px; font-size: 1.0625rem; }
  .nav-mobile-cta { display: inline-flex; min-height: 50px; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 1024px) {
  :root { --gutter: 22px; }

  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { text-align: center; max-width: 720px; margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-points { justify-content: center; }
  .hero-visual { max-width: 780px; margin: 12px auto 0; width: 100%; }
  .hero-stage { transform: perspective(2200px) rotateX(4deg); }
  .float-badge--a { left: -12px; }
  .float-badge--b { right: -12px; }

  .compare { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .compare-vs { transform: rotate(90deg); justify-self: center; }

  .feature-card, .feature-card--wide { grid-column: span 6; }

  .split, .split--reverse { grid-template-columns: minmax(0, 1fr); }
  .att-split { grid-template-columns: minmax(0, 1fr); }
  .att-copy { max-width: 640px; }
  .split--reverse .split-copy, .split--reverse .split-visual { order: initial; }
  .split-copy { max-width: 640px; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .steps::before { display: none; }

  .audience-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }

  .benefits-layout, .faq-layout, .fonet-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .benefits-layout .section-head, .faq-layout .section-head { position: static; }

  .devices { padding-right: 110px; }
  .device-phone { width: 236px; }
  .phone-screen { min-height: 480px; }

  .cta-box { grid-template-columns: minmax(0, 1fr); }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; --gutter: 16px; }

  .header-cta { display: none; }
  .brand-mark { width: 34px; height: 34px; }

  .hero-title { font-size: clamp(2rem, 8.4vw, 2.75rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-points { gap: 10px 16px; font-size: .875rem; }
  .hero-stage { transform: none; }
  .float-badge { padding: 8px 12px 8px 8px; font-size: .75rem; border-radius: 13px; }
  .float-badge small { display: none; }
  .float-ico, .float-ring, .float-ring svg { width: 30px; height: 30px; }
  .float-badge--a { top: auto; bottom: -22px; left: 4px; }
  .float-badge--b { display: none; }
  .float-badge--c { left: auto; right: 4px; bottom: auto; top: 54px; }

  .section-head:not(.section-head--left) { text-align: left; }
  .section-head:not(.section-head--left) .eyebrow::after { display: none; }

  .feature-card, .feature-card--wide { grid-column: 1 / -1; padding: 22px; }

  .tabs-scroller { justify-content: flex-start; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .tabs-scroller::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; padding-inline: 14px; }
  .showcase .app-main { min-height: 0; }
  .showcase-hint { justify-content: flex-start; text-align: left; align-items: flex-start; }
  .showcase-hint .icon { margin-top: 3px; }

  .mock-card { padding: 12px; padding-top: 44px; border-radius: 16px; }
  .split-visual::before { display: none; }
  .att-methods, .att-stage { grid-template-columns: minmax(0, 1fr); }
  .att-method { padding: 22px; }

  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; text-align: left; padding: 0; }
  .step-marker { grid-row: span 2; width: 60px; height: 60px; margin: 0; }
  .step-icon { width: 60px; height: 60px; border-radius: 18px; }
  .step-num { width: 24px; height: 24px; font-size: .75rem; }
  .step-title { align-self: end; }
  .step-text { margin-inline: 0; max-width: none; margin-top: 4px; }

  .benefit-list { grid-template-columns: minmax(0, 1fr); }
  .benefit { padding: 18px; }

  .usability-points { justify-content: flex-start; margin-bottom: 36px; }
  .usability-points li { padding: 8px 13px; font-size: .875rem; }
  .devices { padding-right: 0; }
  .device-desktop { display: none; }
  .device-phone { position: relative; right: auto; bottom: auto; margin-inline: auto; width: min(300px, 100%); }

  .fonet-areas { grid-template-columns: minmax(0, 1fr); }
  .fonet-copy .btn { width: 100%; }

  .faq-btn { padding: 14px 16px; font-size: .9688rem; }
  .faq-panel-inner { padding: 0 16px 18px; }

  .cta-box { border-radius: 22px; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; white-space: normal; }

  .contact-card { border-radius: 20px; box-shadow: var(--sh-md); }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .form-footer { flex-direction: column-reverse; align-items: stretch; }
  .form-footer .btn { width: 100%; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .btn--lg { min-height: 52px; padding-inline: 18px; }
  .compare-col { padding: 20px; }
  .compare-head h3 { font-size: 1.125rem; }
  .audience-card { padding: 22px; }
}

/* ---------- Zariadenia bez hover ---------- */
@media (hover: none) {
  .feature-card:hover, .att-method:hover, .audience-card:hover, .benefit:hover, .fonet-areas li:hover, .btn:hover { transform: none; }
}

/* ---------- Obmedzený pohyb ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-stage { transform: none !important; }
}

/* ---------- Tlač ---------- */
@media print {
  .site-header, .nav-backdrop, .hero-bg, .float-badge, .toast, .cta-section, .contact-card { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}