/* ==========================================================================
   Block „Lucyris L-Rahmen" (lucyris/l-frame)

   Markup (vom Block gespeichert):
     <div class="wp-block-lucyris-l-frame">
       <span class="lucyris-l-frame__corner lucyris-l-frame__corner--bl"></span>
       <span class="lucyris-l-frame__corner lucyris-l-frame__corner--tr"></span>
       … Inhalt …
     </div>

   Pro aktiver Ecke wird ein <span> gespeichert; jede Ecke ist eine eigene
   Regel und damit beliebig kombinierbar.

   Anpassbar ueber Custom Properties:
     --l-frame-len     Schenkellaenge der Ecke
     --l-frame-thick   Strichstaerke
     --l-frame-color   Farbe
   ========================================================================== */

.wp-block-lucyris-l-frame.wp-block-lucyris-l-frame {
	--l-frame-len:   42px;
	--l-frame-thick: 4px;
	--l-frame-color: var(--wp--preset--color--custom-lucyris-red, #ba202e);

	position: relative;   /* Anker fuer die Ecken */
	padding: 2.25rem 2.4rem;
	box-sizing: border-box;

	/* Der Rahmen ist so breit wie sein Inhalt, damit die rechten Ecken am Text
	   stehen und nicht am Rand der Inhaltsbreite. Laengerer Text bricht um und
	   fuellt die Breite -- die Ecken bleiben in beiden Faellen buendig. */
	width: fit-content;
	max-width: 100%;

	/* Das constrained-Layout zentriert jedes Kind:
	     .is-layout-constrained > :where(…) { margin-left: auto !important }
	   Ein Block, der schmaler ist als die Inhaltsbreite, saesse dadurch mittig.
	   Der linke Rand muss dort liegen, wo auch der uebrige Text beginnt: bei
	   breitem Fenster auf halber Strecke zwischen Containerrand und
	   Inhaltsbreite, sonst bei 0. Das !important ist noetig, weil die
	   Core-Regel eines hat. */
	margin-left: max( 0px, calc( ( 100% - var( --wp--style--global--content-size, 1280px ) ) / 2 ) ) !important;
	margin-right: auto !important;
}

/* Rechtsbuendig: dieselbe Rechnung gespiegelt. Wird über die Blockklasse
   gesetzt (Seitenleiste → Erweitert → Zusaetzliche CSS-Klasse), damit der Block
   kein neues Attribut braucht und bestehende Instanzen gueltig bleiben. */
.wp-block-lucyris-l-frame.is-rechtsbuendig {
	margin-left: auto !important;
	margin-right: max( 0px, calc( ( 100% - var( --wp--style--global--content-size, 1280px ) ) / 2 ) ) !important;
}

/* Zentriert: das Core-Verhalten des constrained-Layouts, das die Basisregel
   oben abschaltet. */
.wp-block-lucyris-l-frame.is-zentriert {
	margin-left: auto !important;
	margin-right: auto !important;
}

.lucyris-l-frame__corner {
	position: absolute;
	width: var(--l-frame-len);
	height: var(--l-frame-len);
	border: 0 solid var(--l-frame-color);
	pointer-events: none;
}

/* Jede Ecke setzt genau die zwei Kanten, die sie bilden. */
.lucyris-l-frame__corner--tl {   /* ⌈ oben links */
	top: 0;
	left: 0;
	border-top-width: var(--l-frame-thick);
	border-left-width: var(--l-frame-thick);
}
.lucyris-l-frame__corner--tr {   /* ⌉ oben rechts */
	top: 0;
	right: 0;
	border-top-width: var(--l-frame-thick);
	border-right-width: var(--l-frame-thick);
}
.lucyris-l-frame__corner--bl {   /* ⌊ unten links */
	bottom: 0;
	left: 0;
	border-bottom-width: var(--l-frame-thick);
	border-left-width: var(--l-frame-thick);
}
.lucyris-l-frame__corner--br {   /* ⌋ unten rechts */
	bottom: 0;
	right: 0;
	border-bottom-width: var(--l-frame-thick);
	border-right-width: var(--l-frame-thick);
}

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

@media (max-width: 781px) {
	.wp-block-lucyris-l-frame {
		--l-frame-len: 32px;
		padding: 1.75rem 1.9rem;
	}
}