/* Tubshotel Browse By State — layout for [tubshotel_browse_by_state].
 *
 * Colour lives in custom properties on .tss-browse-map, so an Elementor global
 * class (c-*) put on the shortcode widget re-skins the block by setting those
 * properties, without touching this file. Values are the site palette: cobalt
 * for links and the dark end of the map ramp, rose for whatever is hovered.
 *
 * --tss-columns and --tss-ledger are written inline by the shortcode, on this
 * wrapper, so both children inherit them: the ledger's column count and its
 * share of the row. The map stretches across whatever the ledger leaves over.
 */

.tss-browse-map {
	--tss-gap: 1.5rem;
	--tss-size: 15px;
	--tss-ink: #001219;
	--tss-link: #18458B;
	--tss-link-hover: #B61753;
	--tss-count: #001219;
	--tss-map-empty: #EFF3F6;
	--tss-map-fill: #DAE3EB;
	--tss-map-hover: #B61753;
	--tss-map-label-hover: #FFFFFF;
	--tss-map-stroke: #FFFFFF;
	--tss-map-stroke-width: 1.5;
	--tss-rule: #C7CDD4;

	display: grid;
	justify-items: stretch;
	justify-content: center;
	align-items: center;
	gap: var( --tss-gap );
	/* stacked on narrow screens, side by side from tablet up */
	 grid-template-columns: 1fr;
}

.tss-browse-heading {
	 margin: 0 0 var( --tss-gap );
}

/* Left side: the state ledger, --tss-columns from the shortcode attribute. */
.tss-browse-list {
	 min-width: min( 15rem, 100% );
	 font-size: var( --tss-size );
	 line-height: 1.7;
}

.tss-state-list {
	list-style: none;
	 margin: 0;
	 padding: 0;
	 /* the columns are the list's own, so the names break inside it */
	 column-count: var( --tss-columns, 3 );
	 column-gap: var( --tss-gap );
	 column-rule: none;
}

/* One row per state: the name flush left and the count flush right against the
 * column's right edge, with a rule above every row. The rule belongs to the row
 * rather than to the column, so it stops at the column edge, every column starts
 * under a rule of its own, and no rule falls into the gap between columns. */
.tss-state-item {
 	 padding: 0.55rem 0 0.5rem;
 	 border-top: 1px solid var( --tss-rule, #C7CDD4 );
 	 break-inside: avoid;
 	 orphans: 2;
 	 widows: 2;
}

.tss-state-link {
 	 display: flex;
 	 justify-content: space-between;
 	 align-items: baseline;
 	 gap: 0.5rem;
 	 color: var( --tss-link );
 	 text-decoration: none;
}

.tss-state-link:where( :hover, :focus, :active ) {
 	 color: var( --tss-link-hover );
}

.tss-state-count {
 	 color: var( --tss-count );
 	 font-weight: 600;
 	 white-space: nowrap;
}

/* Right side: the map. It owns the track it is given, edge to edge — width
 * 100% with the viewBox aspect doing the height, so no side letterboxing. */
.tss-browse-map-figure {
	 justify-self: stretch;
	 min-width: 0;
	 display: flex;
	 align-items: center;
	 justify-content: start;
}

.tss-us-map {
	 display: block;
	 width: 100%;
	 max-width: none;
	 height: auto;
	 flex-grow: 1;
	 overflow: hidden;
}

.tss-us-map .tss-map-state {
	 fill: var( --tss-map-empty );
	 stroke: var( --tss-map-stroke );
	 stroke-width: var( --tss-map-stroke-width );
	 stroke-linejoin: round;
	 transition: fill 150ms linear;
}

/* the shortcode writes --tss-shade inline per state (a ramp over hotel counts);
 * with color="no" there is no shade and states with hotels read one flat step
 * darker than empty country */
.tss-us-map .tss-has-stays {
	 fill: var( --tss-shade, var( --tss-map-fill ) );
}

/* browse-by-state.js writes tss-hover on the path while a state link is
 * hovered or keyboard-focused; :hover on the path itself covers a pointer
 * that goes straight to the map. */
.tss-us-map .tss-has-stays:hover,
.tss-us-map .tss-hover {
	 fill: var( --tss-map-hover );
	 stroke: var( --tss-map-stroke );
	 stroke-width: var( --tss-map-stroke-width );
}

.tss-us-map .tss-hover .tss-map-state {
	 fill: var( --tss-map-hover );
	 stroke: var( --tss-map-stroke );
	 stroke-width: var( --tss-map-stroke-width );
}

/* tablet: two columns of names fit, three do not — the ledger shrinks and the
 * map takes the rest */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.tss-browse-map {
		 grid-template-columns: minmax( min( 20rem, 100% ), 0.86fr ) minmax( min( 16rem, 100% ), 1fr );
	}

	.tss-state-list {
		 column-count: 2;
	}
}

