/* 07-strona-glowna.css: Strona główna: hero, pokaz modułów (zakładki), Czym jest system, rząd zastosowań.
   Style globalne motywu DataDrive; zasady i spis plików w 01-tokeny.css. */

/* Hero strony głównej */
.hero{position:relative;overflow:clip;padding-block:clamp(40px,5vw,64px) clamp(64px,8vw,104px);background:linear-gradient(180deg,var(--white) 0,var(--white) calc(100% - clamp(160px,24vh,280px)),var(--pale) 100%)} /* pierwsza sekcja zawsze biała, u dołu płynnie w jasnoniebieski sekcji z mockupem; pod nią jasnoniebieska sekcja z mockupem, dalej tła na przemian */
.hero__text{text-align:center;max-width:920px;margin-inline:auto}
.hero h1 .grad{display:block;padding-bottom:.06em}
@media (max-width:600px){.hero h1{font-size:clamp(2rem,10.8vw,2.75rem)}} /* telefony: tytuł tak duży, jak się da, obie linie w jednym wierszu (375 px: ok. 40 px) */
.hero__lead{margin:24px auto 0;font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:660px}
.hero__cta{justify-content:center;margin-top:34px}
/* Obraz w nagłówku strony (.hero__shot): zdjęcie albo obraz systemu */
.hero__shot{position:relative}
/* Sekcja pod nagłówkiem: główny obraz (mockup) i pasek kafelków (.strip) */
.hero-pokaz{padding-block:clamp(40px,5vw,64px) clamp(64px,8vw,104px)} /* tło z klasy bg-pale */

/* Pokaz modułów (zakładki) */
/* Bez JS: wszystkie karty modułów jedna pod drugą; z JS: lista + karta.
   Reguły „z JS” działają też w podglądzie edytora (.dd-sekcja-podglad), gdzie dd.js nie działa: ten sam układ co na stronie */
.tabs{display:none}
.panels{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,64px)} /* kolumna nie szersza niż karta, także przy długim tekście w ramce */
.panel{display:flex;flex-direction:column;align-items:stretch;gap:clamp(20px,3vw,40px)}
.panel__text{order:2;padding:4px 6px;flex:1;display:flex;flex-direction:column}
.panel .media{margin:0;overflow:hidden;border-radius:var(--r)} /* overflow: zdjęcie przybliża się po zmianie zakładki w obrębie ramki */
.panel .media img{aspect-ratio:5/2;object-fit:cover}
.panel .placeholder{aspect-ratio:5/2}
.panel__head{display:flex;align-items:baseline;gap:12px}
.panel__num{display:inline-block;font-size:var(--fs-xs);font-weight:800;color:var(--blue);letter-spacing:.08em}
.panel__text h3{font-size:1.25rem}
.panel__text>p{margin-top:6px}
:is(.js,.dd-sekcja-podglad) .showcase{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
:is(.js,.dd-sekcja-podglad) .tabs{display:flex;flex-direction:column;gap:4px}
.tab{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;width:100%;text-align:left;padding:8px 12px 8px 8px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;cursor:pointer;transition:background .25s,border-color .25s}
.tab:hover{background:var(--pale)}
.bg-pale .tab:not([aria-selected="true"]):hover{background:var(--white)}
.tab__num{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-2xs);background:var(--pale);color:var(--blue);font-weight:800;font-size:.78rem;transition:background .25s,color .25s}
.tab__name{display:block;font-weight:700;color:var(--ink);line-height:1.3;font-size:.95rem}
.tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue)}
.tab[aria-selected="true"] .tab__num{background:var(--white);color:var(--blue)}
.tab[aria-selected="true"] .tab__name{color:var(--white)}
:is(.js,.dd-sekcja-podglad) .stage{position:relative;align-self:start;display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,1.8vw,22px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line)}
:is(.js,.dd-sekcja-podglad) .panels{position:relative;gap:0}
:is(.js,.dd-sekcja-podglad) .panel{grid-area:1/1;align-self:stretch;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
:is(.js,.dd-sekcja-podglad) .panel.is-active{opacity:1;visibility:visible;transition:opacity .35s ease .05s,visibility 0s}
/* Link do strony zawsze w tym samym miejscu, na dole karty (panele mają wysokość najwyższego) */
.panel__text>.mini{margin-bottom:28px}
.panel__text>.panel__cta{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)} /* dwa przyciski na dole karty: strona floty i „Umów prezentację”, styl jak w nagłówku strony */
/* Po zmianie zakładki: zdjęcie lekko się przybliża, nazwa i punkty wjeżdżają po kolei */
.is-ruch .panel.is-active .media img{animation:zdj-wjazd .6s var(--ease) both}
.is-ruch .panel.is-active .panel__head{animation:mini-wjazd .35s var(--ease) .05s both}
@keyframes zdj-wjazd{from{opacity:.3;transform:scale(1.05)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.is-ruch .panel.is-active .media img,.is-ruch .panel.is-active .panel__head{animation:none}}
:is(.js,.dd-sekcja-podglad) .stage .panel:focus-visible{outline-offset:-4px}
@media (max-width:900px){
  :is(.js,.dd-sekcja-podglad) .showcase{grid-template-columns:minmax(0,1fr);gap:var(--gap)}
  /* zakładki przewijane w bok (telefon, tablet): zanikanie przy prawej krawędzi mówi, że jest więcej; odstęp po ostatniej zakładce: po przewinięciu do końca wypada poza zanikanie */
  :is(.js,.dd-sekcja-podglad) .tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none;padding-right:15%;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  :is(.js,.dd-sekcja-podglad) .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;width:auto;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px 6px 6px}
  .tab__name{white-space:nowrap;font-size:.9rem}
  .tab__num{border-radius:50%;width:28px;height:28px}
  :is(.js,.dd-sekcja-podglad) .stage{padding:10px}
  /* telefon: karta ma wysokość aktywnego modułu, nie najdłuższego */
  :is(.js,.dd-sekcja-podglad) .panel:not(.is-active){position:absolute;inset:0 0 auto}
}

