/* Tailwind CSS – custom styles for TPD Prose and related components */
/*
 * Distinct utility classes used in templates (extracted):
 * bg-white, block, container, flex, flex-1, flex-col, flex-none, flex-shrink-0,
 * font-light, font-medium, h-4, h-60, h-full, hover:underline, inline-flex,
 * items-center, justify-between, ml-2, mr-2, mt-2, mt-10, mx-auto, object-center,
 * object-cover, overflow-hidden, p-6, pb-2, pt-3, pt-12, px-2, px-4, py-10,
 * rounded-lg, shadow-lg, sm:flex-row, sm:max-w-xs, sm:mx-4, sm:overflow-x-scroll,
 * sm:space-x-8, sm:space-y-0, space-y-2, text-3xl, text-base, text-center,
 * text-green-500, text-slate-700, text-slate-800, text-slate-900, text-sm,
 * text-xs, w-4, w-full
 *
 * Note: `compensate-header` and `content` appear to be custom classes (not Tailwind
 * defaults). Define them below if you want them to do something.
 */

/* ---- Tailwind-like utility definitions (minimal) ---- */

/* Override Bootstrap CSS variables (must be loaded AFTER bootstrap.css) */

/* Bootstrap sets many pagination vars on `.pagination`; override there too. */
.pagination {
	--bs-pagination-active-color: #fff !important;
	--bs-pagination-active-bg: #614D41 !important;
	--bs-pagination-active-border-color: #614D41 !important;
 	--bs-pagination-focus-color: #614D41 !important;
	--bs-pagination-color: #475569 !important;
}

/* If you use Bootstrap 5.3+ color modes, you may also want: */
/*
[data-bs-theme="dark"] {
	--bs-pagination-active-bg: #614D41;
	--bs-pagination-active-color: #fff;
	--bs-pagination-active-border-color: #614D41;
*/


