/**
 * IT-Portal – Bausteine
 *
 * Block-Stile für Core-Blöcke. Auswahl im Editor unter „Stile“.
 * Namen: .is-style-<name> (registriert in inc/setup.php).
 */

/* --------------------------------------------------------------------------
 * Papier: weißes Blatt auf grauem Grund
 * ----------------------------------------------------------------------- */

.is-style-papier {
	padding: var(--wp--custom--papier--innen, 50px 60px);
	background: var(--itp-papier);
	border-radius: var(--itp-radius);
	box-shadow: var(--itp-schatten);
}

.is-style-papier > :first-child,
.is-style-papier > .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.is-style-papier > :last-child,
.is-style-papier > .wp-block-post-content > :last-child {
	margin-block-end: 0;
}

/* Lesefluss im Dokument. Bewusst niedrige Spezifität: Bausteine mit eigenen
   Klassen (Karten, Trefferliste …) setzen ihre Abstände selbst. */
.is-style-papier :is(h2, h3, h4):where(:not([class*="is-style-"])) {
	margin-block-start: 1.6em;
}

.is-style-papier :is(h3, h4):where(h2 + *, h3 + h4) {
	margin-block-start: 0.9em;
}

.is-style-papier :is(p, ul, ol, figure, table, div):where(h2 + *, h3 + *, h4 + *) {
	margin-block-start: 0.6em;
}

.is-style-papier :is(ul, ol):where(.wp-block-list:not([class*="is-style-"]), :not([class])) {
	padding-left: 1.4em;
}

.is-style-papier li:where(li + li) {
	margin-top: 0.25em;
}

/* --------------------------------------------------------------------------
 * Karte: ganz klickbar, wenn die Überschrift verlinkt ist
 * ----------------------------------------------------------------------- */

.is-style-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 25px;
	background: var(--itp-papier);
	border-radius: var(--itp-radius);
	box-shadow: var(--itp-schatten);
	transition: box-shadow var(--itp-uebergang);
}

.is-style-karte:hover,
.is-style-karte:focus-within {
	box-shadow: var(--itp-schatten-hoch);
}

/* Waagerechte Karte (Gruppe mit Zeilen-Layout), z. B. Infokarte mit Symbol */
.is-style-karte.is-layout-flex {
	flex-direction: row;
	padding-block: 20px;
}

/* Bild oben: randlos und gleich hoch */
.is-style-karte > .wp-block-image:first-child {
	margin: -25px -25px 0;
}

.is-style-karte > .wp-block-image:first-child img {
	display: block;
	width: 100%;
	aspect-ratio: 7 / 3;
	object-fit: cover;
	opacity: 0.92;
	transition: opacity var(--itp-uebergang), filter var(--itp-uebergang);
}

.is-style-karte:hover > .wp-block-image:first-child img {
	opacity: 1;
	filter: saturate(1.15);
}

.is-style-karte :is(h2, h3, h4) {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--gross);
}

.is-style-karte :is(h2, h3, h4) + * {
	margin-block-start: 8px;
}

.is-style-karte :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

/* Der Link der Überschrift deckt die ganze Karte ab. */
.is-style-karte :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.is-style-karte :is(h2, h3, h4) a:focus-visible {
	outline: none;
}

.is-style-karte:has(:is(h2, h3, h4) a:focus-visible) {
	outline: 2px solid var(--itp-akzent-dunkel);
	outline-offset: 2px;
}

.is-style-karte p {
	color: var(--itp-text-leise);
	font-size: 14px;
	line-height: 1.7;
}

/* Weitere Links in der Karte bleiben einzeln klickbar. */
.is-style-karte p a {
	position: relative;
	z-index: 2;
}

.is-style-karte > .wp-block-image:first-child {
	overflow: hidden;
	border-radius: var(--itp-radius) var(--itp-radius) 0 0;
}

/* Datums-Plakette oben rechts, z. B. bei Ankündigungen */
.is-style-karte > .is-style-plakette:first-child,
.is-style-karte > .wp-block-post-date:first-child {
	position: absolute;
	top: -12px;
	right: 15px;
	margin: 0;
}

.is-style-karte:has(> .is-style-plakette:first-child, > .wp-block-post-date:first-child) > :nth-child(2) {
	margin-top: 0;
}

/* Symbole in Karten nicht strecken */
.is-style-karte > .wp-block-itp-symbol {
	align-self: flex-start;
}

