/* ============================================================
   SYSTEM ARTYKUŁÓW — kolor wiodący #830825
   Helix Ultimate / Joomla 5–6
   ------------------------------------------------------------
   Gdzie wkleić (jedna z dwóch opcji):
   1) Szablon → Opcje → Custom Code → Custom CSS
   2) media/templates/site/shaper_helixultimate/css/custom.css
      (Joomla 5/6; w Joomla 3 było templates/shaper_helixultimate/custom.css)

   Zasady:
   • Wszystko działa TYLKO wewnątrz pojemnika z klasą "art" —
     nic nie wycieka na resztę strony.
   • Brak deklaracji font-family — krój dziedziczy się z ustawień
     Helixa, więc artykuły zawsze pasują do reszty serwisu.
   • Jeden motyw (jasny), bez prefers-color-scheme — artykuł nigdy
     nie zmieni się w ciemny na jasnej stronie.
   ============================================================ */

/* ---------- 1. ZMIENNE ---------- */

.art {
  --art-primary: #830825;
  --art-primary-dark: #5A0619;
  --art-primary-tint: #F3E2E5;
  --art-gold: #A8873E;

  --art-ink: #1C1113;
  --art-muted: #6F5C60;
  --art-rule: #E2D5D4;
  --art-ground: #F7F2F0;
  --art-surface: #FFFFFF;
  --art-on-primary: #FBF3F0;
  --art-on-primary-dim: #E6C2C9;

  --art-max: 60rem;              /* szerokość kolumny treści */
  --art-pad: clamp(1rem, 4vw, 2.5rem);
}

/* Wariant kolorystyczny dla pojedynczego artykułu — nadpisz zmienne
   w atrybucie style pojemnika .art, np.:
   style="--art-primary:#1B4332; --art-primary-dark:#0E2A1E; --art-primary-tint:#E1EDE7;" */


/* ---------- 2. SZKIELET ---------- */

.art {
  color: var(--art-ink);
  background: var(--art-ground);
  font-size: 1.125rem;
  line-height: 1.6;
}
.art *,
.art *::before,
.art *::after { box-sizing: border-box; }

.art p { margin: 0 0 1.25rem; }
.art p:last-child { margin-bottom: 0; }
.art a { color: var(--art-primary); }
.art :focus-visible { outline: 3px solid var(--art-gold); outline-offset: 3px; }
.art img { max-width: 100%; height: auto; }

/* Kolumna treści — każda sekcja dostaje własny .art-wrap */
.art .art-wrap {
  max-width: var(--art-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--art-pad);
  padding-right: var(--art-pad);
}

/* Sekcja z linią oddzielającą */
.art .art-section {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--art-rule);
}
.art .art-section:last-child { border-bottom: 0; }

/* Sekcja na tle w kolorze wiodącym (jasny odcień) */
.art .art-section-tint { background: var(--art-primary-tint); }


/* ---------- 3. NAGŁÓWEK ARTYKUŁU ---------- */

.art .art-hero {
  background-image: linear-gradient(160deg, var(--art-primary) 0%, var(--art-primary-dark) 100%);
  color: var(--art-on-primary);
  border-bottom: 4px solid var(--art-gold);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.art .art-hero-kicker {
  margin: 0 0 1rem;
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-on-primary-dim);
}
.art .art-hero-title {
  margin: 0;
  font-size: clamp(1.75rem, 1.1rem + 3.2vw, 4rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: inherit;
}
/* podtytuł w nagłówku — .art-hero-sub; goły span działa jak wcześniej */
.art .art-hero-sub,
.art .art-hero-title span {
  display: block;
  margin-top: 0.75rem;
  font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--art-on-primary-dim);
}


/* ---------- 4. TYPOGRAFIA ---------- */

/* Nadnagłówek ze złotą kreską */
.art .art-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-primary);
}
.art .art-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--art-gold);
  opacity: 0.65;
}

.art .art-h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--art-ink);
}
.art .art-h3 {
  margin: 2rem 0 0.75rem;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--art-ink);
}
.art .art-lead {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--art-muted);
  max-width: 40em;
}
.art .art-note {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--art-muted);
}
.art .art-quote {
  margin: 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--art-primary);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  font-weight: 600;
}
.art .art-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--art-muted);
}


/* ---------- 5. LISTA WYPUNKTOWANA (romb) ---------- */

.art .art-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.art .art-bullets li {
  position: relative;
  padding: 1rem 0 1rem 2.25rem;
  border-top: 1px solid var(--art-rule);
  font-size: 1.125rem;
}
.art .art-bullets li:first-child { border-top: 0; }
.art .art-bullets li::before {
  content: "";
  position: absolute;
  left: 0.375rem;
  top: 1.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--art-primary);
  transform: rotate(45deg);
}
/* wariant bez linii */
.art .art-bullets-plain li { border-top: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.art .art-bullets-plain li::before { top: 1rem; }


/* ---------- 6. KARTY (godziny, fakty, wyróżniki) ---------- */

.art .art-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.art .art-cards-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.art .art-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.5rem 1.375rem;
  background: var(--art-surface);
  border: 1px solid var(--art-rule);
  border-top: 5px solid var(--art-primary);
}
.art .art-card-eyebrow {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--art-muted);
}
.art .art-card-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.art .art-card-big {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--art-primary);
  font-variant-numeric: tabular-nums;
}
.art .art-card p { margin: 0; }


