/* ==========================================================================
   Gutenberg block styles for content pages ("Pôst alebo hladovanie?" et al.)
   Geometry/colors extracted from the 7/2026 A4 info-sheet PDF (vectors, ×2
   scale for the 1100px container). Typography maps to site tokens, not to
   the print scale — see tasks/hladovanie-web.md.
   Content markup stays clean (core blocks + class names); icons and the
   logo live here in CSS so the DB carries no theme URLs.
   ========================================================================== */

:root {
	--c-band: #E9F4E5;        /* header band fill (PDF vector) */
	--c-card-green: #F4F8E4;  /* green card fill (PDF vector) */
	--c-card-purple: #F8F1F7; /* purple card fill (PDF vector) */
	--c-note: #FCF2E1;        /* warning bar fill (PDF vector) */
	--radius-content: 17px;   /* PDF corner radius 8.5pt × 2 */
}

/* ---------- Intro band ---------- */

/* Page H1 renders above the band via the page.php template title (the PDF's
   in-band logo is dropped on the web — the site header already carries it). */
.hlad-band {
	background: var(--c-band);
	border-radius: var(--radius-content);
	box-shadow: var(--shadow-card);
	padding: 36px 56px 40px;
}
.hlad-band__subtitle {
	font-weight: 700;
	font-size: var(--fs-nav);
	margin: 0 0 22px;
}
.hlad-band .wp-block-columns { gap: 48px; }
.hlad-band p { margin: 0; }
.hlad-band__quote {
	font-style: italic;
	font-weight: 700;
	font-size: 22px;
}
.hlad-band p.hlad-band__cite {   /* element in selector outweighs .hlad-band p reset */
	text-align: right;
	margin-top: 6px;
}

/* ---------- Section headings ---------- */

.entry-content .hlad-h2 {
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--c-green-dark);
	text-align: center;
	margin: 24px 0 20px;    /* PDF: band→cards total gap 72px incl. heading box */
}

/* ---------- Card pairs ---------- */

.hlad-cards { gap: 32px; }   /* PDF: 16pt column gap ×2 */
.hlad-cards.wp-block-columns { margin-bottom: 0; }

.hlad-card {
	border-radius: var(--radius-content);
	box-shadow: var(--shadow-card);
	padding: 24px 28px 28px;
	height: 100%;
}
.is-style-hlad-card-green { background: var(--c-card-green); }
.is-style-hlad-card-purple { background: var(--c-card-purple); }

/* Classic theme (no theme.json): the group block wraps children in
   .wp-block-group__inner-container — the grid lives there. The second
   selector covers the block editor, where children are direct. */
.hlad-card > .wp-block-group__inner-container,
.editor-styles-wrapper .hlad-card {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	grid-template-areas: "title title" "icon body";
	column-gap: 34px;
	row-gap: 14px;
	align-items: start;
}

.hlad-card > .wp-block-group__inner-container::before,
.editor-styles-wrapper .hlad-card::before {
	/* icon circle (PDF: d=43pt → 86px), picked by the hlad-icon--* class */
	content: "";
	grid-area: icon;
	width: 86px; height: 86px;
	margin-top: 6px;
	background: var(--hlad-icon, none) center / contain no-repeat;
}
.hlad-icon--care    { --hlad-icon: url('../img/icons/post-care.svg'); }
.hlad-icon--hunger  { --hlad-icon: url('../img/icons/post-hunger.svg'); }
.hlad-icon--mind    { --hlad-icon: url('../img/icons/post-mind.svg'); }
.hlad-icon--crisis  { --hlad-icon: url('../img/icons/post-crisis.svg'); }
.hlad-icon--health  { --hlad-icon: url('../img/icons/post-health.svg'); }
.hlad-icon--nofood  { --hlad-icon: url('../img/icons/post-nofood.svg'); }

.hlad-card h3 {
	grid-area: title;
	font-size: var(--fs-benefit-title);
	font-weight: 700;
	line-height: var(--lh-heading);
	margin: 0;
}
.is-style-hlad-card-green h3 { color: var(--c-green-dark); }
.is-style-hlad-card-purple h3 { color: var(--c-purple); }

