/* ── PRZYPOMNIENIA E-MAIL I SMS (podstrona funkcji) ──────
   Reużywa komponentów .sz-* (strona-zapisow.css): hero-std, sz-problem,
   sz-contrast, sz-solution, sz-cards, sz-bento-card, sz-steps, final-cta.
   Tu: oś czasu wysyłek i przepływ kanałów jako wizualizacje kart
   w sekcji „Rozwiązanie", plus siatka rodzajów przypomnień. */

/* ── Oś czasu wysyłek — karta „Harmonogram" ───────────── */
.sz-bento-visual > .pr-timeline { width: 100%; align-self: start; }
.pr-timeline { position: relative; padding: 8px 0 8px 44px; }
.pr-tl-axis, .pr-tl-fill { position: absolute; left: 17px; width: 2px; border-radius: 2px; }
.pr-tl-axis { top: 14px; bottom: 14px; background: var(--border); }
.pr-tl-fill { top: 14px; height: 0; background: var(--brand); animation: prTlFill 7s ease-in-out infinite; transform-origin: top; }
@keyframes prTlFill {
  0% { height: 0; opacity: 1; }
  6% { height: 0; }
  66%, 92% { height: calc(100% - 28px); opacity: 1; }
  97% { height: calc(100% - 28px); opacity: 0; }
  100% { height: 0; opacity: 0; }
}
.pr-tl-node { position: relative; opacity: 0; }
.pr-tl-node + .pr-tl-node { margin-top: 16px; }
.pr-tl-n1 { animation: prTlN1 7s ease-in-out infinite; }
.pr-tl-n2 { animation: prTlN2 7s ease-in-out infinite; }
.pr-tl-n3 { animation: prTlN3 7s ease-in-out infinite; }
.pr-tl-n4 { animation: prTlN4 7s ease-in-out infinite; }
@keyframes prTlN1 { 0%, 10% { opacity: 0; transform: translateY(10px); } 16%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes prTlN2 { 0%, 26% { opacity: 0; transform: translateY(10px); } 32%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes prTlN3 { 0%, 42% { opacity: 0; transform: translateY(10px); } 48%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes prTlN4 { 0%, 58% { opacity: 0; transform: translateY(10px); } 64%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(10px); } }
.pr-tl-dot {
  position: absolute; left: -34px; top: 13px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand); box-shadow: 0 0 0 4px #fff; z-index: 2;
}
.pr-tl-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 22px rgba(17,17,17,0.06); padding: 12px 14px;
}
.pr-tl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr-tl-time { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.pr-tl-chans { display: inline-flex; gap: 5px; flex-shrink: 0; }
.pr-tl-chan { font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 4px; }
.pr-tl-text { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pr-tl-node.is-event .pr-tl-dot { background: var(--brand); border-color: var(--brand); width: 18px; height: 18px; left: -35px; top: 12px; }
.pr-tl-node.is-event .pr-tl-card { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 12px 28px rgba(42,107,79,0.14); }
.pr-tl-title { margin: 8px 0 0; font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--text); }
.pr-tl-sub { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #15803d; }
.pr-tl-sub svg { width: 13px; height: 13px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .pr-tl-fill, .pr-tl-node, .pr-fl-path, .pr-fl-email, .pr-fl-sms, .pr-fl-chan-status { animation: none; }
  .pr-tl-fill { height: calc(100% - 28px); opacity: 1; }
  .pr-tl-node { opacity: 1; transform: none; }
  .pr-fl-chan-status { opacity: 1; }
}

/* Przepływ: rezerwacja w cyklu → rozgałęzienie na e-mail i SMS
   (karta „Kanały"). */
.sz-bento-visual > .pr-flow { align-self: start; }
.pr-flow { max-width: 360px; margin: 0 auto; }
.pr-fl-trigger {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 14px 32px rgba(17,17,17,0.08); padding: 14px 16px;
}
.pr-fl-ic { width: 38px; height: 38px; border-radius: 4px; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.pr-fl-ic svg { width: 21px; height: 21px; }
.pr-fl-trigger-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pr-fl-trigger-title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text); }
.pr-fl-trigger-meta { font-size: 12px; color: var(--text-muted); }
.pr-fl-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 3px 9px; border-radius: 4px; }

.pr-fl-fork { display: block; width: 100%; height: 54px; }
.pr-fl-path { stroke: var(--brand); stroke-width: 2; fill: none; stroke-dasharray: 5 7; opacity: 0.55; animation: prFlow 1.4s linear infinite; }
@keyframes prFlow { to { stroke-dashoffset: -24; } }

