/**
 * Homepage-specific styles: hero (with an embedded intro card + CTAs, matching the
 * source design's hero treatment more closely — see docs/design-analysis.md §3) and
 * the bento hub that replaces the original one-page content (architecture.md
 * Step 4 brief). Left-aligned content, matching the source hero's layout rather
 * than the centered treatment this used before.
 *
 * Both homepages load this file (inc/enqueue.php) and share every hub component; the
 * only forks are the two column-count modifiers. See the hub block below for why the
 * old .nav-card grid was replaced.
 */

/* Shared by BOTH homepages — template-home.php and template-home-business.php use the
   same .home-hero markup and inc/enqueue.php loads home.css for both templates, so there
   is one rule here and no risk of the two heroes drifting apart.

   Phase 3.1 resolved the contrast failure deferred in docs/accessibility-audit.md §1.
   The old ramp ended on a light sand (#e6dcc9); under the old 0.30 scrim that composited
   to ~#a9a99e, giving the title 2.37:1 and the subtitle 2.12:1 — both failing. Fixing it
   with scrim alone would have needed ~0.65 and produced a muddy hero.

   Saturating the ramp bought back most of the scrim budget instead: every stop is darker
   as well as bluer, so 0.50 now does what 0.65 would have had to. The hero ends up MORE
   colourful than before while clearing AA. Worst case is the lightest stop (#5fb0d4),
   which composites to #3d7187 — title 5.37:1 (large text, needs 3), subtitle 4.84:1 and
   eyebrow 4.66:1 (both normal text, need 4.5). The third stop stays warm on purpose: it
   is the only trace of the original sand left in the hero, and it keeps the palette from
   reading as monochrome blue. */
.home-hero {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: center;
	padding: 116px 24px 92px;
	background:
		linear-gradient(180deg, rgba(26, 50, 58, 0.5), rgba(26, 50, 58, 0.7)),
		radial-gradient(125% 95% at 72% 8%, #5fb0d4, #4882ac 46%, #ad9d81);
	overflow: hidden;
}

/* Visitor homepage only: real photo behind the hero, replacing the radial-gradient
   stand-in above (business keeps that stand-in — scoped via the audience body class
   inc/audience.php already emits everywhere, not a new class). center/top keeps the
   town on the point in frame at all widths (verified against the actual crop math
   for desktop/tablet/mobile). Percentile-sampled the image under the text block:
   ~10% of that area (bright rooftops) sits above the AA-safe luminance the original
   0.5–0.7 scrim was tuned for, so the scrim is bumped to 0.60–0.74 here — smallest
   bump that clears p90 luminance for normal-weight text. */
.audience-visitor .home-hero {
	background:
		linear-gradient(180deg, rgba(26, 50, 58, 0.3), rgba(26, 50, 58, 0.54)),
		url("../images/main_photo.jpg") center top / cover no-repeat;
}

.home-hero__photo-note {
	position: absolute;
	top: 104px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(20, 40, 46, 0.34);
	color: #edf3f6;
	padding: 6px 12px;
	border-radius: var(--safi-radius-pill);
	font-size: 0.78rem;
	backdrop-filter: blur(4px);
}

.home-hero__container {
	max-width: 1120px;
	margin: 0 auto;
	width: 100%;
	position: relative;
}

.home-hero__eyebrow {
	margin: 0 0 14px;
	color: #e8f0f6; /* 14.7px/600 = normal text, needs 4.5:1 — was #dde8ef at 3.95:1 over the hero's lightest stop, now 4.66:1. Kept a shade below the subtitle so the size/weight hierarchy still reads. */
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.home-hero__title {
	font-size: clamp(2.3rem, 5vw, 3.7rem);
	line-height: 1.1;
	color: #fff;
	margin: 0;
	max-width: 17ch;
	text-shadow: 0 2px 16px rgba(18, 38, 44, 0.28);
}

.home-hero__subtitle {
	display: block;
	color: #eef4f9; /* 16–19.2px/500 = normal text, needs 4.5:1 — was #edf3f6 at 2.12:1 over the old hero, now 4.84:1 */
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 500;
	margin: 12px 0 0;
	text-shadow: 0 1px 10px rgba(18, 38, 44, 0.22);
}

.home-hero__intro-card {
	background: rgba(255, 253, 248, 0.95);
	color: #3b4f5e;
	border-radius: 18px;
	padding: 22px 24px;
	max-width: 640px;
	font-size: 1.07rem;
	line-height: 1.72;
	box-shadow: var(--safi-shadow-elevated);
	margin: 22px 0 0;
}

.home-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* ============================================================================
   THE HUB — bento composition below the hero (rebuilt 2026-08-06)
   ============================================================================

   Replaces .home-cards-grid / .nav-card, which were five (or three) identical
   icon-tile cards in a flex row. The layout was fine; the sameness was the problem.
   Every card had the same shape, so nothing told a reader that one of them held a live
   map and another held three PDFs.

   Two tiers, because the destinations are not equal:

     .hub__showcases  — vertical product cards. Media zone on top, edge to edge inside
                        the card radius, then text/meta/CTA. Two across on the visitor
                        homepage; one wide card on the business homepage.
     .hub__compacts   — three (visitor) or two (business) cards, each leading with a
                        real peek at what is behind it rather than a decorative glyph.

   Deliberately NOT alternating left-text/right-image editorial strips: five of those
   below a 600px hero is a brochure, not a hub.

   Both homepages share every class here. The only forks are the two modifiers that
   change column counts (--single, --two).

   THE STRETCHED LINK. Cards are <article>, never a wrapping <a>. Each card's single
   primary link lives on its heading and covers the card via ::after. Everything else
   inside is non-interactive by construction — the peek rows and chips are static text,
   not links — so there is nothing to stack above the overlay and no way to nest an
   anchor. If a secondary link is ever added, it needs position:relative and a z-index
   above .1, or it becomes unclickable. */

.hub__heading {
	font-family: var(--safi-font-heading);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.25;
	color: var(--safi-petrol);
	margin: 0 0 26px;
}

.hub__showcases {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	margin-bottom: 26px;
}

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

.hub__compacts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.hub__compacts--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Shared card behaviour ---------- */

.showcase-card,
.compact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0; /* let the grid track win instead of the longest word */
	overflow: hidden; /* clips the media zone to the card radius */
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.showcase-card:hover,
.compact-card:hover,
.showcase-card:focus-within,
.compact-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--safi-shadow-card-lg);
}

