/**
 * Pott's - Stellenausschreibungen - Akkordeon
 * Strukturelles Basis-CSS. Farben, Typo, Abstände etc. werden je Unternehmen
 * ausschließlich über die Elementor-Stil-Controls (inline) gesetzt.
 */

.potts-jobs-accordion {
	width: 100%;
}

.potts-jobs-accordion__item {
	width: 100%;
}

/* --- Titel / Trigger --------------------------------------------------- */

.potts-jobs-accordion__title {
	margin: 0;
}

.potts-jobs-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	-webkit-user-select: none;
	user-select: none;
	transition-property: background-color, color, border-color;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.potts-jobs-accordion__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.potts-jobs-accordion__trigger-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.potts-jobs-accordion__job-title {
	display: block;
}

.potts-jobs-accordion__subline {
	display: block;
}

/* --- Icon ---------------------------------------------------------------
   Icon-Wechsel Normal <-> Aktiv erfolgt rein per CSS (keine JS-Neuzeichnung),
   damit Übergänge (Farbe etc.) sauber transitionieren können.
------------------------------------------------------------------------- */

.potts-jobs-accordion__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.potts-jobs-accordion__icon-normal,
.potts-jobs-accordion__icon-active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.potts-jobs-accordion__icon-active {
	display: none;
}

.potts-jobs-accordion__item.is-active .potts-jobs-accordion__icon-normal {
	display: none;
}

.potts-jobs-accordion__item.is-active .potts-jobs-accordion__icon-active {
	display: flex;
}

.potts-jobs-accordion__icon svg,
.potts-jobs-accordion__icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	color: inherit;
}

/* Elementor rendert Icons je nach Bibliothek entweder als Icon-Font (<i>,
   Farbe folgt automatisch über "color") oder als Inline-SVG (<svg><use>...).
   Bei SVGs ist "fill" entscheidend, daher hier explizit auf die geerbte
   Textfarbe mappen, sonst greifen die Icon-Farb-Controls nicht. */
.potts-jobs-accordion__icon svg,
.potts-jobs-accordion__icon svg path,
.potts-jobs-accordion__icon svg use {
	fill: currentColor;
}

/* --- Inhalt / Panel -------------------------------------------------------
   Grid-Rows-Trick für eine sanfte Höhenanimation ganz ohne JS-Höhenberechnung.
------------------------------------------------------------------------- */

.potts-jobs-accordion__content {
	height: 0;
	overflow: hidden;
	transition: height 0.3s ease;
}

.potts-jobs-accordion__content-inner {
	min-height: 0;
	overflow: hidden;
}

/* --- 2-spaltiges Desktop-Layout, mobil gestapelt ----------------------- */

.potts-jobs-accordion__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}

.potts-jobs-accordion__column :first-child {
	margin-top: 0;
}

.potts-jobs-accordion__column :last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.potts-jobs-accordion__columns {
		grid-template-columns: 1fr;
	}
}