/*
Theme Name:  wpwFootball
Description: Serwis klubu piłkarskiego. Tabele, terminarze, herby i puchar biorą się wyłącznie z wtyczki Liga Sync. Mobile-first, bez build tools.
Author:      wpw
Author URI:  https://wpwaiters.com
Version:     1.0.0
Requires PHP: 7.4
Text Domain: wpwFootball
*/

/* ====== tokens ======
 *
 * Roles, not colour names. A club playing in red would have a stylesheet full
 * of `--navy` holding red, and the next person to read it would trust the name
 * over the value.
 *
 * Three sources feed the club colours, in this order: the Liga Sync plugin
 * (palette computed by the hub), the theme's own Customizer fields, and the
 * defaults below. The plugin wins on purpose — it is the single place where a
 * club corrects its palette, and without that order every club gets a header
 * in one navy next to a table in another. Whatever wins is resolved in PHP and
 * emitted as one `:root` block after this file (inc/appearance.php); the
 * values here are what a site with no plugin and an untouched Customizer gets.
 *
 * Meanings that deliberately do not follow the club: the green of a win, the
 * red of a loss, the referee's cards. A club playing in red would otherwise
 * get a red dot next to a match it won.
 */
:root {
	/* leading colour — dark panels, headings, our own club */
	--brand: #063D66;
	/* the same colour as ink on a light surface, darkened until it can be read
	   there: a club playing in yellow would otherwise write its own name in
	   yellow on white. Identical to --brand whenever the brand is dark enough. */
	--brand-ink: #063D66;
	--brand-d: #052F50;  /* ciemniejsza płaszczyzna — hover i rozwijane menu */
	--on-brand: #FFFFFF;
	--on-brand-soft: rgba(255, 255, 255, .82);
	--on-brand-dim: rgba(255, 255, 255, .15);

	/* accent — links, buttons, active states. NOT the navigation: that band
	   is the club's own colour, so it takes --brand. */
	--accent: #0077C0;
	--accent-d: #00568F;   /* darker fill — dropdown, hover */
	--accent-ink: #00568F; /* the accent as readable ink (small text) */
	--accent-lg: #0077C0;  /* the same for large text and graphics */
	--on-accent: #FFFFFF;
	--on-accent-soft: rgba(255, 255, 255, .82);
	--on-accent-dim: rgba(255, 255, 255, .15);

	/* third club colour — badges, active menu item, rule under a heading */
	--highlight: #F8E91D;
	--on-highlight: var(--brand);

	/* surfaces */
	--page: #E7E4DD;
	--surface: #fff;
	--surface-alt: #FAF9F6;
	--strip: #F1EFEA;
	--line: #EFEDE8;
	--line-strong: #E8E6E0;
	--text: #2E2E2E;
	--muted: #5E5A50;
	--active-bg: #E9F4FC;   /* podkład pozycji wybranej */
	--ph: #E2E5E8;
	--ph-alt: #EDEFF2;

	/* fixed meanings — outside personalisation on purpose */
	--win: #2F7D3A;
	--win-bg: #EEF6EE;
	--draw: #A5A093;
	--loss: #C6483C;
	--down: #E4B5AF;
	--down-bg: #FDF3F2;
	--card-yellow: #F8E91D;
	--card-red: #C6483C;
	--cert-gold: #F3E3B3;
	--cert-gold-ink: #6B5310;
	--cert-silver: #E4E7EA;
	--cert-silver-ink: #4A5158;
	--cert-bronze: #EBD8C6;
	--cert-bronze-ink: #6E4A2C;
	--cert-green: #D8EBD5;
	--cert-green-ink: #2F5C2A;

	--quote-bg: #F5F8FB;
	--highlight-glow: rgba(248, 233, 29, .3);
	--focus-ring: rgba(0, 119, 192, .15);

	--shadow: 0 2px 8px rgba(6, 61, 102, .07);
	--shadow-lg: 0 2px 10px rgba(6, 61, 102, .08);
	--shadow-menu: 0 10px 24px rgba(6, 61, 102, .25);
	--cond: 'Barlow Condensed', sans-serif;
	--sans: 'Barlow', system-ui, -apple-system, sans-serif;
}

/* ====== base ====== */
* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--page);
	font-family: var(--sans);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	line-height: 1.5;
}
a { color: var(--accent-ink); text-decoration: none; }
/*
 * Hover is an underline, not a colour shift: the old shift went from the darker
 * accent to the lighter one, which for a club playing in yellow means a link
 * that disappears on the way to being clicked.
 *
 * But only where a link is a piece of text. The crest, a menu item and a news
 * card are links too, and an underline running under a logo or across a whole
 * tile reads as a fault rather than as feedback — those have their own hover
 * states, or need none because nothing about them looks like prose.
 */
.page-content a:hover,
.single-content a:hover,
.section-head a:hover,
.cert-link:hover,
.toc a:hover,
.page-nav a:hover,
.back-link:hover,
.sf-links a:hover,
.sf-ippx:hover,
.source a:hover,
.note a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 12px 32px; }
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--brand); color: var(--on-brand); padding: 10px 16px;
}
.skip-link:focus { left: 0; color: var(--on-brand); }
body.menu-open { overflow: hidden; }
[hidden] { display: none !important; } /* atrybut hidden ma wygrywać z display:flex/grid */

/* etykiety kondensowane */
.side-label, .card-head, .group-head, .switcher-label {
	font-family: var(--cond);
	text-transform: uppercase;
	letter-spacing: .2em;
}