@media (prefers-reduced-motion: reduce) {
	.showcase-card,
	.compact-card {
		transition: none;
	}

	.showcase-card:hover,
	.compact-card:hover,
	.showcase-card:focus-within,
	.compact-card:focus-within {
		transform: none;
	}
}

.showcase-card__title a,
.compact-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The hit area. The focus ring stays on the link text itself, which is where a keyboard
   user is actually looking — the overlay is for the mouse. */
.showcase-card__title a::after,
.compact-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---------- Showcase cards ---------- */

.showcase-card__media {
	position: relative;
	background: var(--safi-teal-tint);
	border-bottom: 1px solid var(--safi-border-card);
}

/* Fixed ratio so the image cannot letterbox when the card stack changes width.

   FRAMING: `cover` crops nothing here, because inc/map-snapshot.php generates the PNG at
   exactly 1440x810 — the source aspect and the display aspect are the same number on
   purpose. That is why the "Skiathos is off-centre and markers are clipped" fix lives in
   the generator's own framing maths and not in an object-position nudge: cropping in CSS
   would only move which part of a badly-framed picture you see. If the media aspect ever
   changes, change SAFI_MAP_SNAPSHOT_W/H to match and regenerate. */
.showcase-card__media img {
	display: block;
	width: 100%;
	height: 400px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

/* Carto/OSM attribution for the generated map still. /xartis/ gets this from Leaflet's own
   control; a flat <img> has to carry it in the markup. Deliberately quiet but readable:
   petrol on a near-opaque cream chip is ~9:1, so it is legible over any part of the raster
   rather than depending on what happens to be underneath it. */
.showcase-card__attribution {
	position: absolute;
	right: 8px;
	bottom: 8px;
	margin: 0;
	padding: 3px 8px;
	border-radius: var(--safi-radius-pill);
	background: rgba(255, 253, 248, 0.9);
	color: var(--safi-text-muted-2);
	font-size: 0.68rem;
	line-height: 1.3;
	pointer-events: none;
}

/* The mark showcase: the program mark centred on the card's own surface.
   Used by the business homepage's wide showcase, where the media IS a distinct column and
   keeps its tint + divider. The visitor homepage overrides all of that below. */
.showcase-card__media--mark {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: 24px;
	background: var(--safi-bg);
	box-sizing: border-box;
}

/* ---------- Mark showcase: one continuous surface ----------
   The mark is a seal on paper, not a picture with an edge. Giving it a tinted media band
   and a divider made the top half of the card read as a separate framed panel sitting
   inside the card — a "stage" the mark was standing on. Removed:

     - the radial glow / distinct panel tint  → the card's own --safi-surface
     - the media/body divider                 → no border
     - the fixed 16:9 media box               → the region flexes instead

   The map card keeps the split, because its media genuinely is a rectangle with its own
   boundary. This variant is the visitor homepage only; the business homepage's wide
   showcase is a side-by-side grid where the divider is doing real work.

   Vertical rhythm: the mark region takes all the leftover height and centres in it, and
   the body shrinks to its content, so the copy and the CTA end up packed together at the
   bottom of the card — level with the map card's text block beside it, instead of a short
   paragraph stranded mid-card above a gap. Both cards are stretched to the same height by
   the grid, so this alignment holds without either one being measured against the other. */

.showcase-card--mark .showcase-card__media {
	flex: 1;
	aspect-ratio: auto;
	min-height: 190px;
	/* Asymmetric on purpose: the seal casts a soft shadow downward, so an even inset reads
	   as bottom-heavy. The small bottom value plus the body's own padding-top is the gap
	   between the mark and the title. */
	padding: 28px 24px 10px;
	background: transparent;
	border-bottom: 0;
}

/* Content-sized, so the flexible mark region above gets the remaining space. This also
   retires .showcase-card__cta's margin-top:auto here — with nothing spare to absorb, the
   CTA simply follows the text, which is the "packed just above the CTA" the card wants. */
.showcase-card--mark .showcase-card__body {
	flex: 0 0 auto;
	padding-top: 6px;
}

.showcase-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 28px 28px;
}

