/* ==========================================================================
   OPUS Kreisblock – Frontend v1.4.0
   Globale Atmosphaere (alle Kreise gleichzeitig):
     .opus-kb--pulse-on  | --pulse-off
     .opus-kb--scale-none | --scale-subtle | --scale-normal | --scale-strong
     .opus-kb--shadow-none | --shadow-subtle | --shadow-normal | --shadow-dramatic
     .opus-kb--has-ring (Container-Ring an, sonst aus)
   Pro-Kreis-Pinsel (.opus-kb__item-Modifier):
     .opus-kb__item--mode-{hover|always-soft|always-solid|hidden}
     .opus-kb__item--pill-{filled|outline|outline-filled}
     .opus-kb__item--has-ring
   ========================================================================== */

/* Container */
.opus-kb {
	display: grid;
	grid-template-columns: repeat(var(--opus-kb-cols, 4), minmax(0, 1fr));
	gap: var(--opus-kb-gap, 24px);
	width: 100%;
	max-width: var(--opus-kb-max-width, var(--wp--style--global--wide-size, 1100px));
	margin: 0 auto;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	justify-items: center;
	border: 0; /* Defense-in-Depth: TT5 Substring-Selector */
}

/* Item */
.opus-kb__item {
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--opus-kb-item-size, 220px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #e9edf0;
	text-decoration: none;
	color: inherit;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.35s ease,
	            outline-color 0.35s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Ring um Container - via outline (respektiert border-radius in modernen Browsern) */
.opus-kb__item--has-ring,
.opus-kb--has-ring .opus-kb__item:not(.opus-kb__item--has-ring) {
	outline: var(--opus-kb-ring-w, 0px) solid var(--opus-kb-ring-color, transparent);
	outline-offset: 0;
}

/* ---------- PULSE-ANIMATION (4 Intensitaeten + on/off) ---------- */
.opus-kb--pulse-on .opus-kb__item {
	animation: opusKbPulseNormal 4s ease-in-out infinite;
}
.opus-kb--pulse-on .opus-kb__item:nth-child(4n+1) { animation-delay: 0s; }
.opus-kb--pulse-on .opus-kb__item:nth-child(4n+2) { animation-delay: 0.7s; }
.opus-kb--pulse-on .opus-kb__item:nth-child(4n+3) { animation-delay: 1.4s; }
.opus-kb--pulse-on .opus-kb__item:nth-child(4n+4) { animation-delay: 2.1s; }

.opus-kb--pulse-off .opus-kb__item { animation: none; }

/* Schatten-Intensitaeten (rest = ruhend, pulse-peak = Animation-Spitze) */
.opus-kb--shadow-none .opus-kb__item    { box-shadow: none; animation-name: opusKbPulseNone; }
.opus-kb--shadow-subtle .opus-kb__item  { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); animation-name: opusKbPulseSubtle; }
.opus-kb--shadow-normal .opus-kb__item  { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); animation-name: opusKbPulseNormal; }
.opus-kb--shadow-dramatic .opus-kb__item{ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); animation-name: opusKbPulseDramatic; }
.opus-kb--pulse-off .opus-kb__item      { animation-name: none; }

@keyframes opusKbPulseNone {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.025); }
}
@keyframes opusKbPulseSubtle {
	0%, 100% { transform: scale(1);     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); }
	50%      { transform: scale(1.025); box-shadow: 0 3px 10px rgba(12, 166, 56, 0.12); }
}
@keyframes opusKbPulseNormal {
	0%, 100% { transform: scale(1);     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
	50%      { transform: scale(1.035); box-shadow: 0 6px 18px rgba(12, 166, 56, 0.22); }
}
@keyframes opusKbPulseDramatic {
	0%, 100% { transform: scale(1);     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
	50%      { transform: scale(1.05);  box-shadow: 0 14px 40px rgba(12, 166, 56, 0.45); }
}

/* ---------- HOVER-SCALE ---------- */
.opus-kb--scale-none .opus-kb__item:hover,
.opus-kb--scale-none .opus-kb__item:focus-visible,
.opus-kb--scale-none .opus-kb__item:focus-within { transform: scale(1.0); }

.opus-kb--scale-subtle .opus-kb__item:hover,
.opus-kb--scale-subtle .opus-kb__item:focus-visible,
.opus-kb--scale-subtle .opus-kb__item:focus-within { transform: scale(1.04); }

.opus-kb--scale-normal .opus-kb__item:hover,
.opus-kb--scale-normal .opus-kb__item:focus-visible,
.opus-kb--scale-normal .opus-kb__item:focus-within { transform: scale(1.08); }

.opus-kb--scale-strong .opus-kb__item:hover,
.opus-kb--scale-strong .opus-kb__item:focus-visible,
.opus-kb--scale-strong .opus-kb__item:focus-within { transform: scale(1.15); }

/* Hover-Schatten je Intensitaet */
.opus-kb--shadow-none .opus-kb__item:hover     { box-shadow: none; }
.opus-kb--shadow-subtle .opus-kb__item:hover   { box-shadow: 0 4px 12px rgba(12, 166, 56, 0.18); }
.opus-kb--shadow-normal .opus-kb__item:hover   { box-shadow: 0 10px 28px rgba(12, 166, 56, 0.35); }
.opus-kb--shadow-dramatic .opus-kb__item:hover { box-shadow: 0 18px 50px rgba(12, 166, 56, 0.55); }

.opus-kb__item:hover,
.opus-kb__item:focus-visible,
.opus-kb__item:focus-within {
	animation-play-state: paused;
}

/* Focus-Outline (Tastatur) - separat von Ring */
.opus-kb__item:focus {
	outline: 3px solid var(--opus-kb-hover-bg, rgba(12,166,56,0.82));
	outline-offset: 2px;
}

/* Bild */
.opus-kb__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	transition: transform 0.4s ease;
}
.opus-kb__item:hover .opus-kb__img { transform: scale(1.08); }

/* ---------- Overlay / Label ---------- */
.opus-kb__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(6px, 5%, 16px);
	border-radius: 50%;
	text-align: center;
	font-weight: var(--opus-kb-label-fw, 800);
	line-height: 1.2;
	transition: background 0.35s ease, color 0.35s ease, opacity 0.3s ease;
	pointer-events: none;
	box-sizing: border-box;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	hyphens: auto;
	word-break: break-word;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	letter-spacing: 0.01em;
}