/* laptop and up: the shortcode's column count, and its ledger share */
@media ( min-width: 1025px ) {
	.tss-browse-map {
		 grid-template-columns: var( --tss-ledger, 1.23fr ) minmax( min( 16rem, 100% ), 1fr );
	}

	.tss-state-list {
		 column-count: var( --tss-columns, 3 );
	}
}

@media ( max-width: 768px ) {
	.tss-browse-map {
		/* one column of names above a map that spans the full block width */
		 justify-items: center;
	}

	.tss-state-list {
		 column-count: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tss-us-map .tss-map-state {
		 transition: none;
	}
}
/* State codes: the demo's typography — two letters at the coordinates shipped
 * with the map, bold, sized against the viewBox. No outline on the glyphs.
 * The ink is the site palette because the fills are light; the shortcode adds
 * tss-map-label-light when a choropleth shade goes dark enough that the code
 * has to flip to white, which today happens for California and Texas. */
.tss-us-map .tss-map-label {
 	 font-weight: bold;
 	 fill: var( --tss-map-label-ink, #001219 );
 	 text-anchor: middle;
 	 pointer-events: none;
}

.tss-us-map .tss-map-label-light {
 	 fill: var( --tss-map-label-ink-light, #FFFFFF );
}

/* the crowded north-east codes sit in pills outside the coastline, connected
 * to their shapes by leader lines, exactly as the demo arranges them */
.tss-us-map .tss-map-pill {
	 fill: var( --tss-map-pill-fill, #FFFFFF );
	 stroke: var( --tss-map-stroke );
	 stroke-width: var( --tss-map-stroke-width );
	 transition: fill 150ms linear;
}

.tss-us-map .tss-map-leader {
	 stroke: var( --tss-map-leader, #A8B2BB );
	 stroke-width: 1;
	 pointer-events: none;
}

.tss-us-map .tss-hover .tss-map-pill {
	 fill: var( --tss-map-hover );
	 stroke: var( --tss-map-hover );
}

.tss-us-map .tss-hover .tss-map-leader {
	 stroke: var( --tss-map-hover );
}

/* on the rose highlight the code flips to white; codes that already
 * carry tss-map-label-light sit on white and keep it */
.tss-us-map .tss-hover .tss-map-label {
 	 fill: var( --tss-map-label-hover, #FFFFFF );
}

@media ( prefers-reduced-motion: reduce ) {
	.tss-us-map .tss-map-pill {
		 transition: none;
	}
}

/* A pointer anywhere on a state lights it up: :hover reaches the state group
 * from any child, so a pill parked outside the coastline behaves like the demo
 * does — point at the badge, the state fills in. The ledger drives the same
 * look through tss-hover, written on the group by browse-by-state.js. */
.tss-us-map .tss-map-state-group:hover .tss-map-state,
.tss-us-map .tss-hover .tss-map-state {
	 fill: var( --tss-map-hover );
	 stroke: var( --tss-map-stroke );
	 stroke-width: var( --tss-map-stroke-width );
}

.tss-us-map .tss-map-state-group:hover .tss-map-pill,
.tss-us-map .tss-hover .tss-map-pill {
	 fill: var( --tss-map-hover );
	 stroke: var( --tss-map-hover );
}

.tss-us-map .tss-map-state-group:hover .tss-map-leader,
.tss-us-map .tss-hover .tss-map-leader {
	 stroke: var( --tss-map-hover );
}

.tss-us-map .tss-map-state-group:hover .tss-map-label,
.tss-us-map .tss-hover .tss-map-label {
 	 fill: var( --tss-map-label-hover, #FFFFFF );
}

.tss-us-map .tss-map-link:focus-visible .tss-map-state {
	 fill: var( --tss-map-hover );
}

/* only an anchor can promise a destination */
.tss-us-map .tss-map-link {
	 cursor: pointer;
}