/* ---------- 7. TABELA / CENNIK ---------- */

.art .art-table {
  background: var(--art-surface);
  border: 1px solid var(--art-rule);
}
.art .art-table-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--art-primary);
  color: var(--art-on-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.art .art-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.0625rem 1.5rem;
  border-top: 1px solid var(--art-rule);
}
.art .art-table-head + .art-row { border-top: 0; }
.art .art-row-name {
  font-size: 1.125rem;
  font-weight: 600;
}
.art .art-row-name small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--art-muted);
}
.art .art-row-value {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--art-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.art .art-row-value small {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--art-muted);
}
/* wyróżniony wiersz */
.art .art-row-mark { background: var(--art-primary-tint); }

/* zwykła tabela HTML, gdyby była potrzebna */
.art .art-scroll { overflow-x: auto; }
.art .art-scroll table { width: 100%; border-collapse: collapse; }
.art .art-scroll th,
.art .art-scroll td { padding: 0.875rem 1rem; border-top: 1px solid var(--art-rule); text-align: left; }
.art .art-scroll th { background: var(--art-primary); color: var(--art-on-primary); border-top: 0; }


/* ---------- 8. PASEK Z WYRÓŻNIONĄ WARTOŚCIĄ ---------- */

.art .art-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--art-primary);
  color: var(--art-on-primary);
}
.art .art-strip-text {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
}
/* doprecyzowanie w pasku — .art-strip-sub; goły span działa jak wcześniej */
.art .art-strip-sub,
.art .art-strip-text span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.7em;
  font-weight: 400;
  line-height: 1.4;
  color: var(--art-on-primary-dim);
}
.art .art-strip-value {
  margin: 0;
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}


/* ---------- 9. RAMKA INFORMACYJNA ---------- */

.art .art-callout {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--art-surface);
  border: 1px solid var(--art-rule);
  border-left: 5px solid var(--art-gold);
}
.art .art-callout-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}


/* ---------- 10. PRZYCISKI I ETYKIETY ---------- */

.art .art-btn,
.art .art-btn-ghost {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid var(--art-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.art .art-btn { background: var(--art-primary); color: var(--art-on-primary); }
.art .art-btn:hover,
.art .art-btn:focus { background: var(--art-primary-dark); border-color: var(--art-primary-dark); color: var(--art-on-primary); }
.art .art-btn-ghost { background: transparent; color: var(--art-primary); }
.art .art-btn-ghost:hover,
.art .art-btn-ghost:focus { background: var(--art-primary); color: var(--art-on-primary); }

.art .art-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--art-primary-tint);
  color: var(--art-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.art .art-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }


/* ---------- 11. STOPKA ARTYKUŁU ---------- */

.art .art-foot {
  padding-top: 2rem;
  padding-bottom: 2.75rem;
  font-size: 1rem;
  color: var(--art-muted);
}
.art .art-foot strong { color: var(--art-ink); font-weight: 700; }


/* ---------- 12. DROBIAZGI ---------- */

/* Mapa / osadzona ramka — responsywna wysokość i ramka systemu.
   Użycie: div class="art-map" z pojedynczym iframe w środku. */
.art-map {
  border: 1px solid var(--art-rule, #E2D5D4);
  background: #EDE7E4;
  line-height: 0;
}
.art-map iframe {
  display: block;
  width: 100%;
  height: clamp(15rem, 40vw, 28rem);
  border: 0;
}

/* Podniesienie elementu w górę (np. modułu wstawionego przez
   {loadmoduleid X}). Działa też poza pojemnikiem .art.
   Użycie:
   div class="art-pull" style="--art-pull:100px; --art-pull-mobile:40px;" */
.art-pull {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--art-pull, 100px));
}
@media (max-width: 767px) {
  .art-pull { margin-top: calc(-1 * var(--art-pull-mobile, 40px)); }
}

.art .art-center { text-align: center; }
.art .art-center .art-label::after,
.art .art-center .art-label::before { display: none; }
.art .art-tight { margin-bottom: 0.5rem; }
.art .art-cols { columns: 2; column-gap: 2.5rem; }


/* ---------- 13. MAŁE EKRANY ---------- */

@media (max-width: 30rem) {
  .art { font-size: 1.0625rem; }
  .art .art-row { flex-direction: column; gap: 0.25rem; }
  .art .art-table-head { font-size: 0.75rem; }
  .art .art-cols { columns: 1; }
}


/* ---------- 14. WYDRUK ---------- */

@media print {
  .art { background: #FFF; font-size: 11pt; }
  .art .art-hero,
  .art .art-strip,
  .art .art-table-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .art .art-section { break-inside: avoid; }
}