.pr-fl-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-fl-chan { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; box-shadow: 0 8px 22px rgba(17,17,17,0.06); }
.pr-fl-email { animation: prPingA 6s ease-in-out infinite; }
.pr-fl-sms { animation: prPingB 6s ease-in-out infinite; }
@keyframes prPingA {
  0%, 30% { box-shadow: 0 8px 22px rgba(17,17,17,0.06); }
  38% { box-shadow: 0 0 0 4px rgba(42,107,79,0.16), 0 8px 22px rgba(17,17,17,0.06); }
  50%, 100% { box-shadow: 0 8px 22px rgba(17,17,17,0.06); }
}
@keyframes prPingB {
  0%, 46% { box-shadow: 0 8px 22px rgba(17,17,17,0.06); }
  54% { box-shadow: 0 0 0 4px rgba(42,107,79,0.16), 0 8px 22px rgba(17,17,17,0.06); }
  66%, 100% { box-shadow: 0 8px 22px rgba(17,17,17,0.06); }
}
.pr-fl-chan-head { display: flex; align-items: center; gap: 8px; }
.pr-fl-chan-ic { width: 26px; height: 26px; border-radius: 4px; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.pr-fl-chan-ic svg { width: 15px; height: 15px; }
.pr-fl-chan-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.pr-fl-chan-text { margin: 9px 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.pr-fl-chan-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #15803d; }
.pr-fl-chan-status svg { width: 12px; height: 12px; flex-shrink: 0; }
.pr-fl-email .pr-fl-chan-status { opacity: 0; animation: prStA 6s ease-in-out infinite; }
.pr-fl-sms .pr-fl-chan-status { opacity: 0; animation: prStB 6s ease-in-out infinite; }
@keyframes prStA { 0%, 34% { opacity: 0; transform: scale(0.9); } 40%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; } }
@keyframes prStB { 0%, 50% { opacity: 0; transform: scale(0.9); } 56%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; } }


/* ── Równy rytm pionowy sekcji ────────────────────────── */
.pr-page .hero-std { padding-bottom: 88px; }
.pr-page .sz-problem { padding-top: 24px; padding-bottom: 88px; }
.pr-page .sz-solution { padding-top: 24px; padding-bottom: 88px; }
/* Sekcja rodzajow przypomnien na pasie tla przez cala szerokosc - odcina
   ja od sasiednich sekcji bez podnoszenia typografii. Padding liczony
   max()em trzyma tresc w tej samej studni 1120px co reszta strony. */