.showcase-card__title {
	font-size: 1.34rem;
	color: var(--safi-petrol);
	margin: 0 0 10px;
}

.showcase-card__text {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--safi-text-muted-3);
	margin: 0 0 14px;
}

.showcase-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--safi-text-muted-2); /* 8.13:1 on --safi-surface */
	margin: 0 0 18px;
}

.showcase-card__meta svg {
	flex-shrink: 0;
	color: var(--safi-teal);
}

.showcase-card__cta,
.compact-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--safi-teal-hover); /* 6.22:1 on --safi-surface */
	font-weight: 600;
	font-size: 0.95rem;
}

/* Wide showcase (business homepage): the mark sits beside the copy rather than above it,
   because a single full-width card with a 16:9 media band on top would be a banner. */
@media (min-width: 761px) {
	.showcase-card--wide {
		display: grid;
		grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2fr);
		align-items: center;
	}

	/* The wide variant is a side-by-side grid, so its media column must fill the card's
	   height rather than hold the 16:9 box the two-up showcases use. */
	.showcase-card--wide .showcase-card__media {
		height: 100%;
		aspect-ratio: auto;
		border-bottom: 0;
		border-right: 1px solid var(--safi-border-card);
	}
}

/* ---------- Directory band ----------
   Full-width, between the two showcases and the compact row.

   Why a band and not a third card: the directory's only honest visual is its categories,
   and a category list squeezed into a 16:9 media slot looked like a broken image. Given
   its own band the mosaic can take the height it needs and grow as terms are added.

   Why it has a real button instead of a stretched heading link: the band is wide enough
   that a full-width invisible hit area would swallow clicks on the tiles beside it, and a
   visible primary button is the stronger call anyway. The band is therefore NOT clickable
   — exactly one control inside it is, which satisfies the no-nested-anchor rule outright
   rather than by careful z-index work. */

