/* R1410 - mobilny układ publicznych podstron Czelendży.
   Plik ma unikalną nazwę, żeby ominąć stare kopie challenge-page.css w cache.
   Desktop nie ładuje tego arkusza (link ma media=max-width:820px), a reguły są
   dodatkowo zamknięte w @media jako zabezpieczenie. */

@media (max-width:820px){
  /* Podstawowy kontener */
  .challenge-story-shell,
  .deposit-shell{
    width:min(100%,calc(100% - 18px))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* Kontrolki są zapisane w HTML - nie tworzy ich JavaScript. */
  .challenge-mobile-story-radio,
  .challenge-mobile-section-check{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    opacity:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    pointer-events:none!important;
  }

  .challenge-mobile-tabs{
    position:sticky!important;
    top:0!important;
    z-index:760!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    margin:4px 0 4px!important;
    padding:7px 2px!important;
    border-radius:16px!important;
    background:rgba(247,248,248,.94)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:0 7px 18px rgba(25,30,35,.055)!important;
  }
  .challenge-mobile-tabs label{
    display:grid!important;
    place-items:center!important;
    min-width:0!important;
    min-height:38px!important;
    padding:7px 3px!important;
    border:1px solid var(--border,#e5e7eb)!important;
    border-radius:999px!important;
    background:var(--surface,#fff)!important;
    color:var(--muted,#667085)!important;
    font:800 9px/1.1 Manrope,sans-serif!important;
    text-align:center!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  #challenge-mobile-story-overview:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-overview"],
  #challenge-mobile-story-how:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-how"],
  #challenge-mobile-story-results:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-results"],
  #challenge-mobile-story-more:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-more"]{
    border-color:#ff5a00!important;
    background:#ff5a00!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(255,90,0,.18)!important;
  }

  .challenge-mobile-swipe-hint{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    margin:0 0 8px!important;
    color:var(--muted,#747b84)!important;
    font-size:9px!important;
    font-weight:700!important;
    line-height:1.2!important;
    text-align:center!important;
  }
  .challenge-mobile-swipe-hint span{color:#c84800!important;font-size:12px!important}

  /* Najważniejsze: na telefonie istnieje tylko wybrany rozdział. */
  #challenge-mobile-story-overview:checked ~ [data-mobile-story-panel]:not([data-mobile-story-panel="overview"]),
  #challenge-mobile-story-how:checked ~ [data-mobile-story-panel]:not([data-mobile-story-panel="how"]),
  #challenge-mobile-story-results:checked ~ [data-mobile-story-panel]:not([data-mobile-story-panel="results"]),
  #challenge-mobile-story-more:checked ~ [data-mobile-story-panel]:not([data-mobile-story-panel="more"]){
    display:none!important;
  }

  /* Zwijane sekcje wewnątrz rozdziałów. */
  .challenge-mobile-section-toggle-static{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 32px!important;
    grid-template-areas:"eyebrow icon" "title icon"!important;
    align-items:center!important;
    width:100%!important;
    min-height:66px!important;
    gap:2px 10px!important;
    padding:12px 13px!important;
    border:0!important;
    border-radius:16px!important;
    background:transparent!important;
    color:var(--text,#1d2228)!important;
    text-align:left!important;
    font-family:Manrope,sans-serif!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .challenge-mobile-section-toggle-static>span{
    grid-area:eyebrow!important;
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#c84800!important;
    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
  }
  .challenge-mobile-section-toggle-static>strong{
    grid-area:title!important;
    display:block!important;
    min-width:0!important;
    font-size:13px!important;
    line-height:1.28!important;
    letter-spacing:-.015em!important;
  }
  .challenge-mobile-section-toggle-static>i{
    grid-area:icon!important;
    display:grid!important;
    place-items:center!important;
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    background:#fff0e7!important;
    color:#d84b00!important;
    font-style:normal!important;
  }
  .challenge-mobile-section-toggle-static>i:before{content:'+'!important;font:800 20px/1 Manrope,sans-serif!important}
  .challenge-mobile-section-check:checked + .challenge-mobile-static-collapsible .challenge-mobile-section-toggle-static>i:before,
  .challenge-mobile-section-check:checked + .deposit-mobile-static-collapsible .challenge-mobile-section-toggle-static>i:before{content:'−'!important}

  .challenge-mobile-section-check:not(:checked) + .challenge-mobile-static-collapsible,
  .challenge-mobile-section-check:not(:checked) + .deposit-mobile-static-collapsible{
    padding:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .challenge-mobile-section-check:not(:checked) + .challenge-mobile-static-collapsible > :not(.challenge-mobile-section-toggle-static),
  .challenge-mobile-section-check:not(:checked) + .deposit-mobile-static-collapsible > :not(.challenge-mobile-section-toggle-static){
    display:none!important;
  }
  .challenge-mobile-section-check:checked + .challenge-mobile-static-collapsible .challenge-mobile-section-toggle-static,
  .challenge-mobile-section-check:checked + .deposit-mobile-static-collapsible .challenge-mobile-section-toggle-static{
    margin:-4px -2px 8px!important;
    width:calc(100% + 4px)!important;
    min-height:54px!important;
    padding:8px 9px!important;
    background:var(--surface-2,#f7f8f8)!important;
    border-radius:13px!important;
  }
  .challenge-mobile-static-collapsible .challenge-mobile-original-title,
  .deposit-mobile-static-collapsible .challenge-mobile-original-title{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }
  .challenge-mobile-static-collapsible .challenge-mobile-original-eyebrow,
  .deposit-mobile-static-collapsible .challenge-mobile-original-eyebrow{display:none!important}

  .challenge-mobile-section-check + .challenge-story-section,
  .challenge-mobile-section-check + .deposit-section{margin-top:8px!important}

  /* Krótsza hero i sekcje - tylko telefon. */
  .challenge-story-hero,
  .deposit-hero{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:18px 0 24px!important;
  }
  .challenge-story-hero h1,
  .deposit-hero h1{
    font-size:clamp(31px,9.5vw,42px)!important;
    line-height:1.02!important;
  }
  .challenge-story-lead,
  .deposit-lead{font-size:16px!important;line-height:1.52!important}
  .challenge-story-visual,
  .deposit-hero__visual{min-height:280px!important;max-width:560px!important;width:100%!important;margin-inline:auto!important}

  .challenge-story-section,
  .deposit-section{
    margin:10px 0!important;
    padding:22px 16px!important;
    border-radius:20px!important;
  }
  .challenge-story-section h2,
  .challenge-story-final h2,
  .deposit-section h2,
  .deposit-final-cta h2{font-size:clamp(25px,7.5vw,31px)!important}
  .challenge-story-heading p,
  .deposit-heading p{font-size:15px!important}

  /* Kafelki przewijamy poziomo zamiast budować długą kolumnę. */
  .challenge-story-stats,
  .challenge-story-steps,
  .challenge-story-cards,
  .challenge-story-duration,
  .challenge-story-benefits,
  .challenge-story-related,
  .deposit-stat-grid,
  .deposit-step-grid,
  .deposit-counter-panels,
  .deposit-duration-grid,
  .deposit-benefits-grid,
  .deposit-related-grid,
  .deposit-rate-grid,
  .deposit-zero{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding-bottom:5px!important;
  }
  .challenge-story-stats::-webkit-scrollbar,
  .challenge-story-steps::-webkit-scrollbar,
  .challenge-story-cards::-webkit-scrollbar,
  .challenge-story-duration::-webkit-scrollbar,
  .challenge-story-benefits::-webkit-scrollbar,
  .challenge-story-related::-webkit-scrollbar,
  .deposit-stat-grid::-webkit-scrollbar,
  .deposit-step-grid::-webkit-scrollbar,
  .deposit-counter-panels::-webkit-scrollbar,
  .deposit-duration-grid::-webkit-scrollbar,
  .deposit-benefits-grid::-webkit-scrollbar,
  .deposit-related-grid::-webkit-scrollbar,
  .deposit-rate-grid::-webkit-scrollbar,
  .deposit-zero::-webkit-scrollbar{display:none!important}

  .challenge-story-stats>*{flex:0 0 76%!important;scroll-snap-align:start!important}
  .challenge-story-steps>*{flex:0 0 80%!important;scroll-snap-align:start!important}
  .challenge-story-cards>*{flex:0 0 88%!important;scroll-snap-align:start!important}
  .challenge-story-duration>*{flex:0 0 82%!important;scroll-snap-align:start!important}
  .challenge-story-benefits>*{flex:0 0 86%!important;scroll-snap-align:start!important}
  .challenge-story-related>*{flex:0 0 82%!important;scroll-snap-align:start!important}
  .deposit-stat-grid>*,.deposit-step-grid>*,.deposit-counter-panels>*,.deposit-duration-grid>*,
  .deposit-benefits-grid>*,.deposit-related-grid>*,.deposit-rate-grid>*,.deposit-zero>*{
    flex:0 0 84%!important;
    scroll-snap-align:start!important;
  }

  .challenge-story-split,
  .challenge-story-example,
  .challenge-story-results,
  .deposit-system-info,
  .deposit-day-example,
  .deposit-results{grid-template-columns:1fr!important;gap:20px!important}

  .challenge-story-inline-cta,
  .challenge-story-secondary,
  .deposit-inline-cta,
  .deposit-secondary-actions{align-items:stretch!important;flex-direction:column!important}
  .challenge-story-inline-cta .btn,
  .challenge-story-secondary .btn,
  .deposit-inline-cta .btn,
  .deposit-secondary-actions .btn{text-align:center!important}

  .challenge-story-final,
  .deposit-final-cta{
    grid-template-columns:1fr!important;
    gap:18px!important;
    margin:12px 0 0!important;
    padding:26px 18px!important;
    border-radius:21px!important;
  }
  .challenge-story-final__actions,
  .deposit-final-cta__actions{flex-direction:column!important}

  /* Ciemny motyw */
  html[data-theme="dark"] .challenge-mobile-tabs{background:rgba(20,22,24,.94)!important}
  html[data-theme="dark"] .challenge-mobile-tabs label{background:var(--surface)!important;border-color:var(--border)!important;color:var(--muted)!important}
  html[data-theme="dark"] #challenge-mobile-story-overview:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-overview"],
  html[data-theme="dark"] #challenge-mobile-story-how:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-how"],
  html[data-theme="dark"] #challenge-mobile-story-results:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-results"],
  html[data-theme="dark"] #challenge-mobile-story-more:checked ~ .challenge-mobile-tabs label[for="challenge-mobile-story-more"]{background:#ff5a00!important;border-color:#ff5a00!important;color:#fff!important}
  html[data-theme="dark"] .challenge-mobile-section-toggle-static{color:var(--text)!important}
  html[data-theme="dark"] .challenge-mobile-section-toggle-static>i{background:var(--orange-pale)!important;color:#ff7d35!important}

  /* Białe pole ilustracji także w dark mode. */
  html[data-theme="dark"] .challenge-story-person,
  html[data-theme="dark"] .challenge-story-person img,
  html[data-theme="dark"] .challenge-story-side img,
  html[data-theme="dark"] .challenge-story-example__visual img,
  html[data-theme="dark"] .deposit-person,
  html[data-theme="dark"] .deposit-person img,
  html[data-theme="dark"] .deposit-side-visual img,
  html[data-theme="dark"] .deposit-day-example__visual img{background:#fff!important}
}