/* energii.pl, strona główna: wzór C "Doba" 1:1 (desktop 1440 / telefon 390). CSP bez stylów w atrybutach:
   wysokości słupków i położenie ramki wyłączenia przez klasy (sl-N, ok-od-N, ok-dl-N) wygenerowane na końcu pliku. */
.s-hub .stopka { margin-top: 0; }
.h-hero { background: var(--serwis-tlo); color: var(--serwis-tekst); }
.h-hero-w { padding-top: 48px; padding-bottom: 56px; }
.h-glowa { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; }
.h-glowa h1 { flex: 999 1 620px; min-width: 0; margin: 0; font-weight: 900; font-size: 84px; line-height: 0.95; letter-spacing: -0.035em; }
.h-wstep { flex: 1 1 360px; min-width: 0; margin: 0; font-size: 19px; color: var(--tusz-2); }
.h-wstep-tel { display: none; }

.h-doba { margin: 40px 0 0; background: var(--grunt); border-radius: 24px; padding: 24px 28px 20px; }
.h-doba-g { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.h-doba-t { font-weight: 800; font-size: 18px; }
.h-legenda { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-family: var(--font-liczby); font-size: 13px; }
.h-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--tusz); }
a.h-leg { text-decoration: none; }
a.h-leg:hover { text-decoration: underline; color: var(--akcent); }
.h-kw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.h-kw-naj { background: var(--koral); }
.h-kw-wyl { border: 2px dashed var(--tusz); }
.h-pigulka { background: var(--tusz); color: #FFFFFF; padding: 3px 8px; border-radius: 999px; }
.h-slupki { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: 150px; gap: 6px; align-items: end; height: 150px; }
.h-n-23 { grid-template-columns: repeat(23, minmax(0, 1fr)); }
.h-n-25 { grid-template-columns: repeat(25, minmax(0, 1fr)); }
.h-sl { background: var(--slupek); border-radius: 6px 6px 2px 2px; min-height: 4px; }
.h-sl-naj { background: var(--koral); }
.h-okno { position: absolute; grid-row: 1; top: -6px; bottom: -6px; left: -3px; right: -3px; border: 2px dashed var(--tusz); border-radius: 10px; pointer-events: none; }
.h-os { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; font-family: var(--font-liczby); font-size: 13px; color: var(--szary); }
.h-os-tel { display: none; }
.h-zrodlo { margin: 14px 0 0; font-family: var(--font-liczby); font-size: 12px; line-height: 1.5; color: var(--szary); }
.h-zrodlo a { color: var(--szary); }
.h-zrodlo .h-zrodlo-l { color: var(--tusz); font-weight: 600; white-space: nowrap; }
.h-zrodlo .h-zrodlo-l::after { content: " \2192"; }
.h-zr-t { display: none; }

.h-serwisy { padding-top: 56px; padding-bottom: 24px; }
.h-mag { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; background: var(--serwis-tlo); color: var(--serwis-tekst); border-radius: 28px; padding: 36px 40px; text-decoration: none; }
.h-mag:hover { color: var(--serwis-tekst); }
.h-mag-l { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.h-mag-host { font-family: var(--font-liczby); font-size: 14px; color: #C9C4F2; }
.h-mag-t { font-weight: 900; font-size: 44px; line-height: 1.02; letter-spacing: -0.03em; }
.h-mag-o { font-size: 18px; color: #DAD7F5; }
.h-mag-o-tel { display: none; }
.h-mag-p { flex: 0 1 auto; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.h-mag-k { font-weight: 900; font-size: 76px; line-height: 0.9; letter-spacing: -0.04em; color: var(--serwis); white-space: nowrap; }
.h-mag-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--koral); color: var(--tusz); font-weight: 800; font-size: 17px; padding: 15px 22px; border-radius: 999px; }
.h-strz { width: 18px; height: 18px; }
.h-mag:hover .h-mag-cta { filter: brightness(1.06); }

.h-kafle { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.h-kafel { display: flex; gap: 20px; align-items: flex-start; border: 1.5px solid var(--linia); border-radius: 24px; padding: 28px; text-decoration: none; color: var(--tusz); background: var(--grunt); min-width: 0; }
.h-kafel:hover { color: var(--tusz); border-color: var(--tusz); }
.h-ik { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; background: var(--grunt-2); color: var(--tusz); display: flex; align-items: center; justify-content: center; }
.h-ik svg { width: 28px; height: 28px; }
.h-kafel-tr { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h-kafel-t { font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; }
.h-kafel-o { font-size: 16px; color: var(--tusz-2); }
.h-kafel-o-tel { display: none; }
.h-kafel-host { font-family: var(--font-liczby); font-size: 13px; color: var(--szary); }
/* plansze z kolorem serwisu (wzór A): Dotacje zielona, Świadectwa fioletowa, Oszczędność morska */
.h-kafel-kolor { background: var(--serwis-tlo); border-color: var(--serwis-tlo); color: var(--serwis-tekst); }
.h-kafel-kolor:hover { border-color: var(--serwis); color: var(--serwis-tekst); }
.h-kafel-kolor .h-ik { background: var(--grunt); color: var(--serwis); }
.h-kafel-kolor .h-kafel-host { color: var(--serwis); }
/* nieparzysta liczba plansz (np. 5 z Oszczędnością): ostatnia na całą szerokość */
.h-kafel:last-child:nth-child(odd) { grid-column: 1 / -1; }

.h-elektrik { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; background: var(--serwis-tlo); color: var(--serwis-tekst); border-radius: 24px; padding: 26px 32px; text-decoration: none; }
.h-elektrik:hover { color: var(--serwis-tekst); }
.h-el-tr { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.h-el-t { font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; }
.h-el-o { font-size: 16px; color: var(--elektrik-tekst-2); }
.h-el-o-tel { display: none; }
.h-el-cta { background: var(--serwis); color: #FFFFFF; font-weight: 800; padding: 14px 20px; border-radius: 999px; }
.h-elektrik:hover .h-el-cta { filter: brightness(1.08); }

@media (max-width: 1100px) {
  .h-glowa h1 { font-size: clamp(46px, 7.4vw, 84px); }
  .h-mag-t { font-size: clamp(27px, 3.8vw, 44px); }
  .h-mag-k { font-size: clamp(48px, 6.6vw, 76px); }
}
@media (max-width: 759px) {
  .h-hero-w { padding-top: 0; padding-bottom: 28px; }
  .h-glowa { display: block; }
  .h-glowa h1 { margin: 20px 0 0; font-size: 46px; line-height: 0.98; letter-spacing: -0.03em; }
  .h-wstep { margin: 12px 0 0; font-size: 16px; }
  .h-wstep-desk { display: none; }
  .h-wstep-tel { display: block; }
  .h-doba { margin-top: 20px; border-radius: 18px; padding: 16px; }
  .h-doba-g { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; }
  .h-doba-t { font-size: 16px; }
  .h-legenda { gap: 8px; font-size: 12px; }
  .h-kw { width: 10px; height: 10px; border-radius: 2px; }
  .h-pigulka { padding: 2px 7px; }
  .h-leg-wyl, .h-okno { display: none; }
  .h-slupki { grid-template-rows: 90px; gap: 3px; height: 90px; }
  .h-sl { border-radius: 3px; min-height: 3px; }
  .h-os { display: none; }
  .h-os-tel { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-liczby); font-size: 11px; color: var(--szary); }
  .h-zrodlo { font-size: 11px; margin-top: 10px; }
  .h-zr-d { display: none; }
  .h-zr-t { display: inline; }

  .h-serwisy { padding-top: 20px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 12px; }
  .h-mag { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; border-radius: 22px; padding: 22px; }
  .h-mag-l, .h-mag-p { display: contents; }
  .h-mag-host { font-size: 12px; }
  .h-mag-t { font-size: 27px; line-height: 1.05; letter-spacing: -0.02em; }
  .h-mag-k { font-size: 48px; line-height: 0.92; }
  .h-mag-o { font-size: 15px; }
  .h-mag-o-desk { display: none; }
  .h-mag-o-tel { display: block; }
  .h-mag-cta { align-self: flex-start; padding: 13px 18px; font-size: 16px; }
  .h-mag-cta .h-strz { display: none; }
  .h-kafle { margin-top: 0; display: flex; flex-direction: column; gap: 12px; }
  .h-kafel { gap: 14px; border-radius: 20px; padding: 18px; }
  .h-ik { width: 44px; height: 44px; border-radius: 12px; }
  .h-ik svg { width: 22px; height: 22px; }
  .h-kafel-tr { gap: 2px; }
  .h-kafel-t { font-size: 20px; letter-spacing: 0; }
  .h-kafel-o { font-size: 15px; }
  .h-kafel-o-desk, .h-kafel-host { display: none; }
  .h-kafel-o-tel { display: block; }
  .h-elektrik { margin-top: 0; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 8px; border-radius: 20px; padding: 20px; }
  .h-el-t { font-size: 20px; letter-spacing: 0; }
  .h-el-o { font-size: 15px; }
  .h-el-o-desk { display: none; }
  .h-el-o-tel { display: block; }
  .h-el-cta { padding: 12px 16px; }
}
/* wysokości słupków (procent wysokości wykresu) */
.sl-0 { height: 0%; }
.sl-1 { height: 1%; }
.sl-2 { height: 2%; }
.sl-3 { height: 3%; }
.sl-4 { height: 4%; }
.sl-5 { height: 5%; }
.sl-6 { height: 6%; }
.sl-7 { height: 7%; }
.sl-8 { height: 8%; }
.sl-9 { height: 9%; }
.sl-10 { height: 10%; }
.sl-11 { height: 11%; }
.sl-12 { height: 12%; }
.sl-13 { height: 13%; }
.sl-14 { height: 14%; }
.sl-15 { height: 15%; }
.sl-16 { height: 16%; }
.sl-17 { height: 17%; }
.sl-18 { height: 18%; }
.sl-19 { height: 19%; }
.sl-20 { height: 20%; }
.sl-21 { height: 21%; }
.sl-22 { height: 22%; }
.sl-23 { height: 23%; }
.sl-24 { height: 24%; }
.sl-25 { height: 25%; }
.sl-26 { height: 26%; }
.sl-27 { height: 27%; }
.sl-28 { height: 28%; }
.sl-29 { height: 29%; }
.sl-30 { height: 30%; }
.sl-31 { height: 31%; }
.sl-32 { height: 32%; }
.sl-33 { height: 33%; }
.sl-34 { height: 34%; }
.sl-35 { height: 35%; }
.sl-36 { height: 36%; }
.sl-37 { height: 37%; }
.sl-38 { height: 38%; }
.sl-39 { height: 39%; }
.sl-40 { height: 40%; }
.sl-41 { height: 41%; }
.sl-42 { height: 42%; }
.sl-43 { height: 43%; }
.sl-44 { height: 44%; }
.sl-45 { height: 45%; }
.sl-46 { height: 46%; }
.sl-47 { height: 47%; }
.sl-48 { height: 48%; }
.sl-49 { height: 49%; }
.sl-50 { height: 50%; }
.sl-51 { height: 51%; }
.sl-52 { height: 52%; }
.sl-53 { height: 53%; }
.sl-54 { height: 54%; }
.sl-55 { height: 55%; }
.sl-56 { height: 56%; }
.sl-57 { height: 57%; }
.sl-58 { height: 58%; }
.sl-59 { height: 59%; }
.sl-60 { height: 60%; }
.sl-61 { height: 61%; }
.sl-62 { height: 62%; }
.sl-63 { height: 63%; }
.sl-64 { height: 64%; }
.sl-65 { height: 65%; }
.sl-66 { height: 66%; }
.sl-67 { height: 67%; }
.sl-68 { height: 68%; }
.sl-69 { height: 69%; }
.sl-70 { height: 70%; }
.sl-71 { height: 71%; }
.sl-72 { height: 72%; }
.sl-73 { height: 73%; }
.sl-74 { height: 74%; }
.sl-75 { height: 75%; }
.sl-76 { height: 76%; }
.sl-77 { height: 77%; }
.sl-78 { height: 78%; }
.sl-79 { height: 79%; }
.sl-80 { height: 80%; }
.sl-81 { height: 81%; }
.sl-82 { height: 82%; }
.sl-83 { height: 83%; }
.sl-84 { height: 84%; }
.sl-85 { height: 85%; }
.sl-86 { height: 86%; }
.sl-87 { height: 87%; }
.sl-88 { height: 88%; }
.sl-89 { height: 89%; }
.sl-90 { height: 90%; }
.sl-91 { height: 91%; }
.sl-92 { height: 92%; }
.sl-93 { height: 93%; }
.sl-94 { height: 94%; }
.sl-95 { height: 95%; }
.sl-96 { height: 96%; }
.sl-97 { height: 97%; }
.sl-98 { height: 98%; }
.sl-99 { height: 99%; }
.sl-100 { height: 100%; }
/* ramka planowanego wyłączenia: początek (godzina) i długość (godziny) */
.ok-od-0 { grid-column-start: 1; }
.ok-od-1 { grid-column-start: 2; }
.ok-od-2 { grid-column-start: 3; }
.ok-od-3 { grid-column-start: 4; }
.ok-od-4 { grid-column-start: 5; }
.ok-od-5 { grid-column-start: 6; }
.ok-od-6 { grid-column-start: 7; }
.ok-od-7 { grid-column-start: 8; }
.ok-od-8 { grid-column-start: 9; }
.ok-od-9 { grid-column-start: 10; }
.ok-od-10 { grid-column-start: 11; }
.ok-od-11 { grid-column-start: 12; }
.ok-od-12 { grid-column-start: 13; }
.ok-od-13 { grid-column-start: 14; }
.ok-od-14 { grid-column-start: 15; }
.ok-od-15 { grid-column-start: 16; }
.ok-od-16 { grid-column-start: 17; }
.ok-od-17 { grid-column-start: 18; }
.ok-od-18 { grid-column-start: 19; }
.ok-od-19 { grid-column-start: 20; }
.ok-od-20 { grid-column-start: 21; }
.ok-od-21 { grid-column-start: 22; }
.ok-od-22 { grid-column-start: 23; }
.ok-od-23 { grid-column-start: 24; }
.ok-od-24 { grid-column-start: 25; }
.ok-dl-1 { grid-column-end: span 1; }
.ok-dl-2 { grid-column-end: span 2; }
.ok-dl-3 { grid-column-end: span 3; }
.ok-dl-4 { grid-column-end: span 4; }
.ok-dl-5 { grid-column-end: span 5; }
.ok-dl-6 { grid-column-end: span 6; }
.ok-dl-7 { grid-column-end: span 7; }
.ok-dl-8 { grid-column-end: span 8; }
.ok-dl-9 { grid-column-end: span 9; }
.ok-dl-10 { grid-column-end: span 10; }
.ok-dl-11 { grid-column-end: span 11; }
.ok-dl-12 { grid-column-end: span 12; }
.ok-dl-13 { grid-column-end: span 13; }
.ok-dl-14 { grid-column-end: span 14; }
.ok-dl-15 { grid-column-end: span 15; }
.ok-dl-16 { grid-column-end: span 16; }
.ok-dl-17 { grid-column-end: span 17; }
.ok-dl-18 { grid-column-end: span 18; }
.ok-dl-19 { grid-column-end: span 19; }
.ok-dl-20 { grid-column-end: span 20; }
.ok-dl-21 { grid-column-end: span 21; }
.ok-dl-22 { grid-column-end: span 22; }
.ok-dl-23 { grid-column-end: span 23; }
.ok-dl-24 { grid-column-end: span 24; }
.ok-dl-25 { grid-column-end: span 25; }