/*
 * Szablony podstron: nagłówek podstrony, treść, lista wpisów, stronicowanie, 404.
 */

@layer components {
	.c-main:focus { outline: none; }


	.c-page-body { padding-block: var(--section-space); }

	.c-post-meta { color: var(--c-accent-text); font-size: var(--txt-body-2); }

	/* Stronicowanie: uklady.css (jedno miejsce od 22.10.2026). */

	.c-empty {
		padding: 2rem;
		background: var(--c-bg-soft);
		border: 1px solid var(--c-line);
	}
}

/* Karty wpisów (strona główna i archiwa): 2 kolumny jak w Figmie, jedna na telefonie. */
@layer components {
	.c-cards,
	.c-news__list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
		gap: 1.5rem;
	}
	.c-card {
		position: relative;
		display: flex;
		flex-direction: column;
		background: var(--c-bg);
	}
	.c-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
	.c-card__img { width: 100%; height: 100%; object-fit: cover; }
	.c-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: 1.5rem;
		border: 1px solid var(--c-line);
		border-block-start: 0;
	}
	.c-card:not(:has(.c-card__media)) .c-card__body { border-block-start: 1px solid var(--c-line); }
	.c-card__date { color: var(--c-accent-text); font-size: var(--txt-body-2); line-height: var(--leading-tight); }
	.c-card__title { font-size: var(--heading-h5); }
	.c-card__link { color: inherit; text-decoration: none; }
	.c-card__link::after { content: ""; position: absolute; inset: 0; }
	.c-card__link:focus-visible { outline: none; }
	.c-card:has(.c-card__link:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
	.c-card__excerpt { color: var(--c-text-2); line-height: 1.5; }
	.c-card .c-more { margin-block-start: auto; }
	.c-card:hover .c-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
	.c-card:hover .c-more .c-icon { transform: translateX(0.25rem); }
}

@layer components {
	.c-post-image { margin-block: 1.5rem; }
	.c-post-image img { width: 100%; height: auto; }
}

/*
 * Tabele: styl bloku tabeli z WordPressa daje pionowe linie. Do 22.10.2026 te reguły stały poza warstwą,
 * bo styl rdzenia był bez warstwy; teraz rdzeń jest w warstwie `wp`, a tabele w components.
 */
/* Tabele w treści: linie zamiast kart, bez zaokrągleń (DESIGN.md, prawo 4). */
@layer components {
	.c-content .wp-block-table { margin-block: 2rem; overflow-x: auto; }
	.c-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--txt-body-2); }
	.c-content .wp-block-table th,
	.c-content .wp-block-table td { border-inline: 0; border-block-start: 0; padding: 0.75rem 1rem 0.75rem 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--c-line); }
	.c-content .wp-block-table thead { border-block-end: 0; }
	.c-content .wp-block-table thead th { font-weight: 700; border-block-end: 2px solid var(--c-text); }
	.c-content .wp-block-table tbody th { font-weight: 700; }
	.c-content .wp-block-table figcaption { margin-block-start: 0.75rem; color: var(--c-text-2); font-size: var(--txt-body-2); }
}