/* ==========================================================================
   Block „Lucyris Kreis" (lucyris/circle)

   Markup (vom Block gespeichert):
     <div class="wp-block-lucyris-circle" style="--lucyris-circle-radius:130px">
       … Inhalt …
     </div>

   Groesse: --lucyris-circle-radius kommt als Inline-Stil aus dem Block, der
   Wert hier ist nur der Rueckfall, falls das Attribut einmal fehlt.

   Farben: ueber die Standard-Farbsteuerung des Editors. Die Vorgaben stehen
   deshalb in :where() und haben Spezifitaet 0 -- jede im Editor gesetzte Farbe
   gewinnt, egal ob als Preset-Klasse oder als Inline-Stil.

   Frontend und Editor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container „Lucyris Kreise" (lucyris/circles)

     <div class="wp-block-lucyris-circles is-anordnung-reihe"> … </div>

   Nebeneinander bricht per flex-wrap von selbst um, sobald der Platz nicht
   reicht. Auf schmalen Bildschirmen stehen die Kreise dadurch untereinander,
   ohne dass es eine eigene Media Query braucht.
   -------------------------------------------------------------------------- */

.wp-block-lucyris-circles {
	display: flex;
	gap: 1.75rem;
}

.wp-block-lucyris-circles.is-anordnung-reihe {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.wp-block-lucyris-circles.is-anordnung-spalte {
	flex-direction: column;
	align-items: center;
}


/* --------------------------------------------------------------------------
   Einzelner Kreis
   -------------------------------------------------------------------------- */

.wp-block-lucyris-circle {
	--lucyris-circle-radius: 130px;

	width: calc(var(--lucyris-circle-radius) * 2);
	max-width: 100%;
	aspect-ratio: 1 / 1;   /* Hoehe folgt der Breite -> bleibt rund */
	border-radius: 50%;
	box-sizing: border-box;

	/* Innenabstand waechst mit dem Radius, sonst stoesst der Text bei kleinen
	   Kreisen an die Rundung. */
	padding: calc(var(--lucyris-circle-radius) * 0.28);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow-wrap: break-word;
}

/* Vorgabefarben ohne Spezifitaet. */
:where(.wp-block-lucyris-circle) {
	background-color: var(--wp--preset--color--custom-lucyris-red, #ba202e);
	color: var(--wp--preset--color--base-2, #ffffff);
}

/* Innere Gruppe soll die volle Breite nutzen und nicht zusätzlich einschnueren. */
.wp-block-lucyris-circle > .wp-block-group {
	width: 100%;
}

/* Vorgaben für den Inhalt.
   Nicht in :where(): die Global Styles des Themes setzen Farbe und Groesse der
   Ueberschriften ueber `:root :where(h1…h6)`, also mit Spezifitaet 0,1,0 --
   eine Regel ohne Spezifitaet verliert dagegen. Die Regeln hier liegen mit
   0,1,1 knapp darueber.

   Damit im Editor gesetzte Werte weiterhin gewinnen, steigen die Regeln per
   :not() aus, sobald der Block die entsprechende Klasse traegt: `has-text-color`
   bei eigener Textfarbe, `has-…-font-size` bei eigener Schriftgroesse. */
.wp-block-lucyris-circle :is(h1, h2, h3, h4, h5, h6, p, li):not(.has-text-color) {
	color: inherit;
}

.wp-block-lucyris-circle :is(h1, h2, h3, h4, h5, h6):not([class*="font-size"]) {
	font-size: 1.05rem;
	line-height: 1.2;
}
.wp-block-lucyris-circle p:not([class*="font-size"]) {
	font-size: 0.8rem;
	line-height: 1.45;
}

/* Das Theme legt per Global Styles einen Kasten hinter Überschriften. */
.wp-block-lucyris-circle :is(h1, h2, h3, h4, h5, h6) {
	background: none;
}