/* Homepage sections (canvas "Homepage · desktop / mobile"). */

.hero { background: var(--c-blue-700); color: var(--c-on-dark); padding-block: var(--s-7) var(--s-8); }
.hero__inner { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1fr 1.15fr; } }
.hero__tagline { color: var(--c-gold-500); font-weight: 700; margin-bottom: var(--s-3); }
.hero__tagline .placeholder { background: transparent; color: var(--c-on-dark-2); border-color: #5a82b0; }
.hero__title { color: #fff; font-size: var(--fs-display); line-height: 1.3; margin-bottom: var(--s-4); }
html[lang^="en"] .hero__title { line-height: 1.15; }
.hero__text { font-size: 1.125rem; max-width: 36em; color: var(--c-on-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
@media (max-width: 599px) { .hero__actions .btn { width: 100%; } }

.hero__media { position: relative; }
.hero__media picture { display: block; }
/* 16:9 matches the group photo, so nobody at the edges is cropped out. */
.hero__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.9); }
.hero__photo--placeholder { display: grid; place-items: center; background: #245c9b; border: 1px dashed #6f97c4; padding: var(--s-5); text-align: center; }
.hero__photo--placeholder .placeholder { background: transparent; color: var(--c-on-dark); border-color: #8fb1d6; }

.counter {
	/* Sits under the photo and only overlaps its bottom edge (empty floor/chairs), never the people. */
	position: relative;
	z-index: 1;
	margin: calc(-1 * var(--s-5)) 0 0 var(--s-4);
	width: fit-content;
	display: flex; flex-direction: column;
	min-width: 220px;
	padding: var(--s-4) var(--s-5);
	background: var(--c-surface); color: var(--c-text);
	border-radius: var(--r-card);
	border-top: 5px solid var(--c-gold-500);
	box-shadow: var(--shadow-2);
	line-height: 1.3;
}
.counter__value { font-family: var(--font-display-en); font-weight: 700; font-size: 2.25rem; color: var(--c-blue-700); font-variant-numeric: lining-nums tabular-nums; }
.counter__label { font-weight: 700; }
.counter__note { font-size: var(--fs-xs); color: var(--c-muted); }

.services { background: var(--c-bg); }
.services__list { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; transform: translateY(calc(-1 * var(--s-6))); }
@media (min-width: 600px) { .services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .services__list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-6); } }
.service-card {
	display: flex; gap: var(--s-3); align-items: flex-start;
	height: 100%;
	padding: var(--s-5);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-2);
	color: var(--c-text);
	text-decoration: none;
}
.service-card .icon { color: var(--c-blue-700); }
.service-card:hover { border-color: var(--c-blue-700); color: var(--c-text); }
.service-card__text { display: flex; flex-direction: column; line-height: 1.45; }
.service-card__label { font-weight: 700; font-size: 1.0625rem; }
.service-card__hint { font-size: var(--fs-small); color: var(--c-text-2); }
.service-card:hover .service-card__label { color: var(--c-blue-700); text-decoration: underline; }

.intro { padding-top: var(--s-5); }
.intro__inner { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .intro__inner { grid-template-columns: 1fr 1.6fr; align-items: start; } }

.message-card { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0; padding: var(--s-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); }
.message-card__body { flex: 1 1 240px; min-width: 0; }
.message-card__quote { margin: 0 0 var(--s-4); color: var(--c-text-2); font-size: 1.0625rem; }
.message-card__quote::before { content: "“"; display: block; font-family: var(--font-display-en); font-size: 3rem; line-height: 0.8; color: var(--c-gold-500); }
.message-card figcaption { display: flex; flex-direction: column; line-height: 1.4; }
.message-card__name { font-weight: 700; }
.message-card__role { font-size: var(--fs-small); color: var(--c-blue-700); font-weight: 700; }

.membership-band__inner { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .membership-band__inner { grid-template-columns: 1fr 1fr; align-items: start; } }
.benefits { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benefits li { display: flex; gap: var(--s-3); align-items: flex-start; color: #fff; }
.benefits .icon { color: var(--c-gold-500); margin-top: 3px; }
.steps { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.steps__item { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: var(--c-navy-900); border-radius: 10px; color: #fff; font-weight: 600; }
.steps__num { font-family: var(--font-display-en); font-weight: 700; font-size: 1.5rem; color: var(--c-gold-500); min-width: 2ch; }
.membership-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

.updates__inner { display: grid; gap: var(--s-6); }
@media (min-width: 1180px) { .updates__inner { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); } }
.updates__news .grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .updates__news .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notice-board { align-self: start; padding: var(--s-5); background: var(--c-gold-50); border: 1px solid #f3ddb1; border-radius: var(--r-card); }
.notice-board__title { display: flex; gap: var(--s-2); align-items: center; font-size: 1.25rem; color: var(--c-text); font-family: inherit !important; }
.notice-board__title .icon { color: var(--c-gold-ink); }
.notice-board__list { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.notice-board__list li { border-top: 1px solid #f3ddb1; }
.notice-board__list a { display: flex; flex-direction: column; padding: var(--s-3) 0; color: var(--c-text); text-decoration: none; }
.notice-board__list a:hover .notice-board__item-title { text-decoration: underline; color: var(--c-blue-700); }
.notice-board__item-title { font-weight: 600; }
.notice-board__meta { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-xs); color: var(--c-warning-ink); }
.notice-board .empty-state { background: transparent; border-color: #e7c98b; }