/* ============================================================
   APAC Maresme — Listings & page templates
   Home hero, featured card, events, chips, services, membership,
   contact, transparency, forms, notices, search, 404.
   ============================================================ */

/* ── Home hero ───────────────────────────────────── */
.apac-hero {
	max-width: var(--maxw); margin-inline: auto; padding: var(--sp-4) var(--sp-3);
	display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-4); align-items: center;
}
.apac-hero__kicker { font-family: var(--font-accent); font-size: 28px; color: var(--c-terracota); }
.apac-hero h1 { font-size: var(--fs-h1); letter-spacing: -.8px; margin: 6px 0 14px; }
.apac-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.apac-hero__media img { width: 100%; border-radius: var(--r-card); box-shadow: var(--sh-2); }
.apac-hero__placeholder {
	aspect-ratio: 4 / 3; background: var(--c-primari-clar); border-radius: var(--r-card);
	display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
	color: var(--c-petroli); font-family: var(--font-ui); font-weight: 600;
}
.apac-hero__placeholder .material-symbols-rounded { color: var(--c-petroli); }

/* ── Featured post card ──────────────────────────── */
.apac-featured {
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
	background: var(--c-targeta); border: 1px solid var(--c-vora);
	border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-1);
}
.apac-featured__media { display: block; }
.apac-featured__media img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.apac-featured__body { padding: 28px; }
.apac-featured__body h2 { font-size: 26px; margin: 12px 0 10px; }
.apac-featured__body h2 a { color: var(--c-tinta); text-decoration: none; }
.apac-featured__body h2 a:hover { color: var(--c-petroli-fosc); }
.apac-featured__excerpt { color: var(--c-tinta-suau); margin: 0 0 14px; }
.apac-featured .apac-meta { margin-bottom: 16px; }

/* ── Upcoming events block ───────────────────────── */
.apac-upcoming__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: var(--sp-3); }
.apac-upcoming__head h2 { font-size: var(--fs-h2); margin: 0; }
.apac-link-arrow { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-weight: 600; color: var(--c-petroli-fosc); text-decoration: none; white-space: nowrap; }
.apac-link-arrow:hover { text-decoration: underline; }

/* ── Events list + card ──────────────────────────── */
.apac-event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.apac-event {
	display: flex; gap: 14px; align-items: center;
	background: var(--c-targeta); border: 1px solid var(--c-vora);
	border-radius: var(--r-card); padding: 14px; box-shadow: var(--sh-1);
}
.apac-event__tile {
	width: 60px; height: 60px; flex-shrink: 0; border-radius: 14px; background: var(--c-primari-clar);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none;
}
.apac-event__day { font-family: var(--font-ui); font-weight: 600; font-size: 22px; color: var(--c-petroli); line-height: 1; }
.apac-event__month { font-family: var(--font-ui); font-weight: 600; font-size: 11px; color: var(--c-petroli); }
.apac-event__body { min-width: 0; }
.apac-event__body h3 { font-size: 18px; margin: 4px 0 6px; }
.apac-event__body h3 a { color: var(--c-tinta); text-decoration: none; }
.apac-event__type { margin-bottom: 6px; }

/* ── Filter chips ────────────────────────────────── */
.apac-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.apac-chip {
	display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 16px;
	border-radius: var(--r-pill); background: var(--c-targeta); border: 1px solid var(--c-vora);
	font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--c-tinta-suau); text-decoration: none;
}
.apac-chip.is-active { background: var(--c-petroli); color: #fff; border-color: var(--c-petroli); }

/* ── Service grid (Què fem) ──────────────────────── */
.apac-service { background: var(--c-targeta); border: 1px solid var(--c-vora); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-1); }
.apac-service__icon .material-symbols-rounded { color: var(--c-petroli); }
.apac-service h3 { font-size: 19px; margin: 12px 0 6px; }
.apac-service p { margin: 0; color: var(--c-tinta-suau); font-size: 16px; }

