/* ============================================================
   grafit.css – nowy wygląd tenisczarne.pl (wariant Grafit)
   Ładowany PO style.css. Usunięcie linijki z index.php
   = natychmiastowy powrót do starego wyglądu.
   ============================================================ */

:root {
  --grafit: #3A3F45;
  --grafit-ciemny: #1F2328;
  --grafit-sredni: #2A2F35;
  --limonka: #D7E64A;
  --tlo: #F4F5F6;
  --karta: #FFFFFF;
  --linia: #E3E6E9;
  --tekst: #1B1E22;
  --tekst-2: #5A6068;
  --cien: 0 1px 3px rgba(20,22,25,0.08);
}

body, #page, #container {
  background: var(--tlo) !important;
  color: var(--tekst);
  font-family: 'Inter', 'Roboto', Arial, sans-serif;
}

/* ---------- Górny pasek: logo, menu, social ---------- */
#header0 { background: var(--grafit) !important; min-height: 52px; }
#header0_1100 { max-width: 1200px; padding: 0 16px; box-sizing: border-box; }
#logo { padding-top: 6px; }
#logo img { height: 40px; }
#social { padding-top: 10px; }
#social img { height: 28px; width: auto; opacity: .9; }
#social img:hover { opacity: 1; }

#menu0 { padding-top: 16px; padding-right: 24px; }
#menu0 a, #menu0 .menuli { color: #FFFFFF !important; font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 600; font-size: 15px; }
#menu0 .menuli a:hover { border-bottom: 3px solid var(--limonka); }
[class^="podulhiddenn"] { background: var(--grafit-ciemny) !important; border-radius: 0 0 10px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.podlihidden a { color: #FFFFFF !important; }
.podlihidden a:hover { color: var(--limonka) !important; }

/* ---------- Pasek wyników (relacje) ---------- */
#relacjediv { background: var(--grafit-ciemny) !important; border-top: 3px solid var(--limonka); }
#relacjetabela { background: transparent !important; }
#relacje { border-left: 1px solid rgba(255,255,255,.15) !important; color: #FFFFFF; }
#relacje td { font-family: 'Inter', 'Roboto', sans-serif; }
.datagodz { background: var(--limonka) !important; color: var(--grafit-ciemny) !important; font-weight: 700; border-radius: 6px 6px 0 0; }
.clickright, .clickleft { background: var(--grafit) !important; color: var(--limonka) !important; border-radius: 8px; }
.clickright:hover, .clickleft:hover { background: var(--grafit-sredni) !important; }

/* ---------- Slider (logotypy) i menu lig ---------- */
#header { background: var(--karta); border-bottom: 1px solid var(--linia); }
#menu { padding-top: 10px; padding-bottom: 10px; }
#menu a { color: var(--grafit) !important; font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 600; font-size: 14px; }
#menu .menuli a { padding: 8px 10px; border-radius: 8px; }
#menu .menuli a:hover { background: var(--tlo); border-bottom: 0; box-shadow: inset 0 -3px 0 var(--limonka); }

/* ---------- Treść: kolumny ---------- */
#content { max-width: 1200px; font-size: 15px; color: var(--tekst); }

#left, #right {
  background: var(--karta);
  border: 0 !important;
  border-radius: 14px;
  box-shadow: var(--cien);
  padding: 14px !important;
  box-sizing: border-box;
  width: 200px !important;
}
#left { height: auto !important; }
#left h2, #right h2 { font-family: 'Montserrat', 'Roboto', sans-serif; font-size: 15px; color: var(--grafit); margin-bottom: 6px; }
#left a, #right a { color: var(--grafit) !important; }
#left a:hover, #right a:hover { color: var(--tekst) !important; text-decoration: underline; }

/* Archiwum lat w lewej kolumnie */
ul.lata { margin-bottom: 6px; }
ul.lata > li[class^="lataclick"] {
  background: #ECEEF0; border-radius: 8px; padding: 8px 10px; cursor: pointer;
  font-weight: 700; color: var(--grafit); font-size: 14px;
}
ul.lata > li[class^="lataclick"]:hover { background: #DFE2E5; }
ul.lata > li[class^="ligaclick"] { padding: 4px 10px; font-size: 13px; }

/* Licznik meczów w prawej kolumnie */
#liczniktekst { color: var(--limonka) !important; text-shadow: 0 2px 6px rgba(0,0,0,.6); }

/* ---------- Aktualności ---------- */
#entry h1 { font-family: 'Montserrat', 'Roboto', sans-serif; color: var(--grafit); border-bottom: 3px solid var(--limonka) !important; }
#news img { border-radius: 14px; }
#news h3 { font-family: 'Montserrat', 'Roboto', sans-serif; color: var(--tekst); font-size: 18px; line-height: 1.3; }
#news h3:hover, .tytul_news h3:hover { color: var(--grafit) !important; text-decoration: underline; text-decoration-color: var(--limonka); text-decoration-thickness: 3px; }
#news > div[style*="float: left"] {
  background: var(--karta); border-radius: 14px; box-shadow: var(--cien); overflow: hidden;
}
.news_wiecej {
  background: var(--grafit) !important; border: 0 !important; border-radius: 12px;
  font-weight: 700;
}
.news_wiecej, .news_wiecej a { color: #FFFFFF !important; }
.news_wiecej:hover { background: var(--grafit-ciemny) !important; }

/* ---------- Stopka ---------- */
#podpis { background: var(--grafit-ciemny) !important; padding-top: 16px; min-height: 52px; }
#podpis a { color: #D5D9DD !important; }
#podpis a:hover { color: var(--limonka) !important; }

/* ---------- Pasek logotypów (baner ligi + sponsorzy, z panelu „slajdy”) ---------- */
#ltz-logotypy { background: var(--karta); border-bottom: 1px solid var(--linia); }
.ltz-logotypy-1100 {
  max-width: 1200px; margin: 0 auto; padding: 12px 16px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px;
}
.ltz-logo { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 4px 8px; }
a.ltz-logo:hover { background: var(--tlo); }
.ltz-logo img { display: block; height: 72px; width: auto; max-width: 100%; object-fit: contain; }
.ltz-logo:first-child img { height: 84px; }

/* Plakietka urodzinowa w pasku logotypów */
#ltz-urodziny {
  display: flex; align-items: center; gap: 10px;
  background: var(--limonka); color: var(--grafit-ciemny);
  border-radius: 999px; padding: 8px 16px 8px 12px; font-size: 14px; line-height: 1.25; text-align: left;
}
#ltz-urodziny b { font-weight: 700; }
#ltz-urodziny small { display: block; font-size: 12px; opacity: .8; }

/* ---------- Kafelek „W historii LTZPŚ” (prawa kolumna) ---------- */
#ltzps-stat {
  display: block; margin-bottom: 14px; padding: 14px 12px 12px;
  background: var(--grafit-ciemny); border-radius: 12px;
  border-top: 3px solid var(--limonka);
  color: #FFFFFF !important; text-decoration: none !important; text-align: center;
}
#ltzps-stat:hover { background: var(--grafit-sredni); }
#ltzps-stat .ltzps-tytul {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--limonka); margin-bottom: 10px;
}
#ltzps-stat .ltzps-liczby { display: flex; flex-direction: column; gap: 8px; }
#ltzps-stat .ltzps-liczby > span { display: flex; flex-direction: column; align-items: center; }
#ltzps-stat b {
  font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 800; font-size: 26px;
  line-height: 1.1; color: #FFFFFF; font-variant-numeric: tabular-nums;
}
#ltzps-stat i { font-style: normal; font-size: 12px; color: #D5D9DD; text-transform: uppercase; letter-spacing: 1px; }
#ltzps-stat .ltzps-link { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--limonka); }