/* GROWTH RULE (decided 2026-08-06): the mosaic GROWS, it never scrolls.
   As categories are added the panel simply gets taller and the band grows with it. The
   left column is top-aligned rather than centred, so the extra height appears as empty
   space below the CTA instead of pushing the copy into the middle of a tall band — and
   nothing on this page becomes a scroll container. An inner scroll would hide categories
   behind a gesture with no affordance, on the one page whose whole job is to show a
   visitor what kinds of place are taking part. */
.dir-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 34px;
	align-items: start;
	margin: 26px 0;
	padding: 34px 36px;
	background: var(--safi-surface);
	border: 1px solid var(--safi-border-card);
	border-radius: var(--safi-radius-md);
	box-shadow: var(--safi-shadow-card);
}

.dir-band__title {
	font-size: 1.44rem;
	color: var(--safi-petrol);
	margin: 0 0 10px;
}

.dir-band__text {
	font-size: 1rem;
	line-height: 1.62;
	color: var(--safi-text-muted-3);
	margin: 0 0 14px;
	max-width: 48ch;
}

.dir-band__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--safi-text-muted-2); /* 8.13:1 on --safi-surface */
	margin: 0 0 22px;
}

.dir-band__meta svg {
	flex-shrink: 0;
	color: var(--safi-teal);
}

.dir-band__panel {
	padding: 24px 26px;
	border-radius: var(--safi-radius-sm);
	background: var(--safi-bg);
	border: 1px solid var(--safi-border-soft);
}

.dir-band__panel-label {
	margin: 0 0 16px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--safi-teal-hover); /* 6.22:1 on --safi-bg */
}

/* Mosaic. auto-fill (not auto-fit) so a lone trailing tile keeps its column width instead
   of stretching across the panel — same reasoning as .business-grid on the directory.
   No max-height and no overflow anywhere in this block: that is the growth rule above,
   enforced by the absence of a scroll container rather than by a comment. */
.dir-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 12px;
}

/* Static text, not links: making these filter into the directory would duplicate the
   chips that page already has, and would put a second interactive layer in the band. */
.dir-tile {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 13px 15px;
	background: var(--safi-surface);
	border: 1px solid var(--safi-border-card);
	border-radius: var(--safi-radius-sm);
	font-size: 0.92rem;
}

/* Wraps to a second line rather than truncating. Category names are the whole content of
   this panel, and «Δημοτικές…» tells a visitor nothing — a two-line tile is a much smaller
   cost than an unreadable label. Grid rows stretch, so a wrapped tile lifts its whole row
   to match and the mosaic stays even. */
.dir-tile__name {
	font-weight: 600;
	line-height: 1.3;
	color: var(--safi-petrol);
	min-width: 0;
	overflow-wrap: break-word;
}

.dir-tile__count {
	margin-left: auto;
	padding-left: 4px;
	flex-shrink: 0;
	font-size: 0.79rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--safi-text-muted-6); /* 5.34:1 on --safi-surface */
}

/* The dot is 10px and vertically centred against a possibly two-line label; nudging it to
   the first line's optical centre keeps it reading as a bullet rather than as decoration
   floating beside the middle of the text. */
.dir-tile .cat-dot {
	align-self: flex-start;
	margin-top: 4px;
}

/* ---------- Compact cards ---------- */

.compact-card {
	padding: 26px 26px 28px;
	height: 100%;
}

/* Fixed peek height so titles and CTAs line up across the row.

   ROOT CAUSE of the "icons are flush against the beige frame" report, twice.
   The padding here was never the problem. .compact-card__peek is applied to a <ul> that
   ALSO carries .peek-checklist / .peek-steps, and those two rules — defined further down
   this file, at the same (0,1,0) specificity — each declared `padding: 0` as a list reset.
   Later rule wins, so the peek's padding was being zeroed on exactly the two variants that
   have leading icons. The News peek looked fine because .peek-news declares no padding,
   which is what made it look like a spacing judgement call rather than a bug.

   Fixed at the source: those two rules no longer reset padding, and the list reset is
   scoped to the one place they appear outside this frame (inside .showcase-card__body).
   Do not add `padding: 0` back to a .peek-* rule. */
