/* 📷 Przygotowanie do sesji zdjęciowej — sesja.galerianieruchomosci.pl/<fotograf> (Jakub 31.10.2026, link z SMS-a grafiku sesji).
   Wymuszone CSP (style-src 'self'): CAŁY wygląd tylko w tym pliku, czcionki systemowe. Barwy jak nagłówek „☀️ Dzień dobry” w Moim dniu
   (mojdzien-core.js .md-hero: granat #1E3050 → noc #3A2E66 → śliwka #5E1F44 → czerwień #CD3C4B, przesuwający się błysk, poświata w rogu).
   Jakub 31.10: „żółto-niebieskie nie lubię, zrób w kolorze jak Dzień dobry, błyszczące” → bez złota. Mobile-first (360–430 px), ciemny motyw. */

:root {
  color-scheme: light dark;
  --md-1: #1E3050; --md-noc: #3A2E66; --md-2: #5E1F44; --md-bordo: #7A1522; --md-acc: #CD3C4B;
  --tlo: #f4f2f6; --karta: #ffffff; --li: #e8e3ec; --panel: #f7f4f8;
  --t1: #1d1a2b; --t2: #4d4659; --t3: #6a6275;
  --link: #5E1F44; --nr: linear-gradient(135deg, #5E1F44, #CD3C4B); --nr-txt: #ffffff;
  --cien: 0 3px 14px rgba(16, 24, 40, .07);
  --sans: 'Segoe UI', system-ui, -apple-system, sans-serif;   /* = czcionka aplikacji (pulpit.html body) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #110d18; --karta: #1b1624; --li: #2e2638; --panel: #15111d;
    --t1: #f3eef6; --t2: #cfc5d6; --t3: #ab9fb5;
    --link: #f3a3ae; --nr: linear-gradient(135deg, #7A1522, #CD3C4B); --nr-txt: #ffffff;
    --cien: 0 3px 18px rgba(0, 0, 0, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--tlo); color: var(--t1); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
.se {
  max-width: 560px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* ---------- górna karta: jak „☀️ Dzień dobry” (.md-hero) — gradient, błysk, czerwona poświata ---------- */
.se-gora {
  position: relative; overflow: hidden; border-radius: 16px; padding: 12px 14px 13px; color: #fff;
  background: linear-gradient(125deg, var(--md-1) 0%, var(--md-noc) 40%, var(--md-2) 72%, var(--md-acc) 118%);
  box-shadow: 0 12px 28px rgba(94, 31, 68, .30), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.se-gora::before {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .20), transparent); transform: skewX(-20deg);
  animation: seBlysk 5s ease-in-out infinite;
}
@keyframes seBlysk { 0%, 55% { left: -70%; } 100% { left: 130%; } }
.se-gora::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 210px; height: 210px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(205, 60, 75, .45), rgba(205, 60, 75, 0) 70%);
}
.se-gora > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .se-gora::before { animation: none; display: none; } }
.se-marka { display: flex; align-items: center; gap: 8px; }
.se-znak { display: block; width: 26px; height: auto; flex: 0 0 auto; filter: brightness(0) invert(1); opacity: .95; }   /* znak GN na biało */
.se-marka-t { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: rgba(255, 255, 255, .85); }
.se-tyt { margin: 7px 0 0; font: 900 19px/1.25 var(--sans); letter-spacing: -.2px; color: #fff; }   /* jak „☀️ Dzień dobry” (17 px) */
.se-linia { height: 1px; margin: 8px 0 7px; background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.se-lead { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .88); }

/* ---------- karty ---------- */
.se-karta { background: var(--karta); border: 1px solid var(--li); border-radius: 16px; padding: 14px; margin-top: 10px; box-shadow: var(--cien); }

/* fotograf: stopka (grafika 807 × 276) albo wizytówka (zdjęcie / inicjały + imię) */
.se-kto { margin: 0 0 9px; font-size: 13.5px; color: var(--t2); }
.se-kto b { color: var(--t1); }
.se-stopka { display: block; width: 100%; height: auto; aspect-ratio: 807 / 276; object-fit: cover; border-radius: 12px; border: 1px solid var(--li); background: #e9edf2; }
.se-wiz { display: flex; align-items: center; gap: 12px; }
.se-wiz-foto { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--md-acc); background: var(--panel); }
.se-wiz-mono {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 800 19px/1 var(--sans); letter-spacing: .02em; color: #fff; background: linear-gradient(125deg, var(--md-1), var(--md-2) 60%, var(--md-acc));
}
.se-wiz-imie { margin: 0; font: 800 16.5px/1.25 var(--sans); color: var(--t1); }
.se-wiz-rola { margin: 2px 0 0; font-size: 13.5px; color: var(--t3); }

/* 5 kroków z ulotki */
.se-lista { list-style: none; margin: 0; padding: 0; }
.se-krok { display: flex; gap: 14px; align-items: center; }
.se-ilu { flex: 0 0 104px; width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--li), 0 6px 16px rgba(94, 31, 68, .12); }
.se-krok-t { min-width: 0; }
.se-krok h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 800 16.5px/1.25 var(--sans); letter-spacing: -.2px; color: var(--t1); }
.se-nr {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 800 13px/1 var(--sans); color: var(--nr-txt); background: var(--nr);
}
.se-krok p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--t2); }
@media (max-width: 400px) {
  .se-krok { flex-direction: column; align-items: flex-start; }
  .se-ilu { flex-basis: auto; width: 120px; height: 120px; align-self: center; }
}

.se-koniec h2 { margin: 0 0 4px; font: 800 16.5px/1.25 var(--sans); color: var(--t1); }
.se-koniec p { margin: 0; font-size: 14px; color: var(--t2); }
.se-stopa { margin: 18px 0 0; text-align: center; font-size: 13.5px; }
.se-stopa a { color: var(--link); font-weight: 700; text-decoration: none; }
.se-stopa a:hover, .se-stopa a:focus-visible { text-decoration: underline; }