/* ==========================================================================
   Strona główna (index.php) - style tylko tej strony.
   Kolory, czcionki i promienie biorą się z tokenów w style.css
   (--color-*, --font-*, --border-radius*), więc działa jasny i ciemny motyw.

   Kształty: przyciski 0.75rem (jak w całym serwisie), karty 1.25rem,
   przełączniki filtrów (chipy) w pełni zaokrąglone.
   Na pomarańczowym tle tekst jest ciemny (--hp-ink): biały na #fc5200
   ma kontrast 3,3:1 i nie spełnia WCAG AA dla zwykłego tekstu, ciemny ma 5,2:1.
   ========================================================================== */

:root {
    --hp-ink: #17171b;          /* ciemny tekst na pomarańczowym tle, w obu motywach */
    --hp-ink-hover: #2c2c33;
    --hp-orange-deep: #e94c00;  /* koniec gradientu hero, patrz niżej */
    --hp-section-y: clamp(3.5rem, 2.75rem + 3vw, 6rem);
}

/* ── Hero ──────────────────────────────────────────────────────────── */
/* Gradient płytszy niż w style.css (#d94700): ciemny tekst ma na jego końcu
   4,7:1 zamiast 4,1:1, więc zwykły tekst spełnia AA na całej powierzchni */
.hp-hero.hero-section,
.hp-join {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--hp-orange-deep) 100%);
}
.hp-hero {
    color: var(--hp-ink);
    padding: clamp(2.5rem, 1.75rem + 3.5vw, 5rem) 0 clamp(5rem, 4rem + 3.5vw, 7.5rem);
}
/* Trasa w tle (SVG w index.php) zamiast kafla .hero-section::before ze style.css: ten sam rysunek
   (kreski 2,5 px co 20 px, biel 15%). W pętli: maska odsłania krzywą od lewej (kreski pojawiają się jedna
   po drugiej), krzywa chwilę zostaje, łagodnie znika i rysuje się od nowa; kolejne krzywe z opóźnieniem --d.
   Pauza, gdy hero jest poza ekranem (.is-paused z index.php); przy ograniczonym ruchu rysunek stoi cały. */
.hp-hero.hero-section::before { content: none; }
.hp-trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
}
.hp-trail-line {
    fill: none;
    stroke: #fff;
    stroke-width: 3.75;
    stroke-dasharray: 2.5 17.5;
    stroke-linecap: round;
}
.hp-trail-reveal {
    fill: none;
    stroke: #fff;
    stroke-width: 18;
    stroke-dasharray: 100 100;      /* pathLength="100": cała krzywa = 100 */
    stroke-dashoffset: 100;
    animation: hp-trail-loop 9s var(--d, 0s) infinite both;
}
/* 9 s: rysowanie 3,4 s, krzywa widoczna 2,2 s, zanikanie 2,2 s, przerwa 1,2 s */
@keyframes hp-trail-loop {
    0%   { stroke-dashoffset: 100; stroke-opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    38%  { stroke-dashoffset: 0;   stroke-opacity: 1; }
    62%  { stroke-dashoffset: 0;   stroke-opacity: 1; animation-timing-function: ease-in-out; }
    86%  { stroke-dashoffset: 0;   stroke-opacity: 0; }
    100% { stroke-dashoffset: 100; stroke-opacity: 0; }
}
.hp-trail.is-paused .hp-trail-reveal { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .hp-trail-reveal { animation: none; stroke-dashoffset: 0; stroke-opacity: 1; }
}
.hp-hero h1 {
    color: var(--hp-ink);
    font-size: clamp(2.2rem, 1.45rem + 2.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    max-width: 22ch;
    text-wrap: balance;
    margin-bottom: 1rem;
}
.hp-hero-lead {
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.5;
    max-width: 42ch;
    margin-bottom: 0;
}
.hp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}
.hp-actions .btn {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    white-space: nowrap;
}
.hp-btn-ink {
    background: var(--hp-ink);
    border: 2px solid var(--hp-ink);
    color: #fff;
}
.hp-btn-ink:hover, .hp-btn-ink:focus { background: var(--hp-ink-hover); border-color: var(--hp-ink-hover); color: #fff; }
.hp-btn-line {
    background: transparent;
    border: 2px solid var(--hp-ink);
    color: var(--hp-ink);
}
.hp-btn-line:hover, .hp-btn-line:focus { background: rgba(23, 23, 27, 0.08); border-color: var(--hp-ink); color: var(--hp-ink); }
@media (max-width: 575.98px) {
    .hp-actions .btn { flex: 1 1 100%; justify-content: center; }
}
.hp-hero .btn:active { transform: scale(0.98); }
.hp-hero .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: none; }

/* Zdjęcie autora: biała ramka jak odbitka, cień w odcieniu tła */
.hp-portrait {
    width: min(100%, 26rem);
    margin-left: auto;
}
.hp-portrait img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border: 6px solid #fff;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 28px 50px -22px rgba(110, 32, 0, 0.55);
    background: rgba(255, 255, 255, 0.2);
}

/* ── Pasek „W tym roku” (zachodzi na dół hero) ─────────────────────── */
.hp-stats {
    position: relative;
    z-index: 2;
    margin-top: -3.75rem;
}
.hp-stats-card {
    display: grid;
    gap: 1.25rem 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 22px 44px -26px rgba(70, 28, 4, 0.45);
    padding: 1.5rem;
}
.hp-stats-head { display: flex; flex-direction: column; gap: 0.5rem; }
.hp-stats-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}
.hp-stats-title i {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: 1.1rem;
}
.hp-link {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.hp-link:hover { color: var(--color-primary); }
.hp-stat-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}
.hp-stat-group--site {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}
.hp-stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.hp-stat-value small {
    font-size: 0.55em;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-left: 0.15em;
}
.hp-stat-label {
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--color-text-muted);
    margin-top: 0.4rem;
}
.hp-stat-group--site .hp-stat-value { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); }
/* Pod sumą łączną: wartość z bieżącego roku (tylko gdy się różni) */
.hp-stat-year {
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--color-text-muted);
    margin: 0.35rem 0 0;
}
.hp-stat-year strong { color: var(--color-text); font-weight: 600; white-space: nowrap; }