/* Symbol im Kreis (Block „Symbol“, Stil „Kreis“) */
.wp-block-itp-symbol.is-style-kreis {
	display: inline-grid;
	place-items: center;
	width: fit-content;
	padding: calc(var(--itp-symbol-groesse, 24px) * 0.45);
	background: var(--itp-primaer-hell);
	border-radius: 50%;
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Box mit Kopfleiste (Aufgabenbereiche)
 * Erstes Element (Überschrift oder Zeile mit Überschrift und Symbol) wird zur Leiste.
 * ----------------------------------------------------------------------- */

.is-style-box {
	padding-bottom: 18px;
	overflow: hidden;
	background: var(--itp-papier);
	border-radius: var(--itp-radius);
	box-shadow: var(--itp-schatten);
}

.is-style-box > * {
	margin-inline: 20px;
}

.is-style-box > :first-child {
	margin: 0 0 15px;
	padding: 9px 20px;
	background: var(--itp-primaer-hell);
	color: var(--itp-hell);
}

.is-style-box > :first-child :is(h2, h3, h4),
.is-style-box > :is(h2, h3, h4):first-child {
	margin: 0;
	color: var(--itp-hell);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}

.is-style-box > .wp-block-group:first-child {
	gap: 12px;
}

.is-style-box > .wp-block-group:first-child .itp-symbol {
	color: var(--itp-hell);
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
 * Band: dunkler, vollbreiter Abschnitt
 * ----------------------------------------------------------------------- */

.is-style-band {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--itp-primaer);
	color: var(--itp-hell);
}

.is-style-band :is(h1, h2, h3, h4) {
	color: var(--itp-hell);
}

.is-style-band a:not(.wp-element-button) {
	color: var(--itp-akzent);
}

.is-style-band a:not(.wp-element-button):hover {
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Kennzahl: Kachel mit farbiger Kante
 * ----------------------------------------------------------------------- */

.is-style-kennzahl {
	padding: 18px 18px 16px;
	background: var(--itp-hintergrund);
	border-left: 4px solid var(--itp-primaer);
	border-radius: 0 var(--itp-radius) var(--itp-radius) 0;
}

.is-style-kennzahl > * {
	margin: 0;
}

.is-style-kennzahl > :first-child {
	color: var(--itp-text);
	font-family: var(--wp--preset--font-family--ubuntu);
	font-size: var(--wp--preset--font-size--x-gross);
	font-weight: 500;
	line-height: 1.2;
}

.is-style-kennzahl > :first-child + * {
	margin-top: 4px;
	color: var(--itp-text-leise);
	font-size: var(--wp--preset--font-size--klein);
}

/* --------------------------------------------------------------------------
 * Überschriften
 * ----------------------------------------------------------------------- */

.is-style-punktlinie::after {
	content: "";
	display: block;
	width: var(--wp--custom--punktlinie--breite, 120px);
	height: 6px;
	margin-top: 10px;
	background: var(--itp-punkte);
}

.has-text-align-center.is-style-punktlinie::after {
	margin-inline: auto;
}

/* Punkte füllen den Raum links, Text rechtsbündig */
.is-style-punktlinie-seitlich {
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: right;
}

.is-style-punktlinie-seitlich::before {
	content: "";
	flex: 1;
	height: 6px;
	background: var(--itp-punkte);
	background-position: 3px 0;
}

/* Kleine Großbuchstaben über Titeln und Feldern */
.is-style-dachzeile,
.itp-kopf__dachzeile {
	color: var(--itp-akzent);
	font-family: var(--wp--preset--font-family--ubuntu);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.4;
	text-transform: uppercase;
}

h1.is-style-dachzeile,
h2.is-style-dachzeile,
h3.is-style-dachzeile,
h4.is-style-dachzeile,
h5.is-style-dachzeile,
h6.is-style-dachzeile {
	font-size: 13px;
	letter-spacing: 1.5px;
}

.is-style-papier .is-style-dachzeile,
.is-style-karte .is-style-dachzeile {
	color: var(--itp-akzent-dunkel);
}

/* --------------------------------------------------------------------------
 * Absätze: Hinweis, Warnung, Tipp, Plakette
 * ----------------------------------------------------------------------- */

:is(.is-style-hinweis, .is-style-warnung, .is-style-tipp) {
	--itp-kasten-farbe: var(--itp-primaer-hell);
	--itp-kasten-grund: #eef4fb;
	--itp-kasten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
	position: relative;
	padding: 14px 18px 14px 50px;
	background: var(--itp-kasten-grund);
	border-left: 4px solid var(--itp-kasten-farbe);
	border-radius: 0 var(--itp-radius) var(--itp-radius) 0;
}

:is(.is-style-hinweis, .is-style-warnung, .is-style-tipp)::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	width: 20px;
	height: 20px;
	background: var(--itp-kasten-farbe);
	-webkit-mask: var(--itp-kasten-symbol) center / contain no-repeat;
	mask: var(--itp-kasten-symbol) center / contain no-repeat;
}

.is-style-warnung {
	--itp-kasten-farbe: var(--wp--preset--color--kritisch);
	--itp-kasten-grund: #fdf0ef;
	--itp-kasten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

.is-style-tipp {
	--itp-kasten-farbe: var(--itp-akzent-dunkel);
	--itp-kasten-grund: var(--itp-akzent-zart);
	--itp-kasten-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5M9 18h6M10 22h4'/%3E%3C/svg%3E");
}

.is-style-plakette,
.is-style-karte > .wp-block-post-date:first-child {
	display: inline-block;
	width: fit-content;
	padding: 1px 7px;
	background: var(--wp--preset--color--info);
	border-radius: var(--itp-radius);
	color: var(--itp-text);
	font-size: 14px;
	line-height: 1.6;
	box-shadow: var(--itp-schatten);
	transition: background var(--itp-uebergang);
}

.is-style-karte:hover > .is-style-plakette,
.is-style-karte:hover > .wp-block-post-date:first-child {
	background: #b8d1ec;
}

/* --------------------------------------------------------------------------
 * Listen
 * ----------------------------------------------------------------------- */

.is-style-winkel {
	padding-left: 0;
	list-style: none;
}

.is-style-winkel li {
	position: relative;
	margin: 0;
	padding: 3px 0 3px 18px;
	font-size: 14px;
}

.is-style-winkel li::before {
	content: "›";
	position: absolute;
	left: 4px;
	color: var(--itp-text-leise);
	font-size: 16px;
	line-height: 1.4;
}

.is-style-winkel a {
	color: var(--itp-text);
}

.is-style-winkel a:hover {
	color: var(--itp-akzent-dunkel);
}

.is-style-locker li + li {
	margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
 * Bilder, Tabellen, Trenner
 * ----------------------------------------------------------------------- */

.is-style-screenshot img {
	border-top: 5px solid var(--itp-primaer-hell);
	border-radius: var(--itp-radius);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.wp-block-table table {
	border-collapse: collapse;
	font-size: 14px;
}

.wp-block-table :is(th, td) {
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--itp-linie);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead {
	border-bottom: 2px solid var(--itp-text);
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--ubuntu);
	font-weight: 500;
}

.is-style-raster :is(th, td) {
	border: 1px solid var(--itp-linie);
}

.is-style-raster thead th {
	background: var(--itp-hintergrund);
}

.is-style-raster thead {
	border-bottom: 0;
}

.wp-block-separator.is-style-punktlinie {
	width: 240px;
	height: 6px;
	margin-inline: auto;
	border: 0;
	background: var(--itp-punkte);
	opacity: 1;
}

/* Inline-Code und Kennungen (z. B. CPE) */
:not(pre) > code {
	padding: 1px 5px;
	background: var(--itp-hintergrund);
	border-radius: var(--itp-radius);
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: 0.88em;
}

/* --------------------------------------------------------------------------
 * Listen aus Abfragen: Kartenraster (Archiv) und Trefferliste (Suche)
 * ----------------------------------------------------------------------- */

.itp-kartenliste .wp-block-post-template {
	gap: 30px;
}

.itp-kartenliste .wp-block-post-template > li {
	display: flex;
}

.itp-kartenliste .is-style-karte {
	flex: 1;
}

.itp-trefferliste .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.itp-trefferliste .wp-block-post {
	padding: 18px 0;
	border-bottom: 1px solid var(--itp-linie);
}

.itp-trefferliste .wp-block-post:first-child {
	padding-top: 0;
}

.itp-trefferliste .wp-block-post > * {
	margin: 0;
}

.itp-trefferliste .itp-inhaltstyp {
	font-size: 12px;
	letter-spacing: 1.5px;
}

.itp-trefferliste .wp-block-post-title {
	margin-top: 2px;
	font-size: 20px;
}

.itp-trefferliste .wp-block-post-title a {
	color: var(--itp-text);
}

.itp-trefferliste .wp-block-post-title a:hover {
	color: var(--itp-akzent-dunkel);
}

.itp-trefferliste .wp-block-post-excerpt {
	margin-top: 6px;
	color: var(--itp-text-leise);
	font-size: 14px;
}

.itp-trefferliste .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wp-block-query-pagination {
	margin-top: 30px;
	font-family: var(--wp--preset--font-family--ubuntu);
	font-weight: 500;
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--itp-akzent-dunkel);
}