/*
 * assets/css/poster.css · Out & Down theme
 *
 * outanddown_poster_card() -- blueprint Section 06's poster card: 4:5, a
 * date badge flush in the top-right corner, a title strip band flush in
 * the bottom-left, never changes on hover. Card markup lives once in
 * inc/poster-card.php; this is its one styling, shared by every surface
 * that can render a card -- single event (related events), the event
 * archive (the poster wall) and the home page (near-you, guides).
 *
 * Phase 12.3 pulled this out of event.css and archive.css, where it had
 * been duplicated verbatim (event.css's .oad-poster-card* rules and
 * archive.css's .oad-af-wall .oad-poster-card* rules were byte-identical
 * except for the extra specificity archive.css needed against the
 * plugin's own .oad-af cascade). A third copy for the home page would have
 * made that worse, so this file is now the single source and is enqueued
 * wherever a card can appear (outanddown_enqueue_poster_css() in
 * functions.php); event.css and archive.css keep only their grid-scoping
 * rules (.oad-related-band__grid, .oad-af-wall).
 */

.oad-poster-card {
	display: block;
	min-width: 0;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.oad-poster-card__frame {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-poster-card__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

/* GeoDirectory wraps the image in a slider > carousel > Bootstrap
   ratio-16x9 chain, which sizes the poster as a 16:9 strip at the top of
   the frame. Every wrapper is stretched to fill the 4:5 frame instead, so
   the whole poster shows on the wall, the popups and the home band. */
.oad-poster-card__frame :is(.geodir-post-slider, .geodir-image-container, .geodir-images, .carousel-item, .ratio, .oad-pu-frame) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
}

.oad-poster-card__frame .ratio::before {
	display: none;
}

.oad-poster-card__placeholder {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.20) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px);
}

.oad-poster-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	border-left: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* The strip is nowrap, so its text is a min-content width. Every box from
   the grid or flex cell down to the strip is allowed to shrink below it,
   or a long title stretches its own card wider than its neighbours. */
.oad-af-section--wall .oad-af-results .geodir-widget-posts > *,
.oad-poster-card,
.oad-poster-card__strip,
.oad-guide-card,
.oad-guide-card__strip {
	min-width: 0;
	max-width: 100%;
}

.oad-poster-card__strip {
	display: block;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--ink);
	border-top: 0;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Poster wall tokens (Phase 13.5). GeoDirectory draws the loop and    */
/* renders each card from parts/oad-card-poster.html; the plugin's own */
/* flex wall reads --oad-af-cols / --oad-af-gap, so the wall only      */
/* restates those on the blueprint's apart gutter (16 mobile / 24      */
/* desktop, each poster keeping its own hairline -- never the plugin's */
/* shared-hairline box-shadow grid, which base.css's box-shadow guard  */
/* cannot allow), two states at the locked single 1024px break.        */
/* body + class (0,1,1) beats the plugin's 1100px / 780px steps to 4  */
/* and 3 columns. Here rather than archive.css so the home band, which */
/* renders through the same section, is laid out by the same rule.     */
/* ------------------------------------------------------------------ */

body .oad-af-section--wall {
	--oad-af-grid: 0px;
	--oad-af-grid-colour: transparent;
	--oad-af-cols: 2;
	--oad-af-gap: var(--wp--preset--spacing--16);
}

@media (min-width: 1024px) {
	body .oad-af-section--wall {
		--oad-af-cols: 6;
		--oad-af-gap: var(--wp--preset--spacing--24);
	}
}

/* ------------------------------------------------------------------ */
/* 6 · guide cards — "Guides." band and the /guide/ archive, blueprint Section 20/24            */
/* Same 4:5 frame shape as outanddown_poster_card() (poster.css), but a */
/* distinct class throughout: a guide is not an event, and its meta    */
/* line is an event count, not a date badge.                            */
/* ------------------------------------------------------------------ */

.oad-guide-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--16);
}

@media (min-width: 1024px) {
	.oad-guide-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--24);
	}
}

.oad-guide-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.oad-guide-card__frame {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-guide-card__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

.oad-guide-card__placeholder {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.20) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px);
}

.oad-guide-card__strip {
	display: block;
	margin-top: -8px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oad-guide-card__meta {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- */
/* Map popups · Phase 15.3 (B9).                                      */
/*                                                                    */
/* geodirectory/bootstrap/map/map-popup.php now prints the same poster */
/* card as the wall. Leaflet sizes the popup from its content and adds */
/* a scroll cap, so the width is fixed here (a 6-column wall card at   */
/* 1440) and the cap removed; the frame keeps its own 4:5 ratio.       */
/* ---------------------------------------------------------------- */

.gd-osm-bubble .leaflet-popup-content-wrapper {
	background: var(--wp--preset--color--ground);
	/* The poster card inside draws its own 2px frame. */
	border: 0;
	padding: 0;
}

.gd-osm-bubble .leaflet-popup-content {
	margin: 0;
	max-height: none !important;
	overflow: visible !important;
	width: 220px !important;
}

.gd-osm-bubble .leaflet-popup-tip {
	background: var(--wp--preset--color--ink);
}

.gd-osm-bubble .oad-map-popup {
	width: 220px;
}

/* The ✕ is a real 44px target on the poster's top-left corner (the date
   badge holds the top-right). Leaflet's own glyph is a text ×. */
.leaflet-container .gd-osm-bubble a.leaflet-popup-close-button {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	right: auto;
	left: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--wp--preset--color--ground);
	border-right: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	z-index: 2;
}

.leaflet-container .gd-osm-bubble a.leaflet-popup-close-button:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* The plugin's wall surface is White by default; it is Ground here, on every
   page that draws a poster wall (archive, search, location, home band). */
body .oad-af-section {
	--oad-af-surface-wall: var(--wp--preset--color--ground);
	--oad-af-surface: var(--wp--preset--color--ground);
}

.oad-af-section,
.oad-af-section .oad-af-body,
.oad-af-section .oad-af-results {
	background: var(--wp--preset--color--ground);
}