/* Czym jest system: role + konto */
.who{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 var(--gap);align-items:stretch}
.who>div:first-child{display:contents}
.who__sub{grid-column:1;grid-row:1;font-size:1.05rem;margin-bottom:16px}
.who .roles{grid-column:1;grid-row:2;grid-template-rows:auto auto 1fr}
.who .account{grid-column:2;grid-row:2}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.role{display:flex;gap:var(--gap);align-items:flex-start;padding:24px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.role:hover{transform:var(--lift);border-color:var(--line-strong)}
.role strong{display:block;color:var(--ink);font-size:1.05rem;font-weight:800}
.role strong+span{display:block;margin-top:4px;font-size:.93rem}
.role--wide{grid-column:1/-1;padding:0;overflow:hidden;align-items:stretch}
.role__body{display:flex;gap:var(--gap);align-items:flex-start;padding:24px;flex:1}
.role__img{flex:0 0 46%;position:relative;min-height:150px}
.role__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.role__img::after{content:"";position:absolute;inset:0;background:var(--fade-white-r),var(--tint-blue)}
.role__img .placeholder{position:absolute;inset:0;aspect-ratio:auto;padding:12px}
.role__img:has(.placeholder)::after{display:none}
/* Granatowa karta akcentu */
.account{position:relative;border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);color:var(--on-dark);overflow:hidden;background:var(--grad-navy)}
.account h3{color:var(--white);font-size:1.3rem;margin-top:18px}
.account .ico{background:linear-gradient(135deg,var(--sky),var(--sky-2));color:var(--navy-2)}
@media (max-width:1100px){
  .who{grid-template-columns:minmax(0,1fr)}
  .who .roles{grid-template-rows:none}
  .who .account{grid-column:1;grid-row:3;margin-top:16px}
}
@media (max-width:600px){
  .roles{grid-template-columns:minmax(0,1fr)}
  .role--wide{flex-direction:column}
  .role__img{flex:none;aspect-ratio:16/9;min-height:0}
  .role__img::after{background:var(--fade-white-b)}
}