.compact-card__peek {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	height: 172px;
	min-height: 172px;
	max-height: 172px;
	padding: 10px;
	margin: 0 0 20px;
	border-radius: var(--safi-radius-sm);
	background: var(--safi-bg);
	border: 1px solid var(--safi-border-soft);
	list-style: none;
	box-sizing: border-box;
	overflow: hidden;
}

.compact-card__peek--mark {
	align-items: center;
	padding: 16px;
}

.compact-card__title {
	font-size: 1.2rem;
	color: var(--safi-petrol);
	margin: 0 0 8px;
	min-height: 2.6em; /* two lines of title budget so shorter titles still align */
}

.compact-card__text {
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--safi-text-muted-3);
	margin: 0 0 16px;
	flex: 1;
}

/* ---------- Peek content ----------
   Shared by both hubs. Everything in here is static text: no links, no controls, so no
   nested-interactive problem and no touch-target requirement. */

/* NO `padding: 0` here — see the note on .compact-card__peek. This class is usually the
   peek frame itself, and resetting padding at equal specificity silently cancelled it. */
.peek-checklist {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The one place .peek-checklist is NOT the peek frame: the benefit list inside the
   business homepage's wide showcase. There it is a plain <ul> and does need the reset. */
.showcase-card__body .peek-checklist {
	padding: 0;
}

.peek-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--safi-text-muted-2);
}

.peek-checklist__item svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--safi-teal);
}

.peek-checklist__more {
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--safi-text-muted-6);
	padding-left: 2px;
}

/* Four benefits read better as two columns inside the wide business showcase. */
@media (min-width: 761px) {
	.peek-checklist--two-col {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 22px;
	}
}

.peek-checklist--two-col {
	margin-bottom: 18px;
}

/* NO `padding: 0` — same trap as .peek-checklist above. This class is only ever the peek
   frame, so it inherits .compact-card__peek's padding and must not cancel it. */
.peek-steps {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
	counter-reset: none;
}

.peek-steps__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--safi-text-muted-2);
}

/* 22px/700 white on the brand gradient — 5.38:1 at the teal end, 5.99:1 at the green
   end. Same treatment and same measured pair as .step-card__number. */
.peek-steps__number {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--safi-teal), var(--safi-green));
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.peek-news {
	align-items: flex-start;
	justify-content: center;
}

.peek-news__date {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--safi-teal-hover);
}

.peek-news__title {
	font-family: var(--safi-font-heading);
	font-size: 0.98rem;
	line-height: 1.4;
	color: var(--safi-petrol);
	margin: 0;
}

.peek-news__empty {
	font-size: 0.9rem;
	color: var(--safi-text-muted-6);
	margin: 0;
}

/* ---------- Responsive ----------
   Tablet: showcases stack, compacts go 2+1 (or stay 2 on the business hub).
   Phone: everything single column. Peek height can relax so 4 checklist lines fit. */

@media (max-width: 1000px) {
	.hub__compacts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The band's two columns stop working before the cards do — the mosaic needs roughly
	   two tiles' width to look like a mosaic rather than a list. */
	.dir-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.dir-band__text {
		max-width: none;
	}
}

@media (max-width: 760px) {
	.hub__showcases,
	.hub__compacts,
	.hub__compacts--two {
		grid-template-columns: minmax(0, 1fr);
	}

	.showcase-card__body {
		padding: 22px 22px 24px;
	}

	.compact-card__peek {
		height: auto;
		min-height: 140px;
		max-height: none;
	}

	.compact-card__title {
		min-height: 0;
	}

	.dir-band {
		padding: 26px 22px;
	}

	.dir-band__panel {
		padding: 20px 18px;
	}
}

@media (max-width: 600px) {
	/* One tile per row below this: two 190px columns plus the gap no longer fit inside the
	   panel's padding, and auto-fill would otherwise overflow the card. */
	.dir-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.compact-card__peek {
		padding: 22px 22px;
	}
}