/* ====== header mobile ====== */
.mh {
	display: flex; align-items: center; gap: 12px;
	height: 62px; padding: 0 12px 0 14px;
	background: var(--brand);
}
.mh-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
/* Logo poziome bywa szerokie. Na wąskim telefonie musi mieć się jak skurczyć,
   inaczej wypycha nazwę klubu poza ekran. Herbu kwadratowego to nie dotyka —
   38 px nie zbliża się do tego progu. */
.mh-brand img { display: block; max-width: 42vw; height: auto; }
.mh-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mh-name strong {
	font: 700 21px/1 var(--cond); letter-spacing: .02em;
	text-transform: uppercase; color: var(--on-brand);
}
.mh-name em {
	font: 600 9px/1 var(--cond); font-style: normal;
	letter-spacing: .26em; text-transform: uppercase; color: var(--on-brand-soft);
}
.mh-burger {
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px;
	background: var(--on-brand-dim); cursor: pointer;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.mh-burger span { display: block; width: 20px; height: 2px; background: var(--on-brand); border-radius: 2px; }

/* ====== header desktop ====== */
.dh { display: none; background: var(--surface); }
.dh-in {
	max-width: 1280px; margin: 0 auto;
	display: flex; align-items: center; gap: 16px; height: 88px; padding: 0 40px;
}
/* Bez `flex: 1` — inaczej odnośnik do strony głównej rozciąga się przez cały
   nagłówek i kliknięcie w pustkę tuż obok profili prowadzi na stronę główną.
   Profile odsuwa `margin-left: auto`, nie rozpychanie herbu. */
.dh-brand { display: flex; align-items: center; gap: 16px; }
.dh-name { display: flex; flex-direction: column; gap: 4px; }
.dh-name strong { font: 700 30px/1 var(--cond); text-transform: uppercase; color: var(--brand-ink); }
.dh-name em {
	font: 600 11px/1 var(--cond); font-style: normal;
	letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.dh-socials { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dh-social {
	display: flex; align-items: center; gap: 8px; padding: 9px 14px;
	border: 1px solid var(--line-strong); border-radius: 8px;
	font: 600 13px/1 var(--sans); color: var(--accent-ink);
}
.dh-social-bare { padding: 9px; }
.social-ico { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; }
.social-ico-lg { width: 34px; height: 34px; }

/* ====== nawigacja desktop ====== */
.dnav-bar { display: none; background: var(--brand); }
.dnav-in { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.dnav .menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dnav .menu > li { position: relative; }
.dnav .menu > li > a {
	display: block; padding: 0 16px;
	font: 700 16px/52px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--on-brand);
}
.dnav .menu > li.menu-item-has-children > a::after { content: '▾'; font-size: 12px; margin-left: 7px; }
.dnav .menu > li:hover > a,
.dnav .menu > li.current-menu-item > a,
.dnav .menu > li.current-menu-ancestor > a { background: var(--brand-d); color: var(--on-brand); }
.dnav .sub-menu {
	display: none; position: absolute; left: 0; top: 100%; z-index: 40;
	min-width: 190px; margin: 0; padding: 6px 0; list-style: none;
	background: var(--brand-d); box-shadow: var(--shadow-menu); border-radius: 0 0 8px 8px;
}
.dnav .menu > li:hover .sub-menu, .dnav .menu > li:focus-within .sub-menu { display: block; }
.dnav .sub-menu a { display: block; padding: 10px 16px; font: 500 15px/1 var(--sans); color: var(--on-brand-soft); }
.dnav .sub-menu a:hover { background: var(--on-brand-dim); color: var(--on-brand); }

/* ====== menu mobile (overlay) ====== */
.mnav-overlay {
	position: fixed; inset: 0; z-index: 90; overflow: auto;
	background: var(--brand);
}
.mnav-top {
	display: flex; align-items: center; gap: 12px;
	height: 62px; padding: 0 12px 0 14px;
	border-bottom: 1px solid var(--on-brand-dim);
}
.mnav-top span { flex: 1; font: 700 21px/1 var(--cond); text-transform: uppercase; color: var(--on-brand); }
.mnav-close {
	width: 44px; height: 44px; border: 0; border-radius: 8px;
	background: var(--on-brand-dim); color: var(--on-brand); font: 400 22px/1 var(--sans); cursor: pointer;
}
.mnav .menu { margin: 0; padding: 0; list-style: none; }
.mnav .menu > li > a {
	display: flex; align-items: center; justify-content: space-between;
	height: 56px; padding: 0 16px;
	border-bottom: 1px solid var(--on-brand-dim);
	font: 700 20px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--on-brand);
}
.mnav .menu-item-has-children > a::after { content: '▾'; font-size: 14px; }
.mnav .menu-item-has-children.is-open > a { background: var(--brand-d); color: var(--on-brand); }
.mnav .menu-item-has-children.is-open > a::after { content: '▴'; }
.mnav .sub-menu { display: none; margin: 0; padding: 0 0 6px; list-style: none; background: var(--brand-d); }
.mnav .menu-item-has-children.is-open > .sub-menu { display: block; }
.mnav .sub-menu a {
	display: flex; align-items: center; height: 46px; padding: 0 16px 0 30px;
	font: 500 15px/1 var(--sans); color: var(--on-brand-soft);
}
.mnav-socials { display: flex; flex-direction: column; padding: 12px 16px 22px; }
.mnav-socials a {
	display: flex; align-items: center; gap: 12px; padding: 8px 0;
	font: 600 14px/1 var(--sans); color: var(--on-brand);
}

/* ====== karty ====== */
.card {
	background: var(--surface); border-radius: 12px; overflow: hidden;
	box-shadow: var(--shadow); display: block;
}
.card.pad { padding: 14px; }
.card-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	height: 34px; padding: 0 12px;
	font-weight: 700; font-size: 12px; line-height: 1;
}
.card-head-accent { background: var(--accent); color: var(--on-accent); }
.card-head-brand { background: var(--brand); color: var(--on-brand); }
.card-head-note { font: 500 11px/1 var(--cond); letter-spacing: .14em; }
.card-head-accent .card-head-note { color: var(--on-accent-soft); }
.card-head-brand .card-head-note { color: var(--on-brand-soft); }
.badge {
	display: inline-block; padding: 3px 8px; border-radius: 4px;
	/* --on-highlight, not --brand-ink: the ink is guaranteed readable on the
	   surface, not on the highlight — a club with a dark third colour got a red
	   caption on a red pill */
	background: var(--highlight); color: var(--on-highlight);
	font: 700 10px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase;
}
.side-label { font-weight: 700; font-size: 11px; line-height: 1; color: var(--muted); margin-bottom: 12px; }

/* ====== pigułki / przełączniki ====== */
.switcher {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 2px; margin-bottom: 4px;
}
.switcher-col { flex-direction: column; align-items: flex-start; }
.switcher-label { font-weight: 600; font-size: 11px; letter-spacing: .18em; color: var(--muted); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
	display: inline-block; height: 30px; padding: 0 14px; border: 0; border-radius: 999px;
	background: var(--strip); color: var(--muted); cursor: pointer;
	font: 700 13px/30px var(--cond); letter-spacing: .12em; text-transform: uppercase;
}
.pill.is-active { background: var(--accent); color: var(--on-accent); }
.pill-brand.is-active { background: var(--brand); color: var(--on-brand); }

/* ====== strona główna ====== */
/* The match bar needs room under the navigation: both are painted in the
   club's colour and, touching, read as one block. When the team switcher sits
   between them the switcher's own padding does that job, so the gap shrinks. */
.front { padding-top: 16px; }
.front.has-switcher { padding-top: 4px; }
.hero-band { margin-bottom: 8px; }

/* sekcje */
.section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	padding: 14px 0 8px;
}
.section-head h1, .section-head h2 {
	margin: 0; font: 700 24px/1 var(--cond); letter-spacing: .06em;
	text-transform: uppercase; color: var(--brand-ink);
}
.section-head a {
	font: 700 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
}