.pr-page .pr-types-sec {
  max-width: none;
  margin-top: 24px;
  /* Studnia tresci = var(--max-w), ta sama co „Poznaj wszystkie funkcje". */
  padding: 72px max(32px, calc((100vw - var(--max-w)) / 2 + 32px));
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pr-page .pr-types-sec + * { padding-top: 88px; }
@media (max-width: 900px) {
  .pr-page .pr-types-sec { padding: 56px 20px; }
}

/* ── Responsywność ────────────────────────────────────── */
@media (max-width: 1000px) {
}
@media (max-width: 960px) {
}
@media (max-width: 560px) {
  .pr-fl-channels { grid-template-columns: 1fr; }
}

/* ── Sekcja 4 — Rodzaje przypomnień (przełącznik lista | opis) ──
   Lewa kolumna to lista pozycji, aktywna jest czarna ze strzałką w rynience,
   pozostałe wyszarzone. Prawa kolumna pokazuje opis wybranej pozycji. */
.pr-switch {
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) 1fr;
  gap: clamp(40px, 6vw, 80px);
  /* Opis startuje na wysokosci pierwszej pozycji - przy szesciu pozycjach
     wysrodkowanie zostawialo tekst zawieszony w polowie pustej kolumny. */
  align-items: start;
  margin-top: 30px;
}
.pr-switch-nav { display: flex; flex-direction: column; }
.pr-switch-tab {
  position: relative;
  display: block;
  /* Rynienka na strzalke: tekst pozycji stoi w jednej linii pionowej
     niezaleznie od tego, ktora jest aktywna. */
  margin: 0; padding: 7px 0 7px 44px;
  border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--font-heading);
  /* Skala naszych naglowkow sekcji. Ciezar niesie tylko aktywna pozycja. */
  /* Dolna granica trzyma liste wieksza od opisu po prawej (24px). */
  font-size: clamp(27px, 2.3vw, 30px);
  font-weight: 500; line-height: 1.25; letter-spacing: -0.02em;
  color: #c2c8ce;
  transition: color .16s;
}
.pr-switch-tab:hover { color: #9aa2aa; }
.pr-switch-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
.pr-switch-tab.is-active { color: var(--text); font-weight: 600; }
.pr-switch-arrow {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-6px);
  font-size: 0.86em; line-height: 1; opacity: 0;
  transition: opacity .16s, transform .16s;
}
.pr-switch-tab.is-active .pr-switch-arrow { opacity: 1; transform: translateY(-50%) translateX(0); }
.pr-switch-panels {
  /* Bez ramki - sam tekst na tle sekcji, wysrodkowany w pionie wzgledem
     calej listy. Minimalna wysokosc pod najdluzszy opis, zeby
     przelaczanie nie przesuwalo sasiednich elementow. */
  min-height: 150px;
  align-self: center;
  display: flex; align-items: center;
}
.pr-switch-panel p {
  margin: 0; max-width: 42ch;
  /* Tresc Interem, jak wszedzie na stronie. Geist zostaje po lewej,
     bo tam sa tytuly pozycji. */
  font-size: 26px; line-height: 1.5; color: var(--text);
  text-wrap: pretty;
}
.pr-switch-panel.is-active p { animation: prSwitchIn .22s ease-out; }
@keyframes prSwitchIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .pr-switch-panel.is-active p { animation: none; }
  .pr-switch-arrow, .pr-switch-tab { transition: none; }
}
@media (max-width: 900px) {
  /* Kolumny ida pod siebie: lista jako spis tresci, opis zaraz pod nia.
     Proporcje jak na desktopie - lista zawsze o krok wieksza od opisu. */
  .pr-switch { grid-template-columns: 1fr; gap: 26px; align-items: start; margin-top: 18px; }
  .pr-switch-nav { gap: 2px; }
  .pr-switch-tab { padding: 6px 0 6px 34px; font-size: clamp(24px, 6.4vw, 28px); }
  /* Opis w tej samej linii pionowej co tytuly pozycji (za rynienka
     strzalki), nie w linii samej strzalki. */
  .pr-switch-panels { min-height: 132px; align-self: start; padding: 0 0 0 34px; }
  .pr-switch-panel p { max-width: none; font-size: clamp(20px, 5.4vw, 23px); line-height: 1.55; }
}
@media (max-width: 480px) {
  .pr-switch-tab { padding-left: 30px; }
  .pr-switch-panels { padding-left: 30px; }
  .pr-switch-arrow { font-size: 0.78em; }
}

/* Hero: zrzut jest szeroki i gesty (tabela uczestnikow) - kanoniczna ramka 3:2
   z object-fit: cover ucinala go z obu stron i tekst robil sie nieczytelny.
   Tutaj ramka bierze naturalne proporcje obrazka, wiec widac cala tabele. */
.pr-page .hero-std-shot { aspect-ratio: auto; }
.pr-page .hero-std-shot img { height: auto; object-fit: contain; }

/* ── Scena „Bez Planerto" (sekcja Problem) ──────────────
   Sterta wysłanych SMS-ów stoi w całości na komponentach ze strony zapisów
   (.ctr-pile, .ctr-note) - tu tylko rozmiar podpisu, bo wspólne .ctr-caption
   siedzi na --fs-body, które skaluje się do 17-19px. */
.pr-page .ctr-caption { font-size: 16px; }

/* Obie sceny w jednej komórce gridu: ramka zawsze bierze wysokość wyższej z nich,
   więc auto-cykl co 4 s nie przesuwa strony. Na desktopie no-op (obie po 400px),
   na telefonie ratuje przed skokiem po rozsunięciu dymków niżej. */
.pr-page .ctr-frame { display: grid; }
.pr-page .ctr-frame > .ctr-view { grid-area: 1 / 1; position: relative; inset: auto; }

@media (max-width: 640px) {
  /* Tekst SMS-a zawija się tu do czterech linii, więc dymek ma ~117px zamiast
     ~74px. Przy kanonicznym rozstawie 88px zasłaniałyby sobie treść, a czwarty
     wychodził poza scenę. Większy odstęp, czwarty schowany - trzy wiadomości
     pod rząd wystarczą, żeby pokazać powtarzalność. */
  .pr-page .ctr-pile { min-height: 424px; }
  .pr-page .ctr-n1 { top: 30px; }
  .pr-page .ctr-n2 { top: 160px; }
  .pr-page .ctr-n3 { top: 290px; }
  .pr-page .ctr-n4 { display: none; }
}