/**
 * Sale and top-up network: map, directory and printable-version link.
 *
 * Scoped under .ic-atm-tn so nothing leaks into the theme, unlike the legacy ATM plugins
 * (atm-search-fares shipped a global `body { font-size: 13px }` that shrank the site menu).
 * Map and cluster styling mirror ic-atm-timetables, so both maps look like one system.
 */

.ic-atm-tn {
	--ic-atm-red: #BF0001;
	--ic-atm-ink: #303336;
	--ic-atm-muted: #6b7075;
}

/* Map */
/* Full width, flush with the town boxes below. Taller than the timetables map: the network spans
   from the Val d'Aran down to the Segrià, and the height is what decides the zoom. */
.ic-atm-tn-map {
	position: relative;
	z-index: 1;
	height: clamp( 320px, 58vh, 560px );
	width: 100%;
	margin-bottom: 0;
	border: 1px solid #ccc;
	/* The grey bar hangs directly off the map, so only the top corners are rounded. */
	border-radius: 4px 4px 0 0;
}

.ic-atm-tn-marker,
.leaflet-marker-icon.ic-atm-tn-marker {
	background: transparent;
	border: 0;
}

.ic-atm-tn-cluster {
	background: var(--ic-atm-red);
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(191, 0, 1, 0.30);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.ic-atm-tn-cluster span {
	line-height: 1;
	font-size: 0.85rem;
}

/* Map bubble: business name first, then the street, then the town. */
.ic-atm-tn-popup h4 {
	margin: 0 0 0.15rem;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--ic-atm-red);
	line-height: 1.25;
}

.ic-atm-tn-popup p {
	margin: 0;
}

.ic-atm-tn-popup-street {
	color: var(--ic-atm-ink);
}

.ic-atm-tn-popup-street:empty {
	display: none;
}

.ic-atm-tn-popup-town {
	margin-top: 0.15rem !important;
	color: var(--ic-atm-muted);
	font-size: 0.9em;
}

.ic-atm-tn-popup-extra {
	margin-top: 0.25rem;
	color: var(--ic-atm-muted);
	font-style: italic;
}

/* Under the map: a quiet bar in two halves — the count on the left, the printable version on the
   right — with the figures picked out in brand red. */
.ic-atm-tn-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid #ccc;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	background: rgba(213, 215, 216, 0.25);
}

.ic-atm-tn-count {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--ic-atm-ink);
}

.ic-atm-tn-count strong {
	color: var(--ic-atm-red);
	font-weight: 700;
}

.ic-atm-tn-count-icon {
	display: inline-flex;
	color: var(--ic-atm-red);
}

/* Directory: one box per town, the town name on the left and its addresses in columns to the
   right. Same structure the page has always had, rebuilt with grid instead of the old float grid. */
.ic-atm-tn-towns {
	margin-top: 1.75rem;
}

.ic-atm-tn-town {
	display: flex;
	align-items: stretch;
	margin: 1.5rem 0 0;
	border: 1px solid #d5d7d8;
	border-radius: 8px;
	overflow: hidden;
}

.ic-atm-tn-town-name {
	flex: 0 0 clamp( 9rem, 21%, 17rem );
	margin: 0;
	padding: 0.95rem 1rem;
	background: rgba(213, 215, 216, 0.3);
	color: var(--ic-atm-red);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.ic-atm-tn-list {
	flex: 1 1 auto;
	margin: 0;
	padding: 0.95rem 1.25rem;
	list-style: none;
	/* Multi-column, not grid: column-rule draws one hairline the full height of the box, so the
	   separators reach top to bottom even when a column has fewer addresses than its neighbours. */
	columns: 3;
	column-gap: 2.5rem;
	column-rule: 1px solid #d5d7d8;
}

.ic-atm-tn-item {
	/* Leading belongs to the address, not to the gap between addresses: an address that wraps keeps
	   its two lines tight together, and the space that separates one address from the next is the
	   margin. That way each entry reads as one block. */
	margin: 0 0 0.65rem;
	padding: 0;
	/* !important because the parent theme ships `ul li { line-height: 2 !important }`, which is what
	   was spreading the two lines of a wrapped address apart. */
	line-height: 1.38 !important;
	break-inside: avoid;
}

.ic-atm-tn-item:last-child {
	margin-bottom: 0;
}

.ic-atm-tn-addr {
	color: var(--ic-atm-ink);
}

/* The script turns each address into a button; it must not look like a form control. */
button.ic-atm-tn-addr {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ic-atm-ink);
	text-align: left;
	/* No underline at rest: 277 underlined lines is a lot of noise. It appears on hover and on
	   keyboard focus, so it is still clear that an address is clickable. */
	text-decoration: none;
	text-underline-offset: 2px;
	cursor: pointer;
}

button.ic-atm-tn-addr:hover,
button.ic-atm-tn-addr:focus-visible {
	color: var(--ic-atm-red);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

.ic-atm-tn-extra {
	display: block;
	color: var(--ic-atm-muted);
	font-size: 0.9em;
}

/* Printable version */
.ic-atm-tn-pdf {
	margin: 1rem 0;
}

/* Inside the bar it is one line, flush right. */
.ic-atm-tn-bar .ic-atm-tn-pdf {
	margin: 0;
	text-align: right;
}

.ic-atm-tn-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ic-atm-red);
	font-weight: 600;
}

.ic-atm-tn-pdf-icon {
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
}

.ic-atm-tn-pdf-date {
	display: block;
	color: var(--ic-atm-muted);
	font-size: 0.9em;
}

/* Empty state (no import yet) */
.ic-atm-tn-empty {
	color: var(--ic-atm-muted);
	font-style: italic;
}

/* Visible focus everywhere (never remove the outline). */
.ic-atm-tn :focus-visible {
	outline: 2px solid var(--ic-atm-red);
	outline-offset: 2px;
}

@media (max-width: 1199px) {
	.ic-atm-tn-list {
		columns: 2;
	}
}

/* Narrow screens: the box stacks and the addresses become a single column. */
@media (max-width: 939px) {
	.ic-atm-tn-bar {
		justify-content: flex-start;
	}

	.ic-atm-tn-bar .ic-atm-tn-pdf {
		text-align: left;
	}

	.ic-atm-tn-town {
		display: block;
	}

	.ic-atm-tn-town-name {
		padding: 0.6rem 0.75rem;
	}

	.ic-atm-tn-list {
		columns: 1;
		padding: 0.6rem 1rem;
	}

	.ic-atm-tn-item {
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ic-atm-tn * {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}