/* ==========================================================================
   De Rips – verenigingspagina's (overzicht en pagina per vereniging)
   Gebruikt ook .info-card en .event__grid uit agenda.css.
   ========================================================================== */

/* Logo of initialen
   ========================================================================== */
.org-logo {
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #fff; /* logo's zijn meestal voor een witte achtergrond gemaakt */
}

.org-logo__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.org-logo--initials {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--org-color, #1668d6) 35%, transparent);
}

.org-logo__initials {
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Overzicht
   ========================================================================== */
.org-grid {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.org-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.org-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.org-card {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 20px;
	align-items: center;
	gap: 16px;
	padding: 18px 18px 18px 20px;
	border-radius: var(--radius);
	background: var(--c-surface);
	box-shadow: var(--shadow);
	border-left: 5px solid var(--org-color, var(--c-blue));
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.org-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

.org-card:focus-within {
	box-shadow: var(--shadow-lg), 0 0 0 3px var(--c-link);
}

.org-card__logo {
	width: 72px;
	height: 72px;
	padding: 6px;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}

.org-card__logo.org-logo--initials {
	padding: 0;
	font-size: 2rem;
}

.org-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.org-card__link {
	color: var(--c-ink);
	text-decoration: none;
}

.org-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.org-card__link:focus-visible {
	outline: none;
}

.org-card:hover .org-card__link {
	color: var(--c-link);
}

.org-card__text {
	margin: 4px 0 0;
	color: var(--c-ink-soft);
	font-size: 0.875rem;
	line-height: 1.5;
}

.org-card__arrow {
	color: var(--c-link);
	transition: transform 0.25s var(--ease);
}

.org-card__arrow .icon {
	width: 20px;
	height: 20px;
}

.org-card:hover .org-card__arrow {
	transform: translateX(3px);
}

/* Kop van een verenigingspagina
   ========================================================================== */
.org-hero__inner {
	display: grid;
	gap: 20px;
	align-items: center;
}

@media (min-width: 768px) {
	.org-hero__inner {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 32px;
	}
}

.org-hero__logo {
	width: 104px;
	height: 104px;
	padding: 10px;
	border-radius: 24px;
	box-shadow: 0 8px 24px rgba(8, 14, 24, 0.18);
}

@media (min-width: 1200px) {
	.org-hero__logo {
		width: 144px;
		height: 144px;
		padding: 14px;
		border-radius: 28px;
	}
}

.org-hero__logo.org-logo--initials {
	padding: 0;
	font-size: 3rem;
}

@media (max-width: 767.98px) {
	.org-hero__inner {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 0 16px;
	}

	.org-hero__logo {
		width: 64px;
		height: 64px;
		padding: 6px;
		border-radius: 16px;
		margin-top: 30px; /* naast de titel, onder het kruimelpad */
		align-self: start;
	}

	.org-hero__logo.org-logo--initials {
		font-size: 1.75rem;
	}
}

.org-hero .page-hero__title {
	max-width: none;
}

/* Inhoud
   ========================================================================== */
.org-page .entry-content {
	margin-bottom: 48px;
}

.org-page__agenda {
	margin-bottom: 8px;
}

.org-page__empty {
	margin: 0;
	padding: 20px 22px;
	border-radius: var(--radius);
	background: var(--c-bg-soft);
	color: var(--c-ink-soft);
}

.org-social {
	margin: 4px 0 0 -10px;
	color: var(--c-ink);
}

.org-page .info-card__actions .button {
	width: 100%;
}

/* Mobiel en tablet: tekst, dan contact, dan activiteiten */
@media (max-width: 999.98px) {
	.org-page .event__main > .entry-content { order: 1; }
	.org-page .event__aside { order: 2; margin-bottom: 40px; }
	.org-page .org-page__agenda { order: 3; }
	.org-page .event__back { order: 4; }
}