/* ---------- Tabele – pierwsza trójka lig (strona główna) ---------- */
#ltz-tabele { clear: both; margin: 18px 0 8px; text-align: left; }
.ltz-tabele-naglowek { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.ltz-tabele-naglowek h2 { margin: 0; font-family: 'Montserrat', 'Roboto', sans-serif; font-size: 22px; font-weight: 800; color: var(--grafit); }
.ltz-tabele-legenda { font-size: 12px; color: var(--tekst-2); }
.ltz-tabele-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ltz-tabela { background: var(--karta); border-radius: 14px; box-shadow: var(--cien); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ltz-tabela h3 { margin: 0; font-family: 'Montserrat', 'Roboto', sans-serif; font-size: 16px; font-weight: 700; color: var(--grafit); }
.ltz-tabela table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.ltz-tabela th { text-align: left; font-size: 11px; font-weight: 600; color: var(--tekst-2); padding: 2px 4px; }
.ltz-tabela th:nth-child(1) { width: 34px; }
.ltz-tabela th:nth-child(3), .ltz-tabela th:nth-child(4) { width: 38px; text-align: right; }
.ltz-tabela td { padding: 6px 4px; border-top: 1px solid var(--linia); vertical-align: middle; color: var(--tekst); }
.ltz-tabela td:nth-child(3), .ltz-tabela td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.ltz-tabela .ltz-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltz-tabela .ltz-pkt { font-weight: 700; }
.ltz-miejsce { display: inline-flex; width: 24px; height: 24px; border-radius: 12px; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #ECEEF0; color: var(--grafit); }
.ltz-m1 .ltz-miejsce { background: var(--limonka); color: var(--grafit-ciemny); }
.ltz-m1 .ltz-nazwa { font-weight: 700; }
.ltz-laduje { color: var(--tekst-2); font-size: 13px; text-align: center !important; padding: 14px 4px !important; }
a.ltz-tabela-link {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: var(--grafit);
  color: #FFFFFF !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
}
a.ltz-tabela-link:hover { background: var(--grafit-ciemny); }

/* ============================================================
   WERSJA NA TELEFON I TABLET (ekrany węższe niż 900 px)
   Działa po zmianie w index.php:
   <meta name="viewport" content="width=device-width, initial-scale=1">
   ============================================================ */
@media (max-width: 900px) {

  html, body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* Górny pasek: logo + ikony w jednym rzędzie, menu pod spodem */
  #header0_1100 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 6px 12px; }
  #logo, #social { float: none; padding-top: 0; margin: 0 !important; }
  #logo img { height: 32px; }
  #social img { height: 26px; }
  #menu0 { float: none; width: 100%; max-width: none; padding: 6px 0 4px; text-align: left; }
  #menu0 #menu_ul { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0; margin: 0; }
  #menu0 .menuli { float: none; padding-left: 0; }
  #menu0 a { display: inline-block; padding: 8px 0; font-size: 15px; }
  [class^="podulhiddenn"] { position: static !important; width: auto; padding: 4px 0 8px; }
  .podlihidden { width: auto; padding: 6px 10px; }

  /* Pasek wyników: przewijany palcem w bok */
  #relacjediv, #relacjediv_1100, #relacjediv_1000 { height: auto !important; min-height: 0; }
  #relacjediv_1100 { width: 100% !important; }
  #relacjediv_1000 { width: 100% !important; float: none; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 0 12px; box-sizing: border-box; }
  #relacjenav { display: none; }
  #relacjetabela { margin: 12px 8px 12px 0; height: auto; }
  #relacje { width: 220px; height: auto; }
  #relacje td { font-size: 13px; }

  /* Slider z logotypami */
  #slider { height: auto !important; padding-bottom: 6px; }
  #slider .slide { position: relative !important; height: auto !important; top: 0 !important; }
  #slider .slide:not(.active) { display: none !important; }
  #slider img { max-height: 120px !important; width: auto; }
  .slide_left { display: none; }

  /* Menu lig: jeden rząd przewijany w bok */
  #menu { padding: 6px 0; }
  #menu_ull { display: flex !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; padding: 0 10px; margin: 0; width: 100%; box-sizing: border-box; }
  #menu_ull .menuli { float: none; flex: 0 0 auto; padding-left: 0 !important; }
  #menu .menuli a { display: inline-block; padding: 10px 12px; font-size: 14px; white-space: nowrap; background: var(--tlo); }

  /* Treść: kolumny jedna pod drugą – najpierw aktualności, potem prawa i lewa kolumna */
  #content { display: flex !important; flex-direction: column; gap: 14px; padding: 12px !important; }
  #entry  { order: 1; width: auto !important; float: none; }
  #right  { order: 2; }
  #left   { order: 3; }
  #left, #right { float: none; width: 100% !important; margin: 0 !important; }
  #news { float: none; width: 100% !important; }
  #news > p img { width: 100% !important; height: auto; }
  #news > div[style*="float: left"] { float: none !important; width: 100% !important; margin: 12px 0 0 !important; }
  #news > div[style*="float: left"] a > div,
  #sekcja1 a > div { width: 100% !important; height: 0 !important; padding-bottom: 58%; background-size: cover !important; }
  #news h3 { font-size: 17px; padding: 10px 12px; margin: 0; }
  #sekcja1 { width: 100% !important; float: none; margin: 0 0 14px !important; min-height: 0; background: var(--karta); border-radius: 14px; box-shadow: var(--cien); overflow: hidden; }
  .news_wiecej { padding: 14px; }

  /* Licznik meczów w prawej kolumnie */
  #right > div[style*="height:140px"] { height: auto !important; }
  #licznik { position: relative !important; }
  #licznik .slide_img img { width: 100%; }

  /* Pasek logotypów na telefonie: mniejsze logo */
  .ltz-logotypy-1100 { padding: 8px 10px; gap: 8px 16px; }
  .ltz-logo img { height: 44px; }
  .ltz-logo:first-child { flex: 0 0 100%; }
  .ltz-logo:first-child img { height: 52px; }
  #ltz-urodziny { flex: 0 0 100%; justify-content: center; border-radius: 14px; font-size: 13px; }

  /* Tabele na telefonie: jedna pod drugą */
  .ltz-tabele-siatka { grid-template-columns: minmax(0, 1fr); }

  /* Kafelek LTZPŚ na telefonie: trzy liczby w jednym rzędzie */
  #ltzps-stat .ltzps-liczby { flex-direction: row; justify-content: space-around; }
  #ltzps-stat b { font-size: 22px; }

  /* Stopka */
  #podpis_1100 > div { width: 100% !important; float: none; }
  #pop { width: 92% !important; left: 4% !important; }
}