/* ── Membership page ─────────────────────────────── */
.apac-soci-hero { background: var(--c-petroli-fosc); color: #fff; }
.apac-soci-hero__inner { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-4) var(--sp-3); }
.apac-soci-hero__kicker { font-family: var(--font-accent); font-size: 28px; color: var(--c-on-dark-accent); }
.apac-soci-hero h1 { color: #fff; font-size: var(--fs-h1); margin: 4px 0 12px; }
.apac-soci-hero p { color: var(--c-footer-text); max-width: 60ch; font-size: 18px; margin: 0; }
.apac-soci { max-width: var(--maxw-article); }
.apac-soci__alt { margin-top: 18px; color: var(--c-tinta-suau); }

/* ── Donations (Donorbox) ────────────────────────── */
.apac-donate { max-width: var(--maxw-article); }
.apac-donate__head { margin-bottom: var(--sp-3); }
.apac-donate__head h2 { font-size: var(--fs-h2); margin: 4px 0 8px; }
.apac-donate__embed { display: flex; justify-content: center; }
.apac-donate__embed iframe { border: 1px solid var(--c-vora); border-radius: var(--r-card); background: var(--c-targeta); }

/* ── Sponsor logo links ──────────────────────────── */
.apac-sponsor-tile a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.apac-sponsor-tile img { max-height: 60px; width: auto; object-fit: contain; }

.apac-quota { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; border: none; padding: 0; margin: 0 0 var(--sp-3); }
.apac-quota legend { grid-column: 1 / -1; font-family: var(--font-ui); font-weight: 600; font-size: 18px; margin-bottom: 4px; padding: 0; }
.apac-quota__option { position: relative; display: block; cursor: pointer; }
.apac-quota__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apac-quota__card { display: flex; flex-direction: column; gap: 2px; border: 2px solid var(--c-vora); border-radius: var(--r-card); padding: 14px 16px; background: var(--c-targeta); }
.apac-quota__option input:checked + .apac-quota__card { border-color: var(--c-petroli); background: var(--c-primari-clar); }
.apac-quota__option input:focus-visible + .apac-quota__card { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.apac-quota__title { font-family: var(--font-ui); font-weight: 600; font-size: 16px; }
.apac-quota__price { font-size: 14px; color: var(--c-tinta-suau); }

/* ── Forms ───────────────────────────────────────── */
.apac-form { max-width: 560px; }
.apac-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.apac-field label { font-family: var(--font-ui); font-weight: 600; }
.apac-field input, .apac-field textarea {
	border: 2px solid #C9BCA6; border-radius: var(--r-field); padding: 13px 16px;
	font-size: 17px; font-family: var(--font-reading); background: var(--c-superficie-2); color: var(--c-tinta);
}
.apac-field textarea { resize: vertical; }
.apac-form__note { font-size: 14px; color: var(--c-tinta-suau); margin-top: 10px; }
.apac-hp { position: absolute !important; left: -9999px !important; }

/* ── Notices ─────────────────────────────────────── */
.apac-notice { display: flex; gap: 10px; align-items: center; border-radius: var(--r-field); padding: 14px 16px; margin-bottom: 18px; font-family: var(--font-ui); font-weight: 600; }
.apac-notice--ok { background: var(--c-success-bg); border: 1px solid var(--c-success-bd); color: var(--c-success-ink); }
.apac-notice--ok .material-symbols-rounded { color: var(--c-success); }
.apac-notice--error { background: var(--c-error-bg); border: 1px solid var(--c-error-bd); color: var(--c-error-ink); }
.apac-notice--error .material-symbols-rounded { color: var(--c-error); }

/* ── Contact ─────────────────────────────────────── */
.apac-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; max-width: var(--maxw); }
.apac-contact__form h2 { font-size: var(--fs-h3); margin: 0 0 14px; }
.apac-contact__map iframe { width: 100%; height: 240px; border: 1px solid var(--c-vora); border-radius: var(--r-card); }
.apac-contact__map a { display: inline-block; margin-top: 8px; font-size: 14px; }
.apac-contact__details { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.apac-contact__details li { display: flex; gap: 10px; align-items: center; }
.apac-contact__details .material-symbols-rounded { color: var(--c-petroli); }
.apac-contact__social { margin-top: 22px; }
.apac-contact__social h3 { font-family: var(--font-ui); font-weight: 600; font-size: 16px; margin: 0 0 10px; }

/* ── Transparency doc cards ──────────────────────── */
.apac-doc-card { background: var(--c-targeta); border: 1px solid var(--c-vora); border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-1); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.apac-doc-card__icon .material-symbols-rounded { color: var(--c-petroli); }
.apac-doc-card h3 { font-size: 19px; margin: 8px 0 0; }
.apac-doc-card p { margin: 0 0 8px; color: var(--c-tinta-suau); font-size: 16px; }
.apac-doc-card__pending { font-size: 14px; color: var(--c-tinta-suau); font-style: italic; }

/* ── Search & 404 ────────────────────────────────── */
.apac-search { display: flex; gap: 8px; }
.apac-search input[type="search"] {
	flex: 1; border: 2px solid #C9BCA6; border-radius: var(--r-field); padding: 12px 16px;
	font-size: 17px; font-family: var(--font-reading); background: var(--c-superficie-2); color: var(--c-tinta);
}
.apac-404__icon .material-symbols-rounded { color: var(--c-petroli); }

/* ── Pagination ──────────────────────────────────── */
.pagination, .nav-links { margin-top: var(--sp-4); display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers, .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--c-vora); border-radius: var(--r-field); background: var(--c-targeta);
	font-family: var(--font-ui); font-weight: 600; color: var(--c-petroli-fosc); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--c-petroli); color: #fff; border-color: var(--c-petroli); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 860px) {
	.apac-hero { grid-template-columns: 1fr; gap: var(--sp-3); }
	.apac-contact { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (max-width: 720px) {
	.apac-featured { grid-template-columns: 1fr; }
	.apac-featured__media img { min-height: 180px; }
}