@media (min-width: 992px) {
    .hp-stats-card { padding: 1.75rem 2rem; align-items: center; }
    .hp-stats-card.has-activity.has-site { grid-template-columns: 12rem minmax(0, 1fr) auto; }
    .hp-stats-card.has-activity:not(.has-site) { grid-template-columns: 12rem minmax(0, 1fr); }
    .hp-stat-group--site {
        border-top: 0;
        padding-top: 0;
        border-left: 1px solid var(--color-border);
        padding-left: 2rem;
        min-width: 15rem;
    }
}
@media (max-width: 575.98px) {
    .hp-stats { margin-top: -3rem; }
    .hp-stats-card { padding: 1.25rem; }
    .hp-stat-group { gap: 0.75rem; }
    .hp-stat-year strong { display: block; }   /* wąskie kolumny: wartość roku zawsze w nowej linii, równo we wszystkich */
}

/* ── Sekcje tekstowe (powitanie i sekcje z panelu) ─────────────────── */
.hp-section { padding: var(--hp-section-y) 0; }
.hp-column { max-width: 46rem; margin-inline: auto; }
.hp-section-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.hp-section-title {
    font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
    margin-bottom: 0.75rem;
}
.hp-section-sub {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}
.hp-section-head { margin-bottom: 2rem; }

/* Długi tekst: 18 px, wygodna długość wiersza, wyrównanie do lewej */
.hp-prose { font-size: 1.125rem; }
.hp-prose p { font-size: inherit; line-height: 1.75; margin-bottom: 1.1em; }
.hp-prose > p:first-child { font-size: 1.25rem; line-height: 1.6; }
.hp-prose p:has(> br:only-child) { display: none; }   /* puste akapity-odstępy z edytora */
.hp-prose p:empty { display: none; }
.hp-prose a { overflow-wrap: anywhere; }
.hp-prose img { border-radius: var(--border-radius-lg); }
.hp-prose img[src*="notoemoji"] {                      /* emoji wklejone jako obrazek */
    display: inline;
    width: auto;
    height: 1.15em;
    margin: 0 0.1em;
    vertical-align: -0.2em;
    border-radius: 0;
}
/* Sekcja z panelu na kolorowym tle (np. „bg-primary text-white”) */
.hp-section.text-white .hp-section-sub { color: rgba(255, 255, 255, 0.85); }

/* ── Najnowsze wpisy ───────────────────────────────────────────────── */
.hp-posts { background: var(--color-surface-2); }
.hp-posts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}
.hp-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 500;
}
.hp-chip:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.hp-chip[aria-current="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.hp-chip:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.hp-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    color: var(--color-text);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.hp-post:hover { color: var(--color-text); transform: translateY(-4px); box-shadow: var(--box-shadow-lg); }
.hp-post:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.hp-post-media { aspect-ratio: 16 / 10; background: var(--color-surface-2); overflow: hidden; }
.hp-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Wpis bez zdjęcia: kafelek w kolorze marki, żeby siatka zachowała rytm */
.hp-post-media--empty {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-primary-tint), var(--color-surface-2));
    color: var(--color-primary);
    font-size: 2.75rem;
}
.hp-post-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.hp-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.6rem;
}
.hp-post-title { font-size: 1.45rem; font-weight: 700; line-height: 1.15; margin-bottom: 0.5rem; }
.hp-post-excerpt {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 1.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-post .hp-link { margin-top: auto; align-self: flex-start; }

.hp-posts .pagination {
    --bs-pagination-color: var(--color-text);
    --bs-pagination-bg: var(--color-surface);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-hover-color: var(--color-text);
    --bs-pagination-hover-bg: var(--color-surface-2);
    --bs-pagination-hover-border-color: var(--color-border);
    --bs-pagination-active-color: var(--color-bg);
    --bs-pagination-active-bg: var(--color-text);
    --bs-pagination-active-border-color: var(--color-text);
    --bs-pagination-disabled-bg: var(--color-surface);
    --bs-pagination-disabled-color: var(--color-text-muted);
    --bs-pagination-disabled-border-color: var(--color-border);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--color-primary-tint);
}

/* ── Członkowie ────────────────────────────────────────────────────── */
.hp-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.5rem;
    border-radius: var(--border-radius-lg);
    color: var(--color-text);
    text-align: center;
}
.hp-member:hover { background: var(--color-surface-2); color: var(--color-text); }
.hp-member-avatar { position: relative; width: 4rem; height: 4rem; }
.hp-member-avatar img, .hp-member-initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.hp-member-initials {
    display: grid;
    place-items: center;
    background: var(--color-primary-tint);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
}
.hp-member-status {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    background: var(--color-success);
}
:root[data-theme="dark"] .hp-member-initials { color: var(--color-primary-light); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hp-member-initials { color: var(--color-primary-light); }
}
.hp-member-name { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-member-when { font-size: 0.85rem; color: var(--color-text-muted); }

/* ── Zaproszenie do rejestracji (pomarańczowe, ciemny tekst jak w hero) ── */
.hp-join { color: var(--hp-ink); }
.hp-join h2 { color: var(--hp-ink); }

@media (prefers-reduced-motion: reduce) {
    .hp-post, .hp-post:hover, .hp-hero .btn:active { transition: none; transform: none; }
}