/* =============================================================================
 * Veranstaltungskacheln (icond_event_tiles / icond_event_tile) + Startseiten-Intro
 * Templates: templates/content_element/icond_event_tile(s).html.twig
 * Intro: Text-Element mit CSS-Klasse "icond-intro" (Überschrift H1)
 * ========================================================================== */

.event-tiles,
.icond-intro {
	--et-navy: var(--accentColor, #173152);
	--et-accent: #ef7d00;                      /* Orange aus dem ICOND-Logo */
	--et-text: #22385a;
	--et-gap: 24px;
}

/* Intro (H1 + Beschreibung) ---------------------------------------------------- */

.icond-intro {
	max-width: 1100px;
	margin: 0 auto 40px;
	text-align: center;
}

/* Der Artikel-Container des Themes bringt ~170px Abstand unter dem Hero mit –
   die Einleitung rückt näher an den Hero (mobil ist der Abstand bereits klein) */
@media only screen and (min-width: 768px) {
	.icond-intro {
		margin-top: -110px;
	}
}

.icond-intro h1 {
	max-width: 1000px;
	margin: 0 auto;
	color: var(--et-navy);
	font: clamp(26px, 2.5vw, 38px)/1.25 IBMPlexSans-Bold, Arial, sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

.icond-intro h1::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 20px auto 0;
	border-radius: 2px;
	background: var(--et-accent);
}

.icond-intro p {
	margin: 20px 0 0;
	color: var(--et-text);
	font: 17px/1.6 IBMPlexSans-Regular, Arial, sans-serif;
}

/* Kachelraster ------------------------------------------------------------------- */

/* Desktop: höchstens vier gleich breite Spalten, weitere Kacheln brechen um;
   bei weniger Kacheln teilen sich diese die Breite */
.event-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3 * var(--et-gap)) / 4)), 1fr));
	gap: var(--et-gap);
	align-items: stretch;
}

.event-tiles > * {
	display: flex;
	min-width: 0;
	margin: 0;
}

.event-tile {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	padding: 36px 32px 32px;
	box-sizing: border-box;
	border: 1px solid #e1e9f2;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6px 24px rgba(16, 37, 66, 0.06);
}

.event-tile .event-tile__title {
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--et-navy);
	font: 22px/1.2 IBMPlexSans-Bold, Arial, sans-serif;
	text-align: center;
	text-transform: none;
}

/* Einheitlicher Logo-Container, Logos proportional (object-fit: contain) */
.event-tile__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 250px;
	height: 92px;
	margin: 0 auto;
}

.event-tile__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.event-tile .event-tile__text {
	width: 100%;
	margin: 0;
	color: var(--et-text);
	font: 17px/1.55 IBMPlexSans-Regular, Arial, sans-serif;
	text-align: left;
}

/* Button immer am unteren Kartenrand – über alle Kacheln auf derselben Höhe */
.event-tile .event-tile__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 46px;
	margin-top: auto;
	padding: 0 28px 0 32px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--et-navy);
	color: #fff;
	font: 16px/1.2 IBMPlexSans-Medium, Arial, sans-serif;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease;
}

/* Mindestabstand Logo/Text → Button */
.event-tile .event-tile__title,
.event-tile .event-tile__text {
	margin-bottom: 28px;
}

.event-tile .event-tile__cta:hover {
	background: #0f2440;
	color: #fff;
}

.event-tile .event-tile__cta:focus-visible {
	outline: 2px solid var(--et-accent);
	outline-offset: 3px;
}

/* Angekündigte Veranstaltung ohne Link: Hinweis an der Button-Position */
.event-tile .event-tile__soon {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	margin-top: auto;
	padding: 0 28px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--et-accent);
	color: #fff;
	font: 16px/1.2 IBMPlexSans-SemiBold, Arial, sans-serif;
	letter-spacing: 0.02em;
}

.event-tile__arrow {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.event-tile .event-tile__cta:hover .event-tile__arrow {
	transform: translateX(3px);
}

/* Tablet: zwei Kacheln pro Zeile */
@media only screen and (max-width: 1199px) {
	.event-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: eine Kachel pro Zeile */
@media only screen and (max-width: 767px) {
	.event-tiles,
	.icond-intro {
		--et-gap: 16px;
	}

	.event-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.event-tile {
		padding: 28px 20px 24px;
	}

	.event-tile__logo {
		height: 80px;
	}

	.icond-intro {
		margin-bottom: 28px;
	}

	.icond-intro p {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.event-tile__arrow,
	.event-tile .event-tile__cta {
		transition: none;
	}
}