/**
 * Shared layout for every inner ("section") page — Label, Criteria, Directory,
 * Visitors, Map, Business-signup. Not used on the homepage (see home.css).
 *
 * Each section page's compact hero band doubles as that page's one section-header
 * (kicker/title/intro) rather than repeating it — these pages cover a single topic,
 * unlike the source one-pager which stacked many topics under one nav.
 */

.section-hero {
	background: var(--safi-bg-alt);
	padding: 48px 24px 44px;
	border-bottom: 1px solid var(--safi-border);
}

.section-hero__container {
	max-width: var(--safi-max-width);
	margin: 0 auto;
}

.section-hero__title {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.15;
	color: var(--safi-petrol);
	margin: 10px 0 14px;
	max-width: 22ch;
}

.section-hero__intro {
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--safi-text-muted-2);
	max-width: 66ch;
	margin: 0;
}

/* ---------- Label pages: the program mark band (template-label*.php) ----------
   Replaces the old .label-badge block. Two things changed:

   1. The visual is now the PROGRAM MARK, not the site logo — see safi_program_mark() in
      inc/theme-setup.php. `.program-mark` itself lives in components.css, because the
      homepage hub uses it too and home.css/section.css are mutually exclusive.
   2. The layout is back to the source design's two-column band (copy left, mark right)
      instead of a centred block floating above the card grid. A certification seal beside
      its explanation reads as a seal; centred on its own it reads as an ornament.

   "badge" was also retired as a class name: .business-card__status is already a badge, and
   one word meaning three things in one stylesheet is how the wrong one gets edited. */

.label-band {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr);
	gap: 48px;
	align-items: center;
	margin-bottom: 48px;
}

.label-band__mark {
	display: flex;
	justify-content: center;
}

.label-band__title {
	font-size: 1.5rem;
	color: var(--safi-petrol);
	margin: 0 0 14px;
}

.label-band__text {
	font-size: 1.04rem;
	line-height: 1.7;
	color: var(--safi-text-muted-2);
	max-width: 60ch;
	margin: 0;
}

@media (max-width: 860px) {
	.label-band {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Mark first on narrow screens: it is the thing the page is about, and it is the only
	   part that survives being skimmed. */
	.label-band__mark {
		order: -1;
	}
}

/* Separates the Criteria CTA from the card grid above it, matching .label-band's own
   margin-bottom so both gaps on this page share one rhythm. */
.label-cta {
	margin-top: 48px;
}

/* ---------- Visitors page ---------- */

.visitors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 26px;
}

.visitors-grid__title {
	font-size: 1.34rem;
	margin: 0 0 20px;
	color: var(--safi-petrol);
}

.material-list {
	display: grid;
	gap: 12px;
}

/* ---------- Map page ----------
   The placeholder pin art and the dashed "quiet zone" blob that lived here were retired
   when /xartis/ became a real Leaflet map (docs/map-plan.md §10). Marker, popup and list
   styles are in assets/css/map.css, loaded only on that template. The quiet zone was
   dropped rather than ported: it was decorative, had no data behind it, and this is not
   an audience to promise a quiet area to speculatively. */

/* ---------- Business-signup page ---------- */

.signup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	align-items: start;
}

.signup-form {
	display: grid;
	gap: 18px;
}

/* ---------- News (the Νέα "Posts page", rendered by home.php) ---------- */

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.news-pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--safi-radius-sm);
	border: 1px solid var(--safi-border-chip);
	text-decoration: none;
	color: var(--safi-text-muted-2);
	font-weight: 600;
}

.news-pagination .page-numbers.current {
	background: var(--safi-teal);
	color: #fff;
	border-color: var(--safi-teal);
}

.news-pagination .page-numbers.dots {
	border: 0;
}