.bg-white { background-color: #fff; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

@media (min-width: 640px) {
	.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm\:auto-cols-max { grid-auto-columns: max-content; }
}

@media (min-width: 1024px) {
	.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lg\:col-span-3 { grid-column: span 3 / span 3; }
	.lg\:col-span-1 { grid-column: span 1 / span 1; }
}
.inline-flex { display: inline-flex; }

.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.h-4 { height: 1rem; }
.h-20 { height: 5rem; }
.h-px { height: 1px; }
.h-60 { height: 15rem; }
.h-\[420px\] { height: 420px; }
.h-full { height: 100%; }

.w-20 { width: 5rem !important; }
.w-22 { width: 5.5rem !important; }
.w-40 { width: 10rem !important; }
.w-60 { width: 15rem !important;}
.w-80 { width: 20rem !important; }
.w-120 { width: 25rem !important; }

.w-4 { width: 1rem; }
.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-1\/4 { width: 25%; }


.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } 
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } 
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.p-2 { padding: 0.5rem !important; }
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-12 { padding-top: 3rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

.rounded-sm { border-radius: 0.125rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-xl {
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.overflow-hidden { overflow: hidden; }

.min-w-0 { min-width: 0; }

.object-cover { object-fit: cover; }
.object-center { object-position: center; }

.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }


.text-center { text-align: center; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }

.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }

.text-green-500 { color: #22c55e; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-black { color: #000; }
.text-white { color: #fff; }

.hover\:underline:hover { text-decoration-line: underline; }

.hover\:shadow-lg:hover {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.hover\:shadow-xl:hover {
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.group:hover .group-hover\:scale-110 { transform: scale(1.10); }

.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.line-clamp-3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.line-clamp-4 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
	margin-top: 0.5rem;
}

/* container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 640px) {
	.container { max-width: 640px; }
	.sm\:mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.sm\:flex-row { flex-direction: row; }
	.sm\:max-w-xs { max-width: 20rem; }
	.sm\:overflow-x-scroll { overflow-x: scroll; }
	.sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; }
	.sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
}

@media (min-width: 768px) {
	.container { max-width: 768px; }
}

@media (min-width: 1024px) {
	.container { max-width: 1024px; }
}

@media (min-width: 1280px) {
	.container { max-width: 1280px; }
}

@media (min-width: 1536px) {
	.container { max-width: 1536px; }
}



/* ================================
   TPD PROSE – typografia artykułu
   ================================ */

:root {
	--tpd-primary: #614D41;
	--tpd-surface-bg: #FAF7F2;
   }

    h5.wp-block-heading {
   	font-weight: 600;
	line-height: 150%;
   }


   .tpd-article-header h1 {
    color: #fff;
    text-align: center;
    font-family: serif;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.25;
    font-weight: 600;
    position: relative;
    align-self: stretch;
    max-width: 900px;
   }

.tpd-prose {
	--tpd-text: #111;
	--tpd-muted: #555;

	color: var(--tpd-text);
	line-height: 1.75;
	font-size: 1rem;
}

/* paragraphs */
.tpd-prose :where(p):not(.not-prose *) {
	margin: 1.25em 0;
}

/* headings */
.tpd-prose :where(h2):not(.not-prose *) {
	font-size: 1.6em;
	margin-top: 2.2em;
	margin-bottom: 0.8em;
	line-height: 1.25;
	font-weight: 600;
}

.tpd-prose :where(h3):not(.not-prose *) {
	font-size: 1.3em;
	margin-top: 1.8em;
	margin-bottom: 0.6em;
	font-weight: 600;
}

/* lists */
.tpd-prose :where(ul, ol):not(.not-prose *) {
	padding-left: 1.25em;
	margin: 1.5em 0;
}

.tpd-prose :where(li):not(.not-prose *) {
	margin: 0.4em 0;
}

/* links */
.tpd-prose :where(a):not(.not-prose *) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* images */
.tpd-prose :where(img):not(.not-prose *) {
	margin: 2em auto;
	border-radius: 4px;
}

/* blockquote / hero-break coexistence */
.tpd-prose :where(blockquote):not(.not-prose *) {
	font-size: 1.3em;
	margin: 2.5em auto;
	padding-left: 1.2em;
	border-left: 5px solid var(--tpd-primary);
}

@media (min-width: 1024px) {
	.tpd-prose-xl {
		font-size: 1.125rem;
	}

	.tpd-prose-xl :where(h2):not(.not-prose *) {
		font-size: 1.8em;
		line-height: 1.15;
	}
}


/* ================================
   TPD – Bibliografia (stopka)
   ================================ */


.tpd-prose .tkd-bibliography-footer {
	margin-top: 3em;          /* było 4em */
	padding-top: 1.5em;       /* było 2em */
	border-top: 1px solid #e5e5e5;
}

/* list wrapper */
.tpd-prose .tkd-bibliography-list {
	margin-top: 1em;          /* było 1.5em */
}

/* single item */
.tpd-prose .tkd-bibliography-item {
	padding: 0.9em 1.2em;     /* 👈 MNIEJ */
	background: #f7f7f7;
	border-radius: 4px;
	line-height: 1.45;        /* było 1.55 */
}

/* title */
.tpd-prose .tkd-bibliography-title {
	margin: 0;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--tpd-text);
}

/* meta: authors + journal */
.tpd-prose .tkd-bibliography-meta {
	margin: 0.5em 0 0;
	font-size: 0.9em;
	color: var(--tpd-muted);
}

/* link */
.tpd-prose .tkd-bibliography-link a {
	color: #7f6f55;                 /* trochę ciemniejszy */
	font-weight: 600;               /* było 500 */
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.tpd-prose .tkd-bibliography-link a::after {
	content: " ↗";
	font-size: 0.9em;
}


.tpd-prose .tkd-bibliography-link a:hover {
	text-decoration: underline;
}

/* ================================
   FIX: spacing w bibliografii
   ================================ */

/* reset prose margins */
.tpd-prose .tkd-bibliography-item p {
	margin: 0;
}

/* compact spacing – jak przypis */
.tpd-prose .tkd-bibliography-title {
	margin-bottom: 0.25em;    /* było 0.4em */
	font-size: 1em;
	font-weight: 500;
}

.tpd-prose .tkd-bibliography-meta {
	margin-top: 0.15em;       /* było 0.25em */
	font-size: 0.9em;
	color: var(--tpd-muted);
}

.tpd-prose .tkd-bibliography-link {
	margin-top: 0.35em;       /* było 0.5em */
	font-size: 0.85em;
}

.tpd-prose .tkd-bibliography-item {
	font-size: 0.95em;
}


/* ================================
   Inline product – editorial style
   ================================ */

.tkd-product-inline {
	display: grid;
	grid-template-columns: 180px 1fr; /* SZERSZA KOLUMNA NA ZDJĘCIE */
	gap: 1.75em;
	margin: 3em 0;
	padding: 1.5em;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	align-items: stretch; /* ważne */
}

/* media column fills full height */
.tkd-product-media {
	display: block;
	height: 100%;
}

/* image stretches to column height */
.tkd-product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #e5e5e5;
	display: block;
}


/* content */
.tkd-product-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* title */
.tkd-product-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.35;
}

.tkd-product-title a {
	color: inherit;
	text-decoration: none;
}

/* price */
.tkd-product-price {
	margin-top: 0.4em;
	font-size: 1.1rem;
	font-weight: 700;
	color: #111;
}

/* text next to product */
.tkd-product-text {
	margin-top: 0.6em;
	color: #555;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* CTA – spokojny, nie agresywny */
.tkd-product-cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.9em;
	padding: 0.45em 0.9em;
	border-radius: 4px;
	background: #3b7f3b;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.tkd-product-cta:hover {
	background: #2f6a2f;
}

/* ================================
   Pull quote – editorial style
   ================================ */

.tkd-pull-quote {
	margin: 3.5em 0;
	padding: 2.5em 2.5em;
	background: #f6f5f3;              /* delikatne, ciepłe tło */
	border-left: 5px solid var(--tpd-primary);      /* klasyczny editorial akcent */
}

/* main quote text */
.tkd-pull-quote-text {
	margin: 0;
	font-family: serif;
	font-size: 1.9rem;
	line-height: 1.35;
	font-weight: 600;
	color: #111;
}

/* meta / confidence interval */
.tkd-pull-quote-meta {
	margin-top: 0.8em;
	font-size: 0.9rem;
	color: #666;
}

@media (max-width: 640px) {
	.tkd-pull-quote {
		padding: 2em 1.5em;
	}

	.tkd-pull-quote-text {
		font-size: 1.5rem;
	}
}

/* ======================================
   RESPONSIVE: bibliografia i pull-quote
   ====================================== */

/* bibliografia – ramki i tło na mobilkach */
@media (max-width: 768px) {
	.tpd-prose .tkd-bibliography-list {
		padding: 0.6em 0.6em;
	}

	.tpd-prose .tkd-bibliography-item {
		padding: 0.8em 1em;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		background: #fafafa;
	}
}

/* pull-quote – ramka + spacing na mobilkach */
@media (max-width: 768px) {
	.tkd-pull-quote {
		padding: 1.8em 1.4em;
		border-left-width: 5px;
		margin: 2.5em 0;
		background: --var(--tpd-primary);
	}

	.tkd-pull-quote-text {
		font-size: 1.5rem;
		line-height: 1.4;
	}
}

@media (max-width: 768px) {
	.tkd-product-inline {
		grid-template-columns: 1fr;
		padding: 1.4em 1.2em;
		margin: 2em 0;
	}

	.tkd-product-media {
		height: 220px; /* wysokość obrazu w mobilce */
		margin-bottom: 1em;
	}

	.tkd-product-content {
		text-align: left;
	}
}


@media (max-width: 768px) {
	.tpd-prose .tkd-bibliography-title {
		margin-bottom: 0.2em;
		font-size: 0.98em;
	}

	.tpd-prose .tkd-bibliography-meta {
		margin-top: 0.2em;
		font-size: 0.88em;
	}

	.tpd-prose .tkd-bibliography-link {
		margin-top: 0.3em;
		font-size: 0.85em;
	}
}


@media (max-width: 768px) {
  .tpd-prose h2, .tpd-prose h3 { margin-top: 1.6em; }
  .tpd-prose p { margin: 1em 0; }
}

@media (max-width: 768px) {
	.tpd-prose {
		line-height: 1.65;
	}

	.tpd-prose p {
		margin: 1em 0;
	}

	.tpd-prose h2 {
		margin-top: 1.6em;
		margin-bottom: 0.6em;
	}

	.tpd-prose h3 {
		margin-top: 1.4em;
		margin-bottom: 0.5em;
	}
}

@media (max-width: 768px) {
	.tkd-pull-quote {
		padding: 1.5em 1.2em;
		margin: 2.2em 0;
		background: #f6f4ee;
	}

	.tkd-pull-quote-text {
		font-size: 1.45rem;
		line-height: 1.35;
	}
}

@media (max-width: 768px) {
	.tpd-prose .tkd-bibliography-item {
		background: #fafafa;
		border: 1px solid #e5e5e5;
		box-shadow: 0 1px 3px rgba(0,0,0,0.03);
	}

	.tpd-prose .tkd-bibliography-link a {
		display: inline-block;
		padding: 0.4em 0;
	}
}

@media (max-width: 768px) {
	.tkd-product-inline {
		margin: 2.2em 0;
		padding: 1.2em;
	}

	.tkd-product-title {
		font-size: 1.25rem;
	}

	.tkd-product-cta {
		margin-top: 0.7em;
	}
}

.tpd-prose h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--tpd-primary);
	margin-top: 0.6em;
}