/* =====================================================================
   tpl_glh — Głogowska Amatorska Liga Halowa (GALH Futsal)
   Szablon frontu Joomla 6 wg projektu graficznego z 2026-07.
   Kolory sterowane zmiennymi --glh-accent / --glh-red (z parametrów szablonu).
   ===================================================================== */

:root {
    --glh-accent: #E8620E;
    --glh-red: #D2232A;
    --glh-ink: #16171a;
    --glh-black: #0C0C0D;
    --glh-black-2: #08080a;
    --glh-muted: #8A8A90;
    --glh-line: #EFEFF1;
    --glh-line-2: #ECECEE;
    --glh-page: #F4F4F6;
    --glh-max: 1360px;
    --glh-pad: 34px;
    --glh-font-head: 'Oswald', 'Barlow', system-ui, sans-serif;
    --glh-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body.site,
body.glh-component,
body.glh-error-page {
    margin: 0;
    font-family: var(--glh-font-body);
    color: var(--glh-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: var(--glh-accent); }

.glh-container {
    max-width: var(--glh-max);
    margin: 0 auto;
    padding: 0 var(--glh-pad);
    width: 100%;
}

/* Utility Bootstrapa używane przez com_glh — szablon nie ładuje BS, definiujemy sami */
.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.glh-skip {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 200;
    background: var(--glh-accent);
    color: #fff;
    padding: 10px 18px;
    font-family: var(--glh-font-head);
    font-weight: 600;
    border-radius: 0 0 6px 0;
}
.glh-skip:focus { left: 0; }

/* --------------------------------------------------- Header / nav */
.glh-header {
    background: var(--glh-black);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid #1c1c1e;
    border-top: 3px solid var(--glh-red);
}
.glh-header-inner {
    max-width: var(--glh-max);
    margin: 0 auto;
    padding: 14px var(--glh-pad);
    display: flex;
    align-items: center;
    gap: 26px;
}
.glh-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    text-decoration: none;
}
.glh-brand-logo {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.glh-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.glh-brand-text { font-family: var(--glh-font-head); line-height: 1.12; color: #fff; }
.glh-brand-1 { display: block; font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.glh-brand-2 { display: block; font-size: 12px; letter-spacing: 3px; color: #9C9CA2; font-weight: 600; }

.glh-nav {
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.glh-nav .mod-menu,
.glh-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.glh-nav .mod-menu li { position: relative; }
.glh-nav .mod-menu a,
.glh-nav .mod-menu > li > span {
    display: block;
    text-decoration: none;
    font-family: var(--glh-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 1px;
    border-bottom: 2px solid transparent;
    color: #F2F2F2;
    white-space: nowrap;
    background: none;
}
.glh-nav .mod-menu a:hover { color: var(--glh-accent); }
/* pole „Obrazek przy linku" służy w tym szablonie za tło bannera podstrony —
   w samej nawigacji (header/stopka) obrazków nie renderujemy */
.glh-nav .mod-menu img,
.glh-footer-links img { display: none; }
.glh-nav .mod-menu .current > a,
.glh-nav .mod-menu .active > a {
    color: var(--glh-accent);
    border-bottom-color: var(--glh-accent);
}
/* trasy bez własnej pozycji menu (zawodnik/drużyna/mecz): Joomla oznacza
   pozycję domyślną jako aktywną — nie podświetlamy jej */
.glh-nav-nomatch .mod-menu .current > a,
.glh-nav-nomatch .mod-menu .active > a {
    color: #F2F2F2;
    border-bottom-color: transparent;
}
/* dropdown (podmenu) */
.glh-nav .mod-menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #15151a;
    border: 1px solid #2a2a30;
    border-radius: 8px;
    padding: 6px;
    min-width: 200px;
    flex-direction: column;
    gap: 0;
    z-index: 60;
}
.glh-nav .mod-menu li:hover > ul,
.glh-nav .mod-menu li:focus-within > ul { display: flex; }
.glh-nav .mod-menu ul a { padding: 8px 12px; border-bottom: none; border-radius: 6px; }
.glh-nav .mod-menu ul a:hover { background: #22222a; }

.glh-social { display: flex; gap: 11px; flex: 0 0 auto; }
.glh-soc {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--glh-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--glh-font-head);
    font-weight: 700;
    font-size: 19px;
    transition: transform .15s, filter .15s;
}
.glh-soc:hover { transform: translateY(-2px); filter: brightness(1.08); }

.glh-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}
.glh-burger span { width: 26px; height: 2px; background: #fff; transition: .25s; }
.glh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.glh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.glh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------- Hero */
.glh-hero {
    position: relative;
    background: var(--glh-black);
    overflow: hidden;
}
.glh-hero-media {
    position: absolute;
    top: 0; right: 0;
    width: 58%;
    height: 100%;
    background-image: var(--glh-hero-img, none);
    background-size: cover;
    background-position: center top; /* nie ucinaj głowy zawodnika przy crop */
}
.glh-hero:not([style*="--glh-hero-img"]) .glh-hero-media {
    background: radial-gradient(120% 90% at 85% 30%, rgba(232,98,14,.30), transparent 60%);
}
.glh-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--glh-black) 34%, rgba(12,12,13,.72) 52%, rgba(12,12,13,.12) 100%);
}
.glh-hero-inner {
    position: relative;
    max-width: var(--glh-max);
    margin: 0 auto;
    padding: 76px var(--glh-pad) 132px;
}
.glh-hero-title {
    font-family: var(--glh-font-head);
    font-weight: 700;
    color: #fff;
    font-size: 74px;
    line-height: .97;
    letter-spacing: 1px;
    margin: 0;
    max-width: 760px;
}
.glh-hero-title .glh-hl { color: var(--glh-red); }
.glh-hero-sub { color: #ECECEE; font-size: 20px; margin: 24px 0 12px; font-weight: 500; }
.glh-hero-tags {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #CFCFD2;
    font-size: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.glh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--glh-accent); display: inline-block; }

.glh-btn {
    background: var(--glh-accent);
    color: #fff;
    border: none;
    font-family: var(--glh-font-head);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 16px 30px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0,0,0,.4);
    transition: transform .15s, filter .15s;
}
.glh-btn:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }

/* --------------------------------------------------- Hero — animacje (czysty CSS) */
.glh-hero-inner { z-index: 2; }
.glh-hero-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* tytuł „składa się" ze słów — każde wlatuje z dołu i obraca się na miejsce,
   po kolei (stagger przez zmienną --w ustawianą w PHP) */
.glh-hero-title { perspective: 900px; }
.glh-hero-title .glh-word {
    display: inline-block;
    transform-origin: 50% 100%;
    animation: glhWordAssemble .62s cubic-bezier(.2, .75, .3, 1) both;
    animation-delay: calc(var(--w, 0) * .12s + .1s);
}
@keyframes glhWordAssemble {
    from { opacity: 0; transform: translateY(.55em) rotateX(-85deg); filter: blur(5px); }
    60%  { filter: blur(0); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* reszta treści hero wchodzi PO złożeniu tytułu (4 słowa ~0.7 s) */
.glh-hero-sub { animation: glhHeroRise .7s ease-out .62s both; }
.glh-hero-tags { animation: glhHeroRise .7s ease-out .76s both; }
.glh-hero-inner .glh-btn { animation: glhHeroRise .7s ease-out .9s both; }
@keyframes glhHeroRise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* pulsujące kropki „Pasja • Rywalizacja • Fair Play" (kropki = 2. i 4. dziecko) */
.glh-hero-tags .glh-dot { animation: glhDotPulse 2.6s ease-in-out infinite; }
.glh-hero-tags .glh-dot:nth-child(4) { animation-delay: 1.3s; }
@keyframes glhDotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 98, 14, .55); }
    50%      { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(232, 98, 14, 0); }
}

