/* Święto Kapitalizmu 2027 – hub i podstrony wydarzeń
   Uzupełnia style.css (Tailwind, prekompilowany) i temporary.css (thematic-block). */

:root {
  --sk-orange: #ff5722;
  --sk-orange-dark: #d84315;
  --sk-black: #000;
  --sk-gray: #eceff1;
  --sk-line: #263238;
}

/* Znacznik treści do uzupełnienia */
.sk-todo {
  display: inline-block;
  background: #ffe600;
  color: #000;
  font-family: pragmatica-extended, sans-serif;
  font-size: .8em;
  font-weight: 500;
  padding: .1em .5em;
  border-radius: 4px;
  outline: 2px dashed #000;
  outline-offset: 1px;
}

.sk27-kicker {
  font-family: pragmatica-extended, sans-serif;
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
.sk27-kicker--orange { color: var(--sk-orange); opacity: 1; }

/* HERO */
.sk27-hero { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .sk27-hero { padding-top: 7rem; padding-bottom: 7rem; } }

.sk27-hero__title {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -3px;
  margin-top: .5rem;
}
@media (min-width: 768px) { .sk27-hero__title { font-size: 160px; letter-spacing: -6px; } }
.sk27-hero__title--event { font-size: 56px; letter-spacing: -2px; margin-top: 1.5rem; }
@media (min-width: 768px) { .sk27-hero__title--event { font-size: 120px; letter-spacing: -5px; } }

.sk27-hero__lead {
  font-family: pragmatica-extended, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 720px;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .sk27-hero__lead { font-size: 1.25rem; } }

.sk27-hero__year {
  position: absolute;
  right: -2vw;
  bottom: -6vw;
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 34vw;
  line-height: 1;
  letter-spacing: -1vw;
  color: transparent;
  -webkit-text-stroke: 2px var(--sk-orange);
  opacity: .35;
  pointer-events: none;
  user-select: none;
}

.sk27-back {
  display: inline-block;
  width: 100%;
  font-family: pragmatica-extended, sans-serif;
  font-size: .875rem;
  opacity: .7;
  transition: opacity .2s;
}
.sk27-back:hover { opacity: 1; color: var(--sk-orange); }

.sk27-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--sk-line);
  border: 1px solid var(--sk-line);
  border-radius: .5rem;
  overflow: hidden;
  max-width: 960px;
}
@media (min-width: 1024px) { .sk27-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sk27-facts > div { background: #000; padding: 1rem 1.25rem; }
.sk27-facts dt,
.sk27-meta dt {
  font-family: pragmatica-extended, sans-serif;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .6;
}
.sk27-facts dd {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: .25rem;
}

/* HUB – siatka wydarzeń */
.sk27-events {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .sk27-events { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  /* thematic-block w temporary.css używa subgrid po 4 wiersze – tu mamy własny układ */
  .sk27-events .thematic-block { display: flex; grid-row: auto; }
  /* karty wydarzeń: wspólne wiersze (nagłówek, opis, meta, link) – linie nad „Termin” na jednym poziomie */
  .sk27-events .sk27-event { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .sk27-events .sk27-event .sk27-meta { margin-top: 0; align-self: start; }
  .sk27-events .sk27-event .thematic-block__link { align-self: end; }
}
.sk27-event { border: 1px solid var(--sk-gray); }
.sk27-event--soon { background: #fafafa; }
.sk27-event--soon .thematic-block__deco:not(.thematic-block__deco--wealth) { opacity: .5; }

.sk27-event__name {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -1px;
}
.sk27-event--soon .sk27-event__name { color: #90a4ae; }

.sk27-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  border-top: 1px solid #000;
  padding-top: 1.25rem;
  margin-top: auto;
}
.sk27-meta dd {
  font-family: pragmatica-extended, sans-serif;
  font-weight: 500;
  margin-top: .15rem;
}
.sk27-meta--dark { border-top-color: var(--sk-line); }

.sk27-soon {
  font-family: pragmatica-extended, sans-serif;
  font-weight: 700;
  color: #90a4ae;
}

.sk27-conf {
  background: #000;
  border: 1px solid var(--sk-orange);
}
@media (min-width: 1024px) { .sk27-conf { grid-column: 1 / -1; } }
.sk27-conf__title {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -1.5px;
}
@media (min-width: 768px) { .sk27-conf__title { font-size: 4rem; letter-spacing: -3px; } }
.sk27-conf__bg {
  position: absolute;
  right: -1rem;
  bottom: -4rem;
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 22rem;
  line-height: 1;
  color: var(--sk-orange);
  opacity: .12;
  pointer-events: none;
}

/* Kroki (hub) i narzędzia (health) */
.sk27-steps,
.sk27-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--sk-line);
  border: 1px solid var(--sk-line);
  border-radius: .5rem;
  overflow: hidden;
}
@media (min-width: 768px) { .sk27-steps, .sk27-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sk27-steps, .sk27-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sk27-step, .sk27-tool { background: #000; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.sk27-step__no, .sk27-tool__no {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--sk-orange);
}
.sk27-step h3, .sk27-tool h3 {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -1px;
}
.sk27-step p, .sk27-tool p { font-weight: 300; font-size: .95rem; line-height: 1.6; opacity: .85; }

/* Dla kogo */
.sk27-pains {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .sk27-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sk27-pains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sk27-pain {
  background: var(--sk-gray);
  border-radius: .5rem;
  padding: 1.5rem 1.5rem 1.5rem 3.25rem;
  position: relative;
  font-family: pragmatica-extended, sans-serif;
  font-weight: 500;
  line-height: 1.5;
}
.sk27-pain::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1.85rem;
  width: 10px;
  height: 10px;
  background: var(--sk-orange);
  transform: rotate(45deg);
}
.sk27-lead-dark {
  font-family: pragmatica-extended, sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 820px;
}
@media (min-width: 768px) { .sk27-lead-dark { font-size: 1.35rem; } }

/* Prowadzący */
.sk27-hosts { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .sk27-hosts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sk27-host { display: flex; flex-direction: column; gap: 1.25rem; }
.sk27-host__photo {
  aspect-ratio: 4 / 5;
  border-radius: .5rem;
  background: linear-gradient(160deg, #263238, #000);
  position: relative;
  overflow: hidden;
}
img.sk27-host__photo { display: block; width: 100%; height: auto; object-fit: cover; background: #f5f5f5; }
img.sk27-host__photo::after { content: none; }
.sk27-host__photo::after {
  content: "Zdjęcie";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: pragmatica-extended, sans-serif; font-size: .8rem; color: #90a4ae;
}
.sk27-host h3 { font-family: termina, sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: -1px; }
.sk27-host__role { font-family: pragmatica-extended, sans-serif; color: var(--sk-orange); font-weight: 500; margin: .25rem 0 .75rem; }
.sk27-host p:last-child { font-weight: 300; line-height: 1.6; }

/* Program */
.sk27-program { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .sk27-program { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sk27-day { background: #fff; border-radius: .5rem; padding: 1.5rem; }
@media (min-width: 768px) { .sk27-day { padding: 2rem; } }
.sk27-day__title {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -1px;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--sk-orange);
}
.sk27-day__list li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--sk-gray);
}
.sk27-day__list li:last-child { border-bottom: 0; }
.sk27-day__time { font-family: termina, sans-serif; font-weight: 700; font-size: .9rem; color: var(--sk-orange); padding-top: .1rem; }
.sk27-day__time small { display: block; font-size: .75rem; font-weight: 400; color: #78909c; }
.sk27-day__hours { display: block; font-family: pragmatica-extended, sans-serif; font-weight: 400; font-size: .9rem; letter-spacing: 0; color: #78909c; margin-top: .25rem; }
.sk27-day__item { font-family: pragmatica-extended, sans-serif; font-weight: 500; }
.sk27-day__desc { font-weight: 300; font-size: .9rem; line-height: 1.5; margin-top: .2rem; color: #455a64; }

/* Wersja firmowa */
.sk27-company { background: var(--sk-orange); color: #fff; }
.sk27-company .sk27-kicker--orange { color: #000; }
.sk27-company .button--primary { background: #000; border-color: #000; }
.sk27-company .button--primary:hover { background: #263238; border-color: #263238; }
.sk27-company__title {
  font-family: termina, sans-serif;
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: -1px;
}
@media (min-width: 768px) { .sk27-company__title { font-size: 2.75rem; letter-spacing: -2px; } }

/* Cena */
.sk27-price { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .sk27-price { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; } }
.sk27-price__card { background: #fff; color: #000; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .sk27-price__card { padding: 2.5rem; } }
.sk27-price__label { font-family: pragmatica-extended, sans-serif; font-weight: 500; color: var(--sk-orange); }
.sk27-price__value { font-family: termina, sans-serif; font-weight: 700; font-size: 3.5rem; line-height: 1; letter-spacing: -2px; }
.sk27-price__note { font-size: .875rem; color: #607d8b; margin-top: -.5rem; }
.sk27-price__list { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 0; border-top: 1px solid var(--sk-gray); border-bottom: 1px solid var(--sk-gray); }
.sk27-price__list li { position: relative; padding-left: 1.75rem; font-weight: 300; }
.sk27-price__list li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 12px; height: 7px;
  border-left: 2px solid var(--sk-orange); border-bottom: 2px solid var(--sk-orange);
  transform: rotate(-45deg);
}
.sk27-price__excl { font-size: .875rem; color: #607d8b; }

.sk27-contra h3 { font-family: termina, sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -1px; margin-bottom: 1rem; }
.sk27-contra p { font-weight: 300; line-height: 1.6; opacity: .85; }
.sk27-contra ul { margin: 1rem 0; display: flex; flex-direction: column; gap: .4rem; }
.sk27-contra li { position: relative; padding-left: 1.25rem; font-weight: 300; }
.sk27-contra li::before { content: "–"; position: absolute; left: 0; color: var(--sk-orange); }

/* FAQ */
.sk27-faq { display: flex; flex-direction: column; border-top: 1px solid #000; max-width: 960px; }
.sk27-faq__item { border-bottom: 1px solid #000; }
.sk27-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-family: pragmatica-extended, sans-serif;
  font-weight: 500;
  font-size: 1rem;
}
@media (min-width: 768px) { .sk27-faq__item summary { font-size: 1.15rem; } }
.sk27-faq__item summary::-webkit-details-marker { display: none; }
.sk27-faq__item summary::after {
  content: "+";
  position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%);
  font-family: termina, sans-serif; font-size: 1.5rem; color: var(--sk-orange);
  transition: transform .2s;
}
.sk27-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sk27-faq__item p { padding: 0 2.5rem 1.5rem 0; font-weight: 300; line-height: 1.6; }

/* ---- Powiadom mnie: przycisk w karcie + popup ---- */
.sk27-notify-btn { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.sk27-modal-open, .sk27-modal-open body { overflow: hidden; }
.sk27-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .2s ease; }
.sk27-modal.is-open { opacity: 1; }
.sk27-modal[hidden] { display: none; }
.sk27-modal__bg { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(16px); }
.sk27-modal__box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: #000; border-radius: 12px; padding: 32px 24px 28px; transform: translateY(12px); transition: transform .2s ease; }
.sk27-modal.is-open .sk27-modal__box { transform: none; }
@media (min-width: 768px) { .sk27-modal__box { padding: 48px 40px 40px; } }
.sk27-modal__close { position: absolute; top: 10px; right: 14px; width: 40px; height: 40px; border: 0; background: none; font-size: 32px; line-height: 1; cursor: pointer; color: #000; }
.sk27-modal__title { font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.5px; margin: 8px 0 12px; }
@media (min-width: 768px) { .sk27-modal__title { font-size: 36px; } }
.sk27-modal__lead { font-weight: 300; font-size: 15px; line-height: 1.5; margin-bottom: 24px; }
.sk27-modal__form { display: flex; flex-direction: column; gap: 16px; }
.sk27-modal__done { display: flex; flex-direction: column; align-items: flex-start; }
.sk27-modal__done[hidden], .sk27-modal__body[hidden] { display: none; }
.sk27-modal__status { color: #d32f2f; font-size: 14px; min-height: 1em; }
.sk27-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sk27-field > label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.sk27-field input[type=text] { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #cfd8dc; border-radius: 8px; font-size: 16px; background: #fff; color: #000; }
.sk27-field input[type=text]:focus { outline: none; border-color: #000; }
.sk27-field.has-error input[type=text] { border-color: #d32f2f; }
.sk27-field__error { color: #d32f2f; font-size: 12px; margin-top: 4px; }
.sk27-field__error:empty { display: none; }

/* Wideo w tle hero (landing Kapitał: Zdrowie, home v2) */
.sk-hero-video { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sk-hero-video video { width: 100%; height: 100%; object-fit: cover; }
.sk-hero-video__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
@media (prefers-reduced-motion: reduce) { .sk-hero-video video { display: none; } }

/* 5 narzędzi na landingu Health */
@media (min-width: 1280px) { .sk27-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sk27-tool { padding: 1.75rem; }

/* HOME v2 – hero z odliczaniem */
.skh2-hero { min-height: calc(100svh - 60px); display: flex; align-items: center; padding-top: 4rem; padding-bottom: 4rem; }
.skh2-countdown { display: flex; gap: .5rem; margin-top: 2rem; }
@media (min-width: 768px) { .skh2-countdown { gap: 1rem; margin-top: 2.5rem; } }
.skh2-countdown > div { min-width: 72px; padding: .9rem .75rem; border: 1px solid rgba(255,255,255,.25); border-radius: .5rem; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); text-align: center; }
@media (min-width: 768px) { .skh2-countdown > div { min-width: 104px; padding: 1.1rem 1rem; } }
.skh2-countdown b { display: block; font-family: termina, sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1; }
@media (min-width: 768px) { .skh2-countdown b { font-size: 2.75rem; } }
.skh2-countdown span { display: block; font-family: pragmatica-extended, sans-serif; font-size: .75rem; opacity: .75; margin-top: .4rem; }
.skh2-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-family: pragmatica-extended, sans-serif; font-size: .95rem; }
.skh2-meta strong { color: var(--sk-orange); font-weight: 500; }

/* Fakty w hero bez czarnego tła (wideo prześwituje), linie podziału zostają */
.sk27-facts { background: transparent; gap: 0; }
.sk27-facts > div { background: transparent; box-shadow: inset -1px -1px 0 var(--sk-line); }