/* aktualności */
.news-grid { display: flex; flex-direction: column; gap: 12px; }
.news-card a { display: block; color: inherit; }
.news-thumb { aspect-ratio: 2 / 1; background: repeating-linear-gradient(135deg, var(--ph) 0 10px, var(--ph-alt) 10px 20px); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-body { padding: 12px 14px 14px; }
.news-meta { display: flex; align-items: center; gap: 10px; }
.news-body h3 { margin: 8px 0 6px; font: 700 21px/1.12 var(--cond); color: var(--text); }
.news-excerpt { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.news-date { font: 400 12px/1 var(--sans); color: var(--muted); }

/* certyfikat szkółki */
.cert-img { display: block; margin: 0 auto; max-width: 240px; }
.cert-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 2px; }
.cert-name { font: 700 12px/1.35 var(--cond); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.cert-level {
	padding: 5px 13px; border-radius: 999px;
	font: 700 11px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase;
}
.cert-level-gold { background: var(--cert-gold); color: var(--cert-gold-ink); }
.cert-level-silver { background: var(--cert-silver); color: var(--cert-silver-ink); }
.cert-level-bronze { background: var(--cert-bronze); color: var(--cert-bronze-ink); }
.cert-level-green { background: var(--cert-green); color: var(--cert-green-ink); }
.cert-link {
	display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
	font: 500 12px/1 var(--sans); color: var(--accent-ink); text-align: center;
}

/* kafel profilu społecznościowego */
.social-card { display: flex; align-items: center; gap: 12px; padding: 14px; color: inherit; }
.social-card .social-ico-lg { width: 40px; height: 40px; color: var(--accent-lg); }
.social-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.social-txt strong { font: 700 17px/1.1 var(--cond); text-transform: uppercase; color: var(--text); }
.social-txt em { font: 400 13px/1.3 var(--sans); font-style: normal; color: var(--muted); }
.social-arrow { font: 700 18px/1 var(--cond); color: var(--accent-lg); }

/* sponsorzy */
.sponsor-imgs { display: flex; flex-direction: column; gap: 10px; }
.sponsor-imgs img { display: block; margin: 0 auto; border-radius: 6px; max-width: 160px; }
.sponsor-name {
	display: block; text-align: center; padding: 10px 0;
	font: 700 16px/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}
.sponsor-block .side-label + .side-label, .sponsor-block .sponsor-imgs + .side-label { margin-top: 18px; }
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.partner {
	height: 52px; border: 1px solid var(--line); border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font: 400 11px/1 var(--sans); color: var(--muted); padding: 6px;
}
.partner img { max-height: 100%; object-fit: contain; }

/* układ kolumnowy strony głównej */
.front-cols { display: flex; flex-direction: column; }
.front-side { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }

/* ====== stopka ====== */
.partners-strip { display: none; background: var(--surface); border-top: 1px solid var(--line-strong); } /* mobile: partnerzy w sidebarze */
.ps-in {
	max-width: 1280px; margin: 0 auto;
	display: flex; align-items: center; gap: 24px; padding: 20px 40px;
}
.ps-in .side-label { margin: 0; }
.ps-in .partner-grid { flex: 1; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.site-footer { background: var(--brand); }
.sf-in { max-width: 1280px; margin: 0 auto; padding: 20px 16px 26px; }
.sf-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 18px; }
.sf-links a {
	font: 700 14px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
	color: var(--on-brand-soft); padding: 8px 0;
}
.sf-bottom {
	display: flex; align-items: center; gap: 10px;
	padding-top: 14px; border-top: 1px solid var(--on-brand-dim);
}
/* An image in a flex row shrinks before the text does, and a mark with the club
   name inside it is wider than a crest — so this one keeps its width. */
.sf-logo { flex: none; }
.sf-copy { flex: 1; font: 400 11px/1.4 var(--sans); color: var(--on-brand-soft); }
.sf-ippx { font: 400 12px/1 var(--sans); color: var(--on-brand-soft); }

/* ====== archiwum ====== */
.pagination { padding: 20px 0; text-align: center; font: 600 14px/1 var(--sans); }
.pagination .nav-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span.current {
	display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow);
}
.pagination span.current { background: var(--accent); color: var(--on-accent); }
.empty-note, .note { font: 400 14px/1.5 var(--sans); color: var(--muted); padding: 12px 2px; }
.source { font: 400 12px/1.4 var(--sans); color: var(--muted); padding: 0 2px; }

/* ====== wpis (3a/3b) ====== */
.back-link {
	display: flex; align-items: center; gap: 8px; margin: 0 -12px 12px; padding: 11px 14px;
	background: var(--surface); border-bottom: 1px solid var(--line-strong);
	font: 700 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
}
.single-cols { display: flex; flex-direction: column; gap: 16px; }
.single-hero img { width: 100%; display: block; }
.single-head { padding: 16px 16px 4px; }
.single-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.single-date { font: 400 12px/1 var(--sans); color: var(--muted); }
.single-head h1 { margin: 10px 0 8px; font: 700 30px/1.06 var(--cond); color: var(--brand-ink); }
.single-content { padding: 2px 16px 8px; }
.single-content > p { font: 400 16px/1.62 var(--sans); margin: 0 0 14px; max-width: 70ch; }
.single-foot {
	display: flex; align-items: center; justify-content: space-between;
	margin: 8px 16px 0; padding: 16px 0 18px; border-top: 1px solid var(--line);
	font: 700 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
}

/* zobacz też */
.related { padding-top: 16px; }
.related-title {
	margin: 0 0 10px; font: 700 20px/1 var(--cond); letter-spacing: .06em;
	text-transform: uppercase; color: var(--brand-ink);
}
.related-list { display: flex; flex-direction: column; gap: 10px; }
.related-card { display: flex; gap: 12px; color: inherit; }
.related-thumb { width: 104px; flex: 0 0 auto; background: repeating-linear-gradient(135deg, var(--ph) 0 8px, var(--ph-alt) 8px 16px); }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-body { padding: 10px 12px 10px 0; display: flex; flex-direction: column; gap: 4px; }
.related-body strong { font: 700 16px/1.15 var(--cond); color: var(--text); }
.related-body em { font: 400 12px/1 var(--sans); font-style: normal; color: var(--muted); }
.related-excerpt { font: 400 13px/1.5 var(--sans); color: var(--muted); }

/* ====== kadra (blok wpwfootball/squad) ====== */
/* Nagłówek sekcji kadry. Niesie pozycję dla całej grupy — stąd rozmiar
   nagłówka, a nie etykiety: przy dwunastupikselowym napisie oko czyta go jak
   podpis pierwszego kafla i pozycja zaczyna się prosić o powtórzenie pod
   każdym zdjęciem. */
.group-head {
	margin: 26px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font: 700 20px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
	color: var(--brand-ink);
}
.squad-section:first-child .group-head { margin-top: 8px; }

/* kadra */
.kadra-list { display: flex; flex-direction: column; gap: 6px; }
.kadra-row {
	display: flex; align-items: center; gap: 12px;
	background: var(--surface); border-radius: 10px; padding: 8px 12px;
}
.kadra-nr {
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
	background: var(--brand); color: var(--on-brand);
	font: 700 14px/30px var(--cond); text-align: center;
}
.kadra-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.kadra-name { font: 600 15px/1.3 var(--sans); }
/* Funkcja tuż za nazwiskiem, nie dopchnięta do prawej krawędzi. Przy karcie
   szerokiej na 760 px `margin-left: auto` odsyłał ją tak daleko, że przestawała
   wyglądać na opis tej osoby. */
/* Jedna wyszarzona linia na osobę — funkcja, rocznik, poprzedni klub, co klub
   sobie wpisze. Wcześniej były dwie i renderowały się tak samo. */
.kadra-note { font: 400 13px/1.3 var(--sans); color: var(--muted); }
.kadra-note::before { content: '·'; margin: 0 6px 0 2px; }
.kadra-foto-ph {
	background: repeating-linear-gradient(135deg, var(--ph) 0 6px, var(--ph-alt) 6px 12px);
	display: none;
}

/*
 * Siatka ze zdjęciami — styl bloku „Siatka".
 *
 * Układ jak na stronach klubowych, do których to ma być podobne: portretowe
 * zdjęcie na całą szerokość kafla, pod nim nazwisko, a pod nazwiskiem funkcja
 * i opis. Zdjęcie jest portretem 3:4, bo taką proporcję mają zdjęcia zawodników
 * — kwadrat obcinałby je w pasie albo zostawiał powietrze nad głową.
 */
.is-style-grid .kadra-list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px;
}
.is-style-grid .kadra-row {
	position: relative;
	flex-direction: column; align-items: stretch; text-align: center;
	gap: 0; padding: 0 0 14px; overflow: hidden;
	background: var(--surface-alt); border: 1px solid var(--line);
}
.is-style-grid .kadra-foto {
	width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
	display: block; border-radius: 0; margin-bottom: 12px;
}
.is-style-grid .kadra-foto-ph { display: block; }
/* Numer na zdjęciu, nie obok: kafel jest wąski, a numer obok nazwiska
   zabierałby jej połowę szerokości. */