/* strzałka CTA delikatnie „popycha" w prawo */
.glh-hero-inner .glh-btn span { display: inline-block; animation: glhNudge 1.8s ease-in-out infinite; }
@keyframes glhNudge {
    0%, 100% { transform: none; }
    50%      { transform: translateX(4px); }
}

/* linie boiska rysujące się przy wejściu, potem subtelnie „oddychają" */
.glh-hero-pitch {
    position: absolute;
    left: -40px;
    bottom: -30px;
    width: min(56%, 720px);
    height: 82%;
    color: var(--glh-accent);
    opacity: .14;
}
.glh-hero-pitch [class^="glh-pitch"] {
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: glhPitchDraw 2.2s ease-out forwards;
}
.glh-hero-pitch .glh-pitch-circle { animation-delay: .3s; }
.glh-hero-pitch .glh-pitch-arc { animation-delay: .6s; }
.glh-hero-pitch .glh-pitch-corner { animation-delay: .9s; }
.glh-hero-pitch .glh-pitch-spot {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0;
    animation: glhPitchSpot 1s ease-out 1.4s forwards;
}
@keyframes glhPitchDraw { to { stroke-dashoffset: 0; } }
@keyframes glhPitchSpot { to { opacity: 1; } }

/* piłka: lot w prawo (X, linear) + odbicia od parkietu (Y, malejące) + rotacja + cień */
.glh-ball-x {
    position: absolute;
    left: 0;
    bottom: 116px;              /* „parkiet” odbić — nad kartami zachodzącymi na hero */
    width: 64px;
    height: 64px;
    animation: glhBallX 9s linear infinite;
    will-change: transform;
}
.glh-ball-y {
    position: absolute;
    inset: 0;
    animation: glhBallY 9s linear infinite;
    will-change: transform;
}
/* zdjęcie prawdziwej piłki (Select) wycięte w okrąg z alfą — kręci się w locie */
.glh-ball {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('../images/ball.png') center / cover no-repeat;
    animation: glhBallSpin 1.3s linear infinite;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .45);
    will-change: transform;
}
@keyframes glhBallSpin { to { transform: rotate(360deg); } }
.glh-ball-shadow {
    position: absolute;
    left: 8%;
    bottom: -14px;
    width: 84%;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
    animation: glhBallShadow 9s linear infinite;
    transform-origin: center;
}
/* X: wjazd zza lewej, wylot za prawą krawędź (76% cyklu), reszta = pauza poza kadrem */
@keyframes glhBallX {
    0%   { transform: translateX(-90px); opacity: 1; }
    74%  { opacity: 1; }
    76%  { transform: translateX(calc(100vw + 40px)); opacity: 0; }
    100% { transform: translateX(calc(100vw + 40px)); opacity: 0; }
}
/* Y: nadlatuje wysoko, 3 malejące odbicia (squash przy kontakcie), toczy się i wylatuje */
@keyframes glhBallY {
    0%    { transform: translateY(-240px); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
    16%   { transform: translateY(0) scaleY(1); animation-timing-function: linear; }
    17.5% { transform: translateY(0) scaleY(.82); }
    19%   { transform: translateY(0) scaleY(1); animation-timing-function: cubic-bezier(0, 0, .6, 1); }
    32%   { transform: translateY(-130px); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
    45%   { transform: translateY(0) scaleY(1); animation-timing-function: linear; }
    46%   { transform: translateY(0) scaleY(.88); }
    47%   { transform: translateY(0) scaleY(1); animation-timing-function: cubic-bezier(0, 0, .6, 1); }
    57%   { transform: translateY(-58px); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
    66%   { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, .6, 1); }
    71%   { transform: translateY(-18px); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
    76%   { transform: translateY(0); }
    100%  { transform: translateY(0); }
}
/* cień: pełny przy kontakcie, mały i słaby gdy piłka wysoko */
@keyframes glhBallShadow {
    0%    { transform: scale(.35); opacity: .1; }
    16%   { transform: scale(1); opacity: .5; }
    19%   { transform: scale(1); opacity: .5; }
    32%   { transform: scale(.55); opacity: .18; }
    45%   { transform: scale(1); opacity: .5; }
    57%   { transform: scale(.75); opacity: .3; }
    66%   { transform: scale(1); opacity: .5; }
    71%   { transform: scale(.9); opacity: .4; }
    76%   { transform: scale(1); opacity: .5; }
    100%  { transform: scale(1); opacity: .5; }
}

/* dostępność: użytkownik nie życzy sobie ruchu — wszystko statyczne */
@media (prefers-reduced-motion: reduce) {
    .glh-hero-title, .glh-hero-title .glh-word, .glh-hero-sub, .glh-hero-tags,
    .glh-hero-inner .glh-btn, .glh-hero-tags .glh-dot, .glh-hero-inner .glh-btn span,
    .glh-ball, .glh-ball-x, .glh-ball-y, .glh-ball-shadow { animation: none; }
    .glh-hero-title .glh-word { opacity: 1; transform: none; filter: none; }
    .glh-ball-x { display: none; }
    .glh-hero-pitch [class^="glh-pitch"] { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* --------------------------------------------------- Overlap cards (home) */
.glh-overlap { background: #fff; }
.glh-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: -98px;
    position: relative;
    z-index: 5;
}
.glh-cards:has(> .glh-card:only-child) { grid-template-columns: 1fr; max-width: 720px; }
.glh-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(0,0,0,.18);
    overflow: hidden;
}
.glh-card-head {
    background: var(--glh-accent);
    color: #fff;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.glh-card-title { font-family: var(--glh-font-head); font-weight: 700; font-size: 21px; letter-spacing: .5px; }
.glh-card-link {
    font-family: var(--glh-font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.glh-card-link:hover { text-decoration: underline; color: #fff; }
.glh-card-body { padding: 6px 0; }

/* --------------------------------------------------- Features */
.glh-features-wrap { background: #fff; }
.glh-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid var(--glh-line-2);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 44px;
}
.glh-feat {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 30px;
}
.glh-feat + .glh-feat { border-left: 1px solid var(--glh-line-2); }
.glh-feat svg { width: 36px; height: 36px; flex: 0 0 auto; }
.glh-feat-t { font-family: var(--glh-font-head); font-weight: 700; font-size: 16px; color: var(--glh-ink); }
.glh-feat-d { font-size: 13px; color: var(--glh-muted); margin-top: 3px; }

/* --------------------------------------------------- Banner (podstrona) */
.glh-banner { background: var(--glh-black); padding: 54px 0 46px; position: relative; overflow: hidden; }
.glh-banner .glh-container { position: relative; }
.glh-banner-media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* prawa krawędź zdjęcia zlicowana z krawędzią treści (linia ikonki poczty
       w headerze): środek + połowa kontenera minus padding */
    right: calc(max((100% - var(--glh-max)) / 2, 0px) + var(--glh-pad));
    background-image: var(--glh-banner-img, none);
    /* całe zdjęcie skalowane do wysokości bannera; obie krawędzie zdjęć są
       wtopione w #0C0C0D w samych plikach, więc łączą się z tłem bez szwu */
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
}
.glh-banner-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--glh-black) 28%, rgba(12,12,13,.6) 55%, rgba(12,12,13,.1) 100%);
}
.glh-banner.has-image { padding: 96px 0 88px; } /* zdjęcie dostaje więcej wysokości */
.glh-banner-title { font-family: var(--glh-font-head); font-weight: 700; color: #fff; font-size: 44px; letter-spacing: 1px; margin: 0; }
.glh-banner-rule { display: block; width: 70px; height: 4px; background: var(--glh-accent); margin-top: 14px; border-radius: 2px; }
.glh-banner-extra { color: #BFBFC4; margin-top: 16px; font-size: 16px; }

/* --------------------------------------------------- Main content */
.glh-main { background: var(--glh-page); padding: 44px 0 60px; min-height: 40vh; }
.glh-main-home { background: #fff; padding: 8px 0 0; min-height: 0; }
.glh-main-home:empty, .glh-main-home .glh-container:empty { display: none; }
.glh-layout { display: block; }
.glh-layout.has-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.glh-breadcrumbs { margin-bottom: 16px; font-size: 13px; color: var(--glh-muted); }
.glh-breadcrumbs a { color: var(--glh-muted); text-decoration: none; }
.glh-breadcrumbs a:hover { color: var(--glh-accent); }
.glh-breadcrumbs ol, .glh-breadcrumbs ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.glh-breadcrumbs li { display: inline-flex; align-items: center; }
.glh-breadcrumbs li + li::before { content: "›"; margin: 0 8px; color: #c3c3c8; }
.glh-breadcrumbs .visually-hidden, .glh-breadcrumbs .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* karty modułów (chrome glhcard) i sidebar */
.glh-modcard {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    overflow: hidden;
    margin-bottom: 24px;
}
.glh-modcard > h3,
.glh-modcard > .glh-modcard-title {
    background: var(--glh-accent);
    color: #fff;
    margin: 0;
    padding: 14px 20px;
    font-family: var(--glh-font-head);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .5px;
}
.glh-modcard-body { padding: 18px 20px; }

/* system messages */
.glh-main .alert, #system-message-container .alert {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--glh-line-2);
    background: #fff;
}
.alert-info { border-left: 4px solid var(--glh-accent); }
.alert-success { border-left: 4px solid #1F8A5B; }
.alert-warning { border-left: 4px solid #E8A80E; }
.alert-danger, .alert-error { border-left: 4px solid var(--glh-red); }

/* =====================================================================
   com_glh — dopasowanie widoków komponentu do stylistyki GALH
   ===================================================================== */
.com-glh { margin-bottom: 2rem; }

/* pasek: nawigacja widoków + przełącznik sezonu */
.glh-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.glh-nav.glh-nav { }  /* nie koliduje z nawigacją headera (inny kontekst) */
.glh-bar .glh-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.glh-bar .glh-nav-link {
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--glh-line-2);
    color: #4a4b50;
    font-family: var(--glh-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.glh-bar .glh-nav-link:hover { border-color: var(--glh-accent); color: var(--glh-accent); }
.glh-bar .glh-nav-link.active { background: var(--glh-accent); border-color: var(--glh-accent); color: #fff; }
.glh-switcher select {
    min-width: 16rem;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--glh-line-2);
    background: #fff;
    font-family: var(--glh-font-head);
    font-weight: 600;
    color: var(--glh-ink);
}

/* tabele komponentu */
.glh-standings, .glh-scorers {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.glh-table { width: 100%; border-collapse: collapse; }
.glh-table caption { padding: 0; }
.glh-table th, .glh-table td { padding: 13px 16px; vertical-align: middle; }
.glh-table thead th {
    background: var(--glh-accent);
    color: #fff;
    font-family: var(--glh-font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}
.glh-table thead th:nth-child(2) { text-align: left; }
.glh-table tbody tr { border-bottom: 1px solid var(--glh-line); }
.glh-table tbody tr:nth-child(even) { background: #FAFAFA; }
.glh-table .text-center { text-align: center; }
.glh-leader { background: #FBEDE4 !important; }
.glh-points { font-family: var(--glh-font-head); font-weight: 700; font-size: 16px; color: var(--glh-accent); }

.glh-team { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--glh-ink); }
.glh-team-logo { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.glh-team-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glh-ink);
    color: #fff;
    border-radius: 50%;
    font-family: var(--glh-font-head);
    font-size: .72rem;
    font-weight: 700;
}
.glh-team-name { font-family: var(--glh-font-head); font-weight: 600; font-size: 16px; color: var(--glh-ink); }
a.glh-team-link:hover .glh-team-name { color: var(--glh-accent); }

/* terminarz — kolejki jako karty */
.glh-schedule .glh-round {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    margin-bottom: 26px;
}
.glh-round-title {
    margin: 0;
    padding: 14px 22px;
    font-family: var(--glh-font-head);
    font-weight: 700;
    font-size: 20px;
    color: var(--glh-ink);
    background: #fff;
    border-bottom: 1px solid var(--glh-line);
    border-left: 4px solid var(--glh-accent);
}
.glh-schedule .glh-table th, .glh-schedule .glh-table td { border: none; }
.glh-schedule .glh-table tbody tr { border-bottom: 1px solid var(--glh-line); }
.glh-date { white-space: nowrap; color: var(--glh-muted); font-size: .9rem; width: 11rem; font-family: var(--glh-font-head); font-weight: 600; }
.glh-home { text-align: right; }
.glh-home .glh-team { flex-direction: row-reverse; }
.glh-score { width: 7rem; text-align: center; }
.glh-score a { text-decoration: none; color: inherit; }
.glh-score strong {
    display: inline-block;
    background: var(--glh-ink);
    color: #fff;
    font-family: var(--glh-font-head);
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    min-width: 62px;
}
.glh-planned { color: var(--glh-accent); font-family: var(--glh-font-head); font-weight: 700; }
.glh-cancelled { color: var(--glh-red); font-size: .85rem; }

/* drużyny — karty */
.glh-teams-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 22px;
}
.glh-teams-card {
    border: 1px solid var(--glh-line-2);
    border-radius: 12px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    text-align: center;
}
.glh-teams-card .glh-team { flex-direction: column; gap: 12px; }
.glh-teams-card .glh-team-logo,
.glh-teams-card .glh-team-initials { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.3rem; }

/* mecz + zawodnik */
.glh-game-header { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1.5rem 0; flex-wrap: wrap; }
.glh-game-result { font-family: var(--glh-font-head); font-size: 2.4rem; font-weight: 700; color: var(--glh-ink); }
.glh-game-meta { text-align: center; color: var(--glh-muted); }
.glh-game-meta span + span::before { content: " · "; }
.glh-minute { width: 3.5rem; color: var(--glh-muted); font-variant-numeric: tabular-nums; }
.glh-player-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; }
.glh-player-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; flex: 0 0 84px; }

/* karty com_glh na białym tle strony głównej */
.glh-main-home .com-glh { margin-bottom: 0; }

/* =====================================================================
   Moduły com_glh
   ===================================================================== */
.glh-mod-empty { color: var(--glh-muted); padding: 16px 22px; }

/* Najbliższe mecze */
.glh-mod-list { list-style: none; margin: 0; padding: 0; }
.mod-glh-nextmatches li { border-bottom: 1px solid var(--glh-line); }
.mod-glh-nextmatches li:last-child { border-bottom: none; }
.mod-glh-nextmatches a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 22px;
    text-decoration: none;
    color: var(--glh-ink);
}
.mod-glh-nextmatches a:hover { background: #FBEDE4; }
.mod-glh-nextmatches .glh-mod-teams { font-family: var(--glh-font-head); font-weight: 700; font-size: 15px; }
.mod-glh-nextmatches .glh-mod-date { font-family: var(--glh-font-head); font-weight: 700; font-size: 13px; color: var(--glh-accent); white-space: nowrap; }

/* Tabela kompaktowa (mod_glh_standings — karta na home) */
.mod-glh-standings { overflow-x: auto; }               /* wąski kontener (np. sidebar) = scroll zamiast obcięcia przez overflow:hidden karty */
.mod-glh-standings .glh-table { box-shadow: none; white-space: nowrap; }
.mod-glh-standings .glh-table th,
.mod-glh-standings .glh-table td { padding: 9px 10px; }
.mod-glh-standings .glh-table th:first-child,
.mod-glh-standings .glh-table td:first-child { padding-left: 22px; }
.mod-glh-standings .glh-table th:last-child,
.mod-glh-standings .glh-table td:last-child { padding-right: 22px; }
.mod-glh-standings .glh-table thead th {
    background: #fff;
    color: #9A9AA0;
    font-size: 11px;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--glh-line);
}
.mod-glh-standings .glh-pos { font-family: var(--glh-font-head); font-weight: 700; font-size: 14px; }
.mod-glh-standings .glh-team { gap: 9px; }
.mod-glh-standings .glh-team-logo,
.mod-glh-standings .glh-team-initials { width: 26px; height: 26px; flex-basis: 26px; font-size: .62rem; }
.mod-glh-standings .glh-team-name { font-size: 14px; }
.mod-glh-standings td { font-size: 14px; color: #4a4b50; }
.mod-glh-standings .glh-points { font-size: 15px; }
.mod-glh-standings .glh-mod-more {
    display: block;
    text-align: center;
    padding: 14px;
    font-family: var(--glh-font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--glh-accent);
    text-decoration: none;
    text-transform: uppercase;
}
.mod-glh-standings .glh-mod-more:hover { text-decoration: underline; }
/* w karcie glhcard (sidebar/bottom) body ma już padding 20px — bez dublowania skrajów */
.glh-modcard .mod-glh-standings .glh-table th:first-child,
.glh-modcard .mod-glh-standings .glh-table td:first-child { padding-left: 10px; }
.glh-modcard .mod-glh-standings .glh-table th:last-child,
.glh-modcard .mod-glh-standings .glh-table td:last-child { padding-right: 10px; }
@media (max-width: 767px) {
    /* nadpisuje globalne .glh-table{display:block} — tabela zostaje tabelą (zebra na
       całej szerokości karty), a scroll daje wrapper .mod-glh-standings */
    .mod-glh-standings .glh-table { display: table; }
}
@media (max-width: 479px) {
    /* wąskie telefony: chowamy kolumny drugorzędne (Z/R/P/BRAMKI) — pozycja, drużyna,
       mecze i PKT zawsze widoczne bez przewijania */
    .mod-glh-standings .glh-table th:nth-child(n+4):not(:last-child),
    .mod-glh-standings .glh-table td:nth-child(n+4):not(:last-child) { display: none; }
}

/* Król strzelców */
.mod-glh-scorers { counter-reset: glh-rank; }
.mod-glh-scorers li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--glh-line);
}
.mod-glh-scorers li:last-child { border-bottom: none; }
.mod-glh-scorers li::before {
    counter-increment: glh-rank;
    content: counter(glh-rank);
    font-family: var(--glh-font-head);
    font-weight: 700;
    color: var(--glh-ink);
    min-width: 22px;
    text-align: center;
}
.mod-glh-scorers .glh-mod-player { font-family: var(--glh-font-head); font-weight: 600; font-size: 15px; color: var(--glh-ink); text-decoration: none; }
.mod-glh-scorers .glh-mod-player:hover { color: var(--glh-accent); }
.mod-glh-scorers .glh-mod-team { color: var(--glh-muted); font-size: 13px; }
.mod-glh-scorers .glh-mod-goals { margin-left: auto; font-family: var(--glh-font-head); font-weight: 700; font-size: 16px; color: var(--glh-accent); }

/* =====================================================================
   Pasek sponsorów + stopka
   ===================================================================== */
.glh-sponsors-band { background: var(--glh-black); padding: 46px 0 54px; }
.glh-sponsors-head { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px; }
.glh-rule { height: 2px; width: 120px; background: var(--glh-red); }
.glh-sponsors-title { font-family: var(--glh-font-head); font-weight: 700; font-size: 26px; color: #fff; letter-spacing: 1px; }
.glh-sponsors-band .glh-sponsors {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: stretch;
}
.glh-sponsors-band .glh-sponsor {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}
.glh-sponsors-band .glh-sponsor-logo { filter: none; max-height: 64px; width: auto; }
.glh-sponsors-band .glh-sponsor:hover .glh-sponsor-logo { transform: scale(1.05); }

.glh-footer { background: var(--glh-black-2); padding: 44px 0; border-top: 1px solid #1c1c1e; }
.glh-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.glh-footer-brand { font-family: var(--glh-font-head); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: .5px; }
.glh-footer-note { font-size: 13px; color: #6E6E77; margin-top: 6px; }
.glh-footer-links ul { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; margin: 0; padding: 0; }
.glh-footer-links a {
    font-family: var(--glh-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    color: #B9B9BD;
    text-decoration: none;
    text-transform: uppercase;
}
.glh-footer-links a:hover { color: var(--glh-accent); }

/* =====================================================================
   Błąd / offline
   ===================================================================== */
.glh-error-page { background: var(--glh-black); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.glh-error { text-align: center; color: #fff; padding: 40px; max-width: 560px; }
.glh-error-logo { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 14px; padding: 8px; }
.glh-error-code { font-family: var(--glh-font-head); font-weight: 700; font-size: 96px; line-height: 1; color: var(--glh-accent); margin: 18px 0 4px; }
.glh-error-msg { font-size: 18px; color: #ECECEE; margin-bottom: 26px; }
.glh-error-debug { margin-top: 30px; text-align: left; color: #BFBFC4; font-size: 12px; overflow-x: auto; }
.glh-offline-form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 20px auto 0; }
.glh-offline-form input { padding: 12px 14px; border-radius: 8px; border: 1px solid #2a2a30; background: #15151a; color: #fff; }

/* =====================================================================
   Responsywność
   ===================================================================== */
@media (max-width: 1180px) {
    .glh-hero-title { font-size: 58px; }
}
@media (max-width: 1023px) {
    :root { --glh-pad: 20px; }
    .glh-burger { display: flex; }
    .glh-social { display: none; }
    /* Menu hamburgera dotyczy WYŁĄCZNIE nawigacji w nagłówku (.glh-header .glh-nav).
       Selektor musi być zawężony — samo .glh-nav łapie też pasek widoku komponentu
       (.glh-bar .glh-nav), który wtedy stawał się absolutny i pływał w treści. */
    .glh-header .glh-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--glh-black);
        border-bottom: 1px solid #1c1c1e;
        padding: 12px var(--glh-pad) 20px;
        margin: 0;
    }
    .glh-header .glh-nav.is-open { display: block; }
    .glh-header .glh-nav .mod-menu, .glh-header .glh-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .glh-header .glh-nav .mod-menu a { padding: 12px 4px; border-bottom: 1px solid #1c1c1e; }
    .glh-header .glh-nav .mod-menu ul { position: static; border: none; background: transparent; padding-left: 14px; }
    .glh-hero-media { width: 100%; opacity: .45; }
    .glh-hero-shade { background: linear-gradient(180deg, rgba(12,12,13,.6) 0%, var(--glh-black) 92%); }
    .glh-hero-inner { padding: 54px var(--glh-pad) 90px; }
    .glh-hero-title { font-size: 46px; }
    .glh-cards { grid-template-columns: 1fr; margin-top: -70px; }
    .glh-features { grid-template-columns: 1fr; }
    .glh-feat + .glh-feat { border-left: none; border-top: 1px solid var(--glh-line-2); }
    .glh-layout.has-sidebar { grid-template-columns: 1fr; }
    .glh-sponsors-band .glh-sponsors { grid-template-columns: repeat(3, 1fr); }
    .glh-bottom { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
    .glh-hero-title { font-size: 36px; }
    .glh-banner-title { font-size: 32px; }
    .glh-sponsors-band .glh-sponsors { grid-template-columns: repeat(2, 1fr); }
    .glh-sponsors-head .glh-rule { width: 40px; }
    .glh-footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .glh-hero-title { font-size: 30px; }
    .glh-brand-2 { letter-spacing: 2px; }
    .glh-sponsors-band .glh-sponsors { grid-template-columns: 1fr 1fr; }
}

/* pasek dolnych modułów */
.glh-bottom-wrap { background: var(--glh-page); padding: 0 0 40px; }
.glh-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.glh-bottom:has(> div:only-child) { grid-template-columns: 1fr; }

/* =====================================================================
   Tabele com_glh — pełna responsywność na urządzeniach mobilnych
   Dwie strategie zależnie od typu tabeli:
   • tabele statystyczne (tabela ligi, strzelcy, kariera zawodnika, zdarzenia
     meczu) → zostają tabelą, ale zyskują poziomy scroll w obrębie karty
     i kompaktową gęstość, a na wąskich ekranach chowają kolumny drugorzędne,
     tak by najważniejsze dane były widoczne bez przewijania;
   • listy meczów (terminarz, mecze drużyny, historia zawodnika) → rozkładają
     się na „kafelki” data / gospodarz – wynik – gość, bez poziomego scrolla.
   ===================================================================== */

@media (max-width: 767px) {
    /* mniejsza gęstość komórek na telefonach */
    .glh-table th,
    .glh-table td { padding: 10px 10px; }
    .glh-table thead th { font-size: 11px; letter-spacing: .5px; }
    /* nazwy drużyn/zawodników mogą się zawijać — nie rozpychają tabeli w bok */
    .glh-team,
    .glh-team-name { white-space: normal; }

    /* pasek nawigacji widoku + przełącznik sezonu: select na pełną szerokość */
    .glh-bar { gap: 12px; }
    .glh-switcher,
    .glh-switcher select { width: 100%; }
    .glh-switcher select { min-width: 0; }

    /* --- tabele statystyczne: poziomy scroll w obrębie karty zamiast rozpychania
       strony (fallback, gdy kolumn i tak jest za dużo) --- */
    .glh-standings,
    .glh-scorers { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .glh-player .glh-table:not(.glh-history),
    .glh-game .glh-events {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* tabela ligi — na węższych ekranach chowamy kolumny drugorzędne.
   Kolejność kolumn (stała w tmpl): 1=# 2=drużyna 3=M 4=Z 5=R 6=P 7=bramki 8=+/- 9=PKT */
@media (max-width: 600px) {
    .glh-standings .glh-table th:nth-child(4), .glh-standings .glh-table td:nth-child(4), /* Z */
    .glh-standings .glh-table th:nth-child(5), .glh-standings .glh-table td:nth-child(5), /* R */
    .glh-standings .glh-table th:nth-child(6), .glh-standings .glh-table td:nth-child(6), /* P */
    .glh-standings .glh-table th:nth-child(7), .glh-standings .glh-table td:nth-child(7)  /* bramki */
        { display: none; }
    /* zostają: pozycja, drużyna, mecze, różnica, punkty — mieszczą się bez scrolla */
}
@media (max-width: 380px) {
    /* najwęższe telefony: chowamy też różnicę (+/-), zostają #, drużyna, M, PKT */
    .glh-standings .glh-table th:nth-child(8), .glh-standings .glh-table td:nth-child(8)
        { display: none; }
}

/* strzelcy — kolejność kolumn: 1=# 2=zawodnik 3=drużyna 4=gole 5=karne 6=🟨 7=🟥 */
@media (max-width: 600px) {
    .glh-scorers .glh-table th:nth-child(5), .glh-scorers .glh-table td:nth-child(5), /* karne */
    .glh-scorers .glh-table th:nth-child(6), .glh-scorers .glh-table td:nth-child(6), /* żółte */
    .glh-scorers .glh-table th:nth-child(7), .glh-scorers .glh-table td:nth-child(7)  /* czerwone */
        { display: none; }
    /* zostają: pozycja, zawodnik, drużyna, gole */
}

/* --- listy meczów jako kafelki: data u góry, pod nią gospodarz — wynik — gość --- */
@media (max-width: 640px) {
    .glh-schedule .glh-table,
    .glh-schedule .glh-table tbody,
    .glh-team-matches .glh-table,
    .glh-team-matches .glh-table tbody,
    .glh-history,
    .glh-history tbody { display: block; }

    .glh-schedule .glh-table tr,
    .glh-team-matches .glh-table tr,
    .glh-history tr {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "date  date  date"
            "home  score away";
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--glh-line);
    }

    .glh-schedule .glh-table td,
    .glh-team-matches .glh-table td,
    .glh-history td {
        display: block;
        padding: 0;
        border: none;
    }

    /* przypisanie komórek do obszarów po pozycji (kolejność stała w szablonach) */
    .glh-schedule .glh-table td:nth-child(1),
    .glh-team-matches .glh-table td:nth-child(1),
    .glh-history td:nth-child(1) {
        grid-area: date;
        width: auto;
        text-align: center;
        font-size: .8rem;
        color: var(--glh-muted);
    }
    .glh-schedule .glh-table td:nth-child(2),
    .glh-team-matches .glh-table td:nth-child(2),
    .glh-history td:nth-child(2) { grid-area: home; text-align: right; }
    .glh-schedule .glh-table td:nth-child(3),
    .glh-team-matches .glh-table td:nth-child(3),
    .glh-history td:nth-child(3) { grid-area: score; width: auto; text-align: center; }
    .glh-schedule .glh-table td:nth-child(4),
    .glh-team-matches .glh-table td:nth-child(4),
    .glh-history td:nth-child(4) { grid-area: away; text-align: left; }

    /* nazwy drużyn hugują wynik i zawijają się przy długich nazwach */
    .glh-schedule .glh-home .glh-team,
    .glh-schedule .glh-away .glh-team,
    .glh-team-matches .glh-home .glh-team,
    .glh-team-matches .glh-away .glh-team { max-width: 100%; }

    /* historia zawodnika ma dodatkową kolumnę „zdarzenia” — pełny wiersz pod spodem */
    .glh-history tr {
        grid-template-areas:
            "date  date  date"
            "home  score away"
            "ev    ev    ev";
    }
    .glh-history td:nth-child(5) {
        grid-area: ev;
        text-align: center;
        white-space: normal;
        font-size: .85rem;
        color: var(--glh-muted);
    }
    .glh-history td:nth-child(5):empty { display: none; }
}