.opus-kb__label {
	display: inline-block;
	max-width: 92%;
	padding: 0;
	border-radius: 4px;
	font-size: var(--opus-kb-label-fs, 100%);
	transition: background 0.35s ease, color 0.35s ease, padding 0.35s ease;
}

/* ---------- Modus: hover (Default) ---------- */
.opus-kb__item--mode-hover .opus-kb__overlay {
	background: transparent;
	color: transparent;
}
.opus-kb__item--mode-hover:hover .opus-kb__overlay,
.opus-kb__item--mode-hover:focus-visible .opus-kb__overlay,
.opus-kb__item--mode-hover:focus-within .opus-kb__overlay {
	background: var(--opus-kb-hover-bg, rgba(12, 166, 56, 0.82));
	color: var(--opus-kb-hover-text, #ffffff);
}

/* ---------- Modus: always-soft ---------- */
.opus-kb__item--mode-always-soft .opus-kb__overlay {
	background: transparent;
	color: var(--opus-kb-label-color, #ffffff);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 6px rgba(0, 0, 0, 0.35);
}
.opus-kb__item--mode-always-soft .opus-kb__label {
	background: transparent;
	padding: 0;
}
.opus-kb__item--mode-always-soft:hover .opus-kb__overlay,
.opus-kb__item--mode-always-soft:focus-visible .opus-kb__overlay,
.opus-kb__item--mode-always-soft:focus-within .opus-kb__overlay {
	background: var(--opus-kb-hover-bg, rgba(12, 166, 56, 0.82));
	color: var(--opus-kb-hover-text, #ffffff);
	text-shadow: none;
}
.opus-kb__item--mode-always-soft:hover .opus-kb__label,
.opus-kb__item--mode-always-soft:focus-visible .opus-kb__label,
.opus-kb__item--mode-always-soft:focus-within .opus-kb__label {
	background: transparent;
	padding: 0;
}

/* ---------- Modus: always-solid (mit Pill) ---------- */
.opus-kb__item--mode-always-solid .opus-kb__overlay {
	background: transparent;
	color: var(--opus-kb-label-color, #ffffff);
}
.opus-kb__item--mode-always-solid .opus-kb__label {
	padding: 8px 14px;
	border-radius: var(--opus-kb-pill-radius, 4px);
	background: transparent;
	border: 0;
	box-sizing: border-box;
}
.opus-kb__item--mode-always-solid.opus-kb__item--pill-filled .opus-kb__label {
	background: var(--opus-kb-label-bg, rgba(0, 0, 0, 0.75));
	border: 0;
}
.opus-kb__item--mode-always-solid.opus-kb__item--pill-outline .opus-kb__label {
	background: transparent;
	border: var(--opus-kb-pill-bdr-w, 2px) solid var(--opus-kb-pill-bdr-color, rgba(255, 255, 255, 1));
}
.opus-kb__item--mode-always-solid.opus-kb__item--pill-outline-filled .opus-kb__label {
	background: var(--opus-kb-label-bg, rgba(0, 0, 0, 0.75));
	border: var(--opus-kb-pill-bdr-w, 2px) solid var(--opus-kb-pill-bdr-color, rgba(255, 255, 255, 1));
}
.opus-kb__item--mode-always-solid:hover .opus-kb__overlay,
.opus-kb__item--mode-always-solid:focus-visible .opus-kb__overlay,
.opus-kb__item--mode-always-solid:focus-within .opus-kb__overlay {
	background: var(--opus-kb-hover-bg, rgba(12, 166, 56, 0.82));
	color: var(--opus-kb-hover-text, #ffffff);
}
.opus-kb__item--mode-always-solid:hover .opus-kb__label,
.opus-kb__item--mode-always-solid:focus-visible .opus-kb__label,
.opus-kb__item--mode-always-solid:focus-within .opus-kb__label {
	background: transparent;
	border-color: transparent;
	padding: 0;
}

/* ---------- Modus: hidden ---------- */
.opus-kb__item--mode-hidden .opus-kb__overlay { display: none; }

/* Kein Link */
.opus-kb__item--no-link { cursor: default; }
.opus-kb__item--no-link:hover {
	transform: scale(1.025);
	animation-play-state: paused;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.opus-kb__item, .opus-kb__img {
		animation: none !important;
		transition: background 0.2s ease, color 0.2s ease !important;
	}
	.opus-kb__item:hover { transform: none; }
}

/* Mobile <= 640px: 2 Spalten */
@media (max-width: 640px) {
	.opus-kb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* <= 380px: 1 Spalte */
@media (max-width: 380px) {
	.opus-kb { grid-template-columns: 1fr; }
}