.is-style-grid .kadra-nr {
	position: absolute; top: 8px; left: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.is-style-grid .kadra-name {
	display: block; padding: 0 10px;
	font: 700 15px/1.25 var(--cond); letter-spacing: .04em; text-transform: uppercase;
	color: var(--brand-ink);
}
.is-style-grid .kadra-note {
	display: block; padding: 2px 10px 0;
	font-size: 12px; line-height: 1.35; color: var(--muted);
}
.is-style-grid .kadra-note::before { content: none; }

/* ====== strona tekstowa (3c) ====== */
.page-text { padding-top: 24px; }
.page-cols { display: flex; flex-direction: column; gap: 16px; }
/* mobile: submenu nad treścią, sponsorzy/partnerzy pod nią */
.page-side { display: contents; }
.page-main, .page-article { order: 1; }
.page-side .sponsor-block { order: 2; }
.submenu-link {
	display: block; padding: 11px 14px; border-bottom: 1px solid var(--line);
	border-left: 3px solid transparent; font: 500 15px/1 var(--sans); color: var(--text);
}
.submenu-link:last-child { border-bottom: 0; }
.submenu-link.is-active { border-left-color: var(--highlight); background: var(--active-bg); font-weight: 700; color: var(--accent-ink); }
.toc { display: flex; flex-direction: column; }
.toc a { font: 500 14px/1.3 var(--sans); color: var(--accent-ink); padding: 4px 0; }
.page-article { padding: 24px 20px 30px; }
.page-section-label { font: 600 12px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.page-article h1 { margin: 10px 0 0; font: 700 42px/1 var(--cond); text-transform: uppercase; color: var(--brand-ink); }
.rule { width: 64px; height: 4px; background: var(--highlight); margin: 18px 0 24px; }
.page-content { font: 400 17px/1.72 var(--sans); }
.page-content > p { max-width: 70ch; margin: 12px 0 0; }
.page-content > p:first-child { font-size: 19px; line-height: 1.6; margin-top: 0; }
.page-content h2 {
	margin: 34px 0 4px; font: 700 15px/1 var(--cond); letter-spacing: .2em;
	text-transform: uppercase; color: var(--accent-ink);
}
.page-content figure { margin: 30px 0 0; }
.page-content figure img { border-radius: 10px; display: block; }
.page-content figcaption { margin-top: 8px; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.page-content blockquote {
	margin: 28px 0 0; padding: 20px 24px; max-width: 66ch;
	background: var(--quote-bg); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0;
}
.page-content blockquote p { margin: 0; font: 600 19px/1.5 var(--sans); color: var(--brand-ink); }
.page-content .wp-block-gallery, .page-content .gallery { margin-top: 26px; }
.page-nav {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
	font: 700 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
}

/* ====== bloki treści (Gutenberg) ====== */
.single-content h2 {
	margin: 30px 0 4px; font: 700 15px/1.2 var(--cond);
	letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink);
}
.single-content h3, .page-content h3 {
	margin: 26px 0 4px; font: 700 20px/1.2 var(--cond);
	text-transform: uppercase; color: var(--brand-ink);
}
.single-content ul, .single-content ol,
.page-content ul, .page-content ol {
	margin: 12px 0 0; padding-left: 22px; max-width: 70ch;
	font: 400 17px/1.7 var(--sans);
}
.single-content li + li, .page-content li + li { margin-top: 6px; }
.single-content li::marker, .page-content li::marker { color: var(--accent-lg); }

.single-content .wp-block-image, .page-content .wp-block-image { margin: 22px 0; }
.single-content .wp-block-image img, .page-content .wp-block-image img { border-radius: 10px; display: block; }
.single-content figcaption, .page-content figcaption {
	margin-top: 8px; font: 400 13px/1.4 var(--sans); color: var(--muted);
}
.single-content .wp-block-gallery, .page-content .wp-block-gallery { margin: 22px 0; gap: 10px; }
.single-content .wp-block-gallery img, .page-content .wp-block-gallery img { border-radius: 8px; }

.single-content blockquote, .single-content .wp-block-quote {
	margin: 24px 0; padding: 18px 22px; max-width: 66ch;
	background: var(--quote-bg); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0;
}
.single-content blockquote p { margin: 0; font: 600 18px/1.5 var(--sans); color: var(--brand-ink); }

.wp-block-button__link {
	display: inline-block; padding: 12px 26px; border-radius: 8px;
	background: var(--accent); color: var(--on-accent); text-decoration: none;
	font: 700 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
	transition: background .15s;
}
.wp-block-button__link:hover { background: var(--accent-d); color: var(--on-accent); }
.is-style-outline .wp-block-button__link { background: none; border: 2px solid var(--accent); color: var(--accent-ink); }

.wp-block-file {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 18px 0; padding: 12px 14px;
	background: var(--strip); border-radius: 10px;
	font: 500 15px/1.4 var(--sans);
}
.wp-block-file a { color: var(--accent-ink); }
.wp-block-file .wp-block-file__button {
	margin-left: auto; padding: 9px 16px; border-radius: 6px;
	background: var(--accent); color: var(--on-accent);
	font: 700 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
}

.wp-block-table { margin: 22px 0; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; font: 400 15px/1.5 var(--sans); }
.wp-block-table th {
	background: var(--strip); padding: 9px 12px; text-align: left;
	font: 700 11px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.wp-block-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }

/* hr/separator jak żółty podkreślnik tytułów — spójny akcent motywu */
.single-content hr, .page-content hr, .wp-block-separator {
	border: 0; width: 64px; height: 4px; margin: 32px auto;
	background: var(--highlight); border-radius: 2px;
}
.single-content .wp-block-embed, .page-content .wp-block-embed { margin: 22px 0; }
.single-content .wp-block-embed iframe, .page-content .wp-block-embed iframe { max-width: 100%; border-radius: 10px; }

/* ====== formularz kontaktowy (Contact Form 7) ====== */
.wpcf7 { max-width: 560px; }
.wpcf7 p { margin: 0 0 6px; font: 600 14px/1.4 var(--sans); color: var(--text); }
.wpcf7 p:has(.wpcf7-form-control-wrap) { margin-bottom: 18px; font-weight: 400; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-text, .wpcf7-textarea, .wpcf7 select {
	width: 100%; padding: 11px 14px;
	border: 1px solid var(--line-strong); border-radius: 8px;
	background: var(--surface); color: var(--text);
	font: 400 15px/1.4 var(--sans);
	transition: border-color .15s, box-shadow .15s;
}
.wpcf7-text:focus, .wpcf7-textarea:focus, .wpcf7 select:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--focus-ring);
}
.wpcf7-textarea { min-height: 150px; resize: vertical; }
.wpcf7-submit {
	display: inline-block; padding: 12px 28px; border: 0; border-radius: 8px;
	background: var(--accent); color: var(--on-accent); cursor: pointer;
	font: 700 15px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
	transition: background .15s;
}
.wpcf7-submit:hover { background: var(--accent-d); }
.wpcf7-spinner { margin-left: 10px; }
.wpcf7-not-valid { border-color: var(--loss); }
.wpcf7-not-valid-tip { margin-top: 5px; font: 400 13px/1.4 var(--sans); color: var(--loss); }
.wpcf7-response-output {
	margin: 18px 0 0 !important; padding: 12px 14px !important;
	border: 0 !important; border-left: 4px solid var(--accent) !important;
	border-radius: 0 8px 8px 0; background: var(--quote-bg);
	font: 500 14px/1.5 var(--sans); color: var(--brand-ink);
}
.wpcf7-form.sent .wpcf7-response-output { border-left-color: var(--win) !important; background: var(--win-bg); color: var(--win); }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output { border-left-color: var(--loss) !important; background: var(--down-bg); color: var(--loss); }

/* ====== desktop ====== */
@media (min-width: 1024px) {
	.wrap { padding-left: 40px; padding-right: 40px; padding-bottom: 40px; }
	.mh { display: none; }
	.dh, .dnav-bar { display: block; }
	.mnav-overlay { display: none; }
	.back-link { margin: 12px 0; background: none; border: 0; padding: 0 0 4px; }


	.front { padding-top: 24px; }
	.front.has-switcher { padding-top: 8px; }
	.front-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; padding-top: 12px; }
	.front-side { margin-top: 52px; }
	.section-head h2 { font-size: 32px; }
	.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.news-grid-archive { grid-template-columns: repeat(3, 1fr); }
	.news-body h3 { font-size: 23px; }

	.sf-in { padding: 22px 40px 28px; display: flex; flex-direction: column; }
	.sf-links { display: flex; gap: 20px; margin-bottom: 14px; }

	/* wpis: treść + prawa szyna */
	.single-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
	.side-mecze { display: flex; flex-direction: column; gap: 16px; }
	.single-head { padding: 26px 40px 0; }
	.single-head h1 { font-size: 46px; }
	.single-content { padding: 8px 40px 8px; }
	.single-content > p { font-size: 17px; line-height: 1.66; }
	.single-foot { margin: 8px 40px 0; }
	.related-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

	/* strona tekstowa */
	.page-cols { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
	.page-article { padding: 36px 48px 44px; }
	.page-article h1 { font-size: 54px; }

	/* desktop: partnerzy tylko w pasie nad stopką */
	.partners-strip { display: block; }
	.sponsor-partners { display: none; }
	.partner { height: 62px; }

	/* desktop: szyna wraca do lewej kolumny gridu */
	.page-side { display: flex; flex-direction: column; gap: 16px; }
	.page-main, .page-article, .page-side .sponsor-block { order: 0; }



}

@media (max-width: 1023.98px) {
	.dh, .dnav-bar { display: none; }
	.side-mecze { display: none; }
}

/* Four or more teams wrap the pills into rows on a phone; a label on their
   left would waste a column the pills need, so it moves on top. A tablet has
   the width for both. */
@media (max-width: 499.98px) {
	.switcher-many { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ====== typografia desktop — bez mikroskopijnych rozmiarów ====== */
@media (min-width: 1024px) {
	.card-head { height: 38px; font-size: 13px; padding: 0 14px; }
	.card-head-note { font-size: 13px; }
	.badge { font-size: 13px; padding: 4px 10px; }
	.pill { height: 34px; padding: 0 16px; font-size: 14px; line-height: 34px; }
	.side-label { font-size: 13px; }
	.switcher-label { font-size: 13px; }
	.section-head a { font-size: 14px; }
	.back-link { font-size: 14px; }


	/* aktualności */
	.news-meta { gap: 12px; }
	.news-date { font-size: 14px; }
	.news-excerpt { font-size: 15px; }
	.related-body strong { font-size: 18px; }
	.related-body em { font-size: 13px; }
	.related-excerpt { font-size: 14px; }
	.single-meta .single-date { font-size: 14px; }
	.single-foot { font-size: 15px; }


	/* kadra */
	.kadra-name { font-size: 16px; }
	.kadra-note { font-size: 14px; }
	.kadra-nr { width: 34px; height: 34px; font-size: 15px; line-height: 34px; }


	/* nagłówek, szyna, strony */
	.dh-social { font-size: 14px; }
	.dnav .sub-menu a { font-size: 16px; }
	.submenu-link { padding: 12px 16px; font-size: 16px; }
	.toc a { font-size: 15px; padding: 5px 0; }
	.page-section-label { font-size: 13px; }
	.page-nav { font-size: 14px; }
	.single-content figcaption, .page-content figcaption { font-size: 14px; }

	/* sponsorzy i stopka */
	.partner { font-size: 13px; }
	.cert-name { font-size: 13px; }
	.cert-link { font-size: 14px; }
	.sf-links a { font-size: 15px; }
	.sf-copy { font-size: 13px; }
	.sf-ippx { font-size: 13px; }
}

/* ───────────────────── poprawki do bloków Liga Sync ─────────────────────
   Motyw nie rysuje danych meczowych — robi to wtyczka — ale arkusz motywu
   ładuje się po jej arkuszu, więc to jest miejsce na drobne korekty układu,
   których wtyczka nie może przewidzieć dla każdego szablonu.                */

/* Plakietka rozgrywek pucharowych znika na wąskim ekranie.

   Ma `white-space: nowrap`, a nazwa pucharu bywa długa („Steakownia Store
   Puchar Polski"). Środkowa kolumna wiersza ma na telefonie 5em, więc
   plakietka wychodziła poza nią i kładła się na nazwach obu klubów.

   Ukrycie, a nie zawijanie ani skracanie, bo ta informacja jest w wierszu
   DRUGI RAZ: lewa rubryka mówi „Puchar" nad datą. Zawinięta plakietka
   rozpychałaby wiersz na trzy linie, a ucięta multiplikowałaby nazwę sponsora
   w połowie słowa. */
@media (max-width: 640px) {
	.ligasync-cup {
		display: none;
	}
}

/* Wiersz terminarza na telefonie: dwa wiersze zamiast czterech kolumn.

   Na desktopie wiersz to cztery kolumny — rubryka z kolejką, gospodarz, wynik,
   gość. Na ekranie szerokim na 300 px rubryka zabierała półtora centymetra
   z lewej, a na resztę zostawało tyle, że „MKS Mazur Ełk" łamało się na trzy
   linie i wchodziło na wynik.

   Układ:

       herb      4. KOL.      herb
                  23.08
       nazwa       3:4        nazwa

   Kolumna środkowa ma `auto`, czyli szerokość swojej zawartości. Rubryka
   z kolejką stoi w niej w PIONIE i to jest tu istotne: „4. KOL." nad „23.08"
   jest o połowę węższe niż to samo w jednej linii, więc środek zostaje wąski,
   a szerokość idzie do nazw. Ustawiona poziomo rozpychała go na kilka
   centymetrów po to, żeby pokazać pod spodem „vs".

   Bez pozycjonowania bezwzględnego. Próbowałem nim wyjąć rubrykę z wymiarowania
   siatki i blok zawierający wypadł inaczej, niż zakładałem — data wylądowała
   w połowie wiersza, na wyniku i na nazwach.

   ZNACZNIK ZOSTAJE NIETKNIĘTY. Herb i nazwa siedzą razem w jednym `<div>`,
   więc kolumna klubu dostaje `display: contents` — jej pudełko znika, a `<img>`
   i `<span>` stają się elementami siatki nadrzędnej i sadza się je w obszarach.
   Cena: znikają style zadane na tym pudełku, więc `text-align` i `min-width: 0`
   trzeba powtórzyć na dzieciach. To drugie nie jest kosmetyką — bez niego długa
   nazwa nie ma jak się złamać. */
@media (max-width: 640px) {
	.ligasync-match {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			"domherb  kiedy  goscherb"
			"domnazwa srodek goscnazwa";
		align-items: center;
		gap: 6px 8px;
	}

	.ligasync-side {
		display: contents;
	}

	/* Herb odrobinę większy niż 20 px z arkusza wtyczki: stoi teraz sam nad
	   nazwą, więc ma na to miejsce — przy nazwie pod spodem 20 px wyglądało
	   jak przypis. */
	.ligasync-side img {
		justify-self: center;
		width: 26px;
		height: 26px;
	}

	.ligasync-side span {
		min-width: 0;
		text-align: center;
	}

	.ligasync-side--home img  { grid-area: domherb; }
	.ligasync-side--home span { grid-area: domnazwa; }
	.ligasync-side--away img  { grid-area: goscherb; }
	.ligasync-side--away span { grid-area: goscnazwa; }

	/* Kolejka nad datą, czyli kierunek z arkusza wtyczki — zmienia się samo
	   miejsce. Dwie krótkie linie zamiast jednej długiej to jedyny powód,
	   dla którego `auto` w środkowej kolumnie tu wystarcza. */
	.ligasync-when {
		grid-area: kiedy;
		align-items: center;
		text-align: center;
	}

	.ligasync-middle {
		grid-area: srodek;
	}
}

/* Strona z terminarzem albo tabelą traci na telefonie białą kartę.

   `.page-article` to karta z tłem, cieniem i paddingiem 24/20/30 — dobra dla
   tekstu, który potrzebuje marginesu i podkładu pod literami. Blok wtyczki
   jest już kartą: każdy mecz i każdy wiersz tabeli ma własne tło i zaokrąglenie.
   Biała karta pod białymi kartami niczego nie wnosi, a zabiera po 20 px z obu
   stron — na ekranie szerokim na 300 px to jedna siódma szerokości, i to
   dokładnie tam, gdzie nazwy klubów walczą o każdy znak.

   `:has()` zamiast klasy na `<body>`: strona z terminarzem nie różni się od
   innych niczym, co motyw by o niej wiedział — blok wstawia w treść człowiek
   w edytorze. Pytanie „czy ta strona zawiera terminarz" zadaje więc CSS
   o zawartość, a nie PHP o slug, którego klub może jutro zmienić.
   Przeglądarka bez `:has()` zostawia kartę jak dotąd i nic się nie psuje.

   Nagłówek strony zostaje wcięty, żeby „TERMINARZ" nie stał inaczej niż na
   pozostałych podstronach — znika sama podkładka pod blokiem. */
@media (max-width: 640px) {
	.page-article:has(.ligasync-schedule),
	.page-article:has(.ligasync-table),
	.page-article:has(.ligasync-rounds) {
		background: none;
		box-shadow: none;
		border-radius: 0;
	}

	/* Padding kartki ZOSTAJE, a poza niego wychodzi sama treść z blokiem.
	   Nagłówek, kreska i nawigacja stoją więc dokładnie tam, gdzie stały —
	   nietknięte.

	   Pierwsze podejście robiło odwrotnie: zerowało padding kartki i dokładało
	   go dzieciom. Dla nagłówka to wychodziło na to samo, ale `.rule` to pasek
	   o szerokości 64 px Z TŁEM, a tło maluje się także pod paddingiem. Kreska
	   urosła więc do 104 px i zaczynała się przy krawędzi zamiast pod „T"
	   w nagłówku. Ujemny margines na treści nie ma tej wady, bo nie dotyka
	   żadnego elementu, który coś maluje. */
	.page-article:has(.ligasync-schedule) .page-content,
	.page-article:has(.ligasync-table) .page-content,
	.page-article:has(.ligasync-rounds) .page-content {
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* Tabela na telefonie: widok skrócony i pełny.

   Pełna tabela ma dziewięć kolumn. Na trzystu pikselach nazwa klubu dostaje
   z tego tyle, że „MMKS Concordia Elbląg" łamie się na trzy linie, a wiersz
   rośnie do wysokości akapitu — przy szesnastu drużynach strona robi się
   dwa razy dłuższa, niż powinna.

   Domyślny jest więc widok skrócony: miejsce, herb, nazwa, mecze, punkty.
   To komplet, po który sięga kibic sprawdzający, kto prowadzi. Reszta —
   bilans zwycięstw, bramki i forma — czeka pod przyciskiem, a tam tabela
   przewija się w poziomie zamiast ściskać kolumny.

   Klasy kolumn są w znaczniku wtyczki NIEKONSEKWENTNE: nagłówek ma
   `ligasync-col-goals` i `ligasync-col-pts`, a komórka pod nim `ligasync-goals`
   i `ligasync-pts`. Trzeba więc wymieniać oba warianty; pominięcie jednego daje
   tabelę z nagłówkiem bez kolumny albo odwrotnie. */
@media (max-width: 640px) {
	/* Układ i odstępy bierze `ligasync-pills` z arkusza wtyczki. Tutaj zostaje
	   sam margines dolny — pigułki wtyczki mają 6 px, a nad tabelą, która nie
	   ma nad sobą paska tytułowego, to za mało. */
	.wpwf-tabela-widok {
		margin-bottom: 12px;
	}

	.ligasync-table:not(.wpwf-tabela--pelna) .ligasync-col-wdl,
	.ligasync-table:not(.wpwf-tabela--pelna) .ligasync-col-goals,
	.ligasync-table:not(.wpwf-tabela--pelna) .ligasync-goals,
	.ligasync-table:not(.wpwf-tabela--pelna) .ligasync-col-form {
		display: none;
	}

	/* Nazwa w jednej linii — po odsianiu czterech kolumn jest na nią miejsce,
	   a to ona była powodem, dla którego wiersze rosły. */
	.ligasync-table:not(.wpwf-tabela--pelna) .ligasync-club {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Widok pełny: nic nie chowamy, a tabela dostaje własne przewijanie
	   w poziomie. `min-width` na tabeli jest konieczny — bez niego komórki
	   ścisnęłyby się do szerokości ekranu i przewijać nie byłoby czego. */
	.ligasync-table.wpwf-tabela--pelna {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ligasync-table.wpwf-tabela--pelna table {
		min-width: 560px;
	}

	/* Przebija regułę arkusza wtyczki, która chowa bilans na wąskim ekranie. */
	.ligasync-table.wpwf-tabela--pelna .ligasync-col-wdl {
		display: table-cell;
	}
}

/* Przełącznik widoku tabeli wstawia JavaScript zawsze — tu decyduje się, kiedy
   go widać. Powyżej 640 px pełna tabela mieści się bez ściskania, więc nie ma
   czego przełączać, a widok skrócony musi zejść z drogi razem z nim: bez tego
   szerokie ekrany zostałyby z czterema kolumnami. */
.wpwf-tabela-widok {
	display: none;
}

@media (max-width: 640px) {
	.wpwf-tabela-widok {
		display: flex;
		margin-bottom: 12px;
	}
}

/* Herb w pasku meczowym na telefonie: ramka szersza niż wyższa.

   Arkusz wtyczki daje tam 52×52. Kwadrat mierzy znak poziomy bokiem, którego
   w nim najwięcej, więc logo z nazwą klubu wchodzi jako 52×30 i obok okrągłego
   herbu rywala wygląda na dwa razy mniejsze. Wysokość zostaje, rośnie sama
   szerokość — herb okrągły zatrzymuje się jak dotąd na 52 px i nie zmienia się
   ani o piksel, bo dalej ogranicza go wysokość i `object-fit: contain`. */
@media (max-width: 640px) {
	.ligasync-bar-club img {
		width: 72px;
		height: 52px;
	}
}