.hlad-card ul {
	grid-area: body;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Check / cross lists (block styles on core/list) ---------- */

.entry-content ul.is-style-hlad-check li,
.entry-content ul.is-style-hlad-cross li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 6px;
}
.entry-content ul.is-style-hlad-check li::before,
.entry-content ul.is-style-hlad-cross li::before {
	content: "";
	position: absolute;
	left: 0; top: 2px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background-color: currentColor;
	-webkit-mask: var(--check-mask) center / contain no-repeat;
	mask: var(--check-mask) center / contain no-repeat;
}
.entry-content ul.is-style-hlad-check li::before {
	color: var(--c-green);
	--check-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12.2 2.7 2.7L16 9.6"/></svg>');
}
.entry-content ul.is-style-hlad-cross li::before {
	color: var(--c-purple);
	--check-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></svg>');
}

/* ---------- Warning note bar ---------- */

.hlad-note {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 30px;
	align-items: center;
	background: var(--c-note);
	border-radius: var(--radius-content);
	box-shadow: var(--shadow-card);
	padding: 20px 32px;
	margin: 26px 0 0;    /* PDF: bar 13pt below cards ×2 */
}
.hlad-note::before {
	content: "";
	width: 56px; height: 56px;   /* PDF: badge d=28pt → 56px */
	background: url('../img/icons/warn.svg') center / contain no-repeat;
}
.hlad-note p { margin: 0; }
/* colored bold words use the editor's inline-color format (mark) — kill the
   default <mark> yellow highlight (scoped to note bars, not site-wide) */
.hlad-note mark.has-inline-color { background: transparent; }

/* ---------- Card footnote (under "Čo nie je pôst?" list) ---------- */

.hlad-card--with-footnote > .wp-block-group__inner-container,
.editor-styles-wrapper .hlad-card--with-footnote {
	grid-template-areas: "title title" "icon body" "footnote footnote";
}
.hlad-card .hlad-card__footnote {
	grid-area: footnote;
	margin: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 781px) {
	.hlad-band { padding: 28px 24px 32px; }
	.hlad-card > .wp-block-group__inner-container,
	.editor-styles-wrapper .hlad-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "title" "icon" "body";
	}
	.hlad-card--with-footnote > .wp-block-group__inner-container,
	.editor-styles-wrapper .hlad-card--with-footnote {
		grid-template-areas: "title" "icon" "body" "footnote";
	}
	.hlad-note {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
		padding: 24px;
	}
}

/* ---------- Plain content lists (subpages) ----------
   main.css applies a site-wide list reset (ul{list-style:none;padding:0}) for the
   custom-styled home page, which also stripped bullets from ordinary content lists
   on subpages. Redraw the bullet as a pseudo-element so it sits vertically centered
   on the first text line — the native marker rode high with Dongle's tight
   line-height. Icon lists (is-style-hlad-check/cross) and card/band/note lists are
   left untouched; they draw their own markers/layout. */
.entry-content ul:not(.is-style-hlad-check):not(.is-style-hlad-cross) {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1em;
}
.entry-content ul:not(.is-style-hlad-check):not(.is-style-hlad-cross) li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: 6px;
}
.entry-content ul:not(.is-style-hlad-check):not(.is-style-hlad-cross) li::before {
	content: "";
	position: absolute;
	left: 0.35em;
	top: 0.6em;                 /* vertical center of the first line (line-height 1.2 → 0.6em) */
	width: 0.32em;
	height: 0.32em;
	border-radius: 50%;
	background: currentColor;
	transform: translateY(-50%);
}
/* Ordered lists keep native numbering. */
.entry-content ol {
	list-style: decimal outside;
	padding-left: 1.6em;
	margin: 0 0 1em;
}
.entry-content ol li { margin-bottom: 6px; }

/* Card / band / note internal lists keep their custom (marker-free) layout. */
.entry-content .hlad-card ul,
.entry-content .hlad-band ul,
.entry-content .hlad-note ul {
	list-style: none;
	padding: 0;
}
.entry-content .hlad-card li::before,
.entry-content .hlad-band li::before,
.entry-content .hlad-note li::before {
	display: none;
}