/* Phone layout for the itinerary widget - loaded by its own <link> with a
   (max-width: 768px) media query (see the wp_register_style() call for
   itinerary-map-mobile-css in custom-elementor-widgets.php), so a desktop
   browser treats it as non-render-blocking, lowest priority. Everything here
   builds on assets/css/itinerary-map.css, which always loads. */

/* ----- Phone layout (max-width: 768px) -----
   The map is pinned to the top of the screen, with a strip of "Day N" chips just
   under it (in the normal page flow - it does NOT follow the visitor down the
   page) and only the chosen day's text below - so the map and the day stay on
   screen together instead of the visitor scrolling away from one to read the other.
   Which day is shown is driven by the same .is-open class the desktop accordion uses (see
   setOpenDayNumber() in itinerary-map.js), so everything else - highlighting,
   marker taps - works unchanged.

   A flex column, not the desktop grid: position: sticky is limited to an
   item's own grid area, so a sticky grid item can never stay pinned while the
   rest of the page scrolls past it. */


@media (max-width: 768px) {
	.caguide_itinerary_wrap {
		--caguide-map-h: 38vh;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.caguide_itinerary_map {
		order: 1;
		position: sticky;
		top: 0;
		z-index: 20;
		height: var(--caguide-map-h);
		border-radius: 0 0 14px 14px;
	}

	/* However many days there are, the widget stays exactly as wide as the
	   screen: without this the strip's full width (15 chips) counted towards
	   the page layout and stretched the whole widget - map, text and all -
	   past the screen edge. min-width:100% with width:0 makes the strip fill
	   its container but contribute nothing to how wide that container wants
	   to be, so it scrolls sideways inside itself instead. */
	.caguide_itinerary_wrap {
		max-width: 100%;
		min-width: 0;
	}

	.caguide_itinerary_day_chips {
		width: 0;
		min-width: 100%;
		box-sizing: border-box;
		order: 2;
		display: flex;
		gap: 8px;
		/* Not sticky: the strip sits once, right under the map, and scrolls away with the
		   page like everything else - it used to be pinned under the map and so followed
		   the visitor down the page. The map is what stays pinned; "Next day" under each
		   day's text moves on without scrolling back up. */
		padding: 10px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		background: #fff;
		border-bottom: 1px solid #ececec;
	}

	.caguide_itinerary_day_chips::-webkit-scrollbar {
		display: none;
	}

	/* Just the day number ("1" ... "15"), so about eight fit on screen at
	   once even on a long tour; the open day's chip is scrolled to the middle
	   of the strip by updateActiveHighlight() in itinerary-map.js. */
	.caguide_itinerary_day_chip {
		flex: 0 0 auto;
		min-width: 44px;
		box-sizing: border-box;
		text-align: center;
		padding: 8px 0;
		border: 1px solid #ececec;
		border-radius: 20px;
		background: #f7f7f9;
		color: #151515;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.caguide_itinerary_day_chip.is-active {
		background: #fb2056;
		border-color: #fb2056;
		color: #fff;
	}

	/* "Next day →" at the end of a day's text: steps on without scrolling back
	   up to the strip. Only once the map is up (the strip works the same way),
	   and not when the map failed and every day is shown in full. Same
	   specificity trick as the desktop header so the theme's button styling
	   doesn't recolour it. */
	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_next {
		display: block;
		width: 100%;
		margin-top: 14px;
		padding: 12px 16px;
		border: 1px solid #fb2056;
		border-radius: 24px;
		background: #fff;
		color: #fb2056;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
	}

	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_next:hover,
	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_next:focus,
	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_next:active {
		background: #fb2056;
		color: #fff;
	}

	.caguide_itinerary_wrap.is-map-failed .caguide_itinerary_day_next {
		display: none;
	}

	.caguide_itinerary_accordion {
		order: 3;
		margin-top: 12px;
	}

	.caguide_itinerary_day {
		display: none;
	}

	.caguide_itinerary_day.is-open {
		display: block;
	}

	/* The chips are the picker here - the header is just this day's title. */
	.caguide_itinerary_day_header {
		pointer-events: none;
	}

	.caguide_itinerary_day_chevron {
		display: none;
	}

	/* Info card as a bottom sheet: the map behind it stays visible (dimmed)
	   instead of being hidden by a centred popup. */
	.caguide_itinerary_card_overlay_wrap {
		align-items: flex-end;
		padding: 0;
		background-color: rgba(0, 0, 0, .35);
	}

	.caguide_itinerary_card_overlay {
		max-width: none;
		max-height: 62vh;
		border-radius: 16px 16px 0 0;
		animation: caguide-sheet-up 0.22s ease-out;
	}

	.caguide_itinerary_card_overlay::before {
		content: '';
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: rgba(255, 255, 255, 0.85);
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
		z-index: 1;
	}

	.caguide_itinerary_card_overlay_image {
		height: 140px;
		border-radius: 16px 16px 0 0;
	}
}

@keyframes caguide-sheet-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}


/* Before the script has initialised (MapLibre loads only as the widget nears
   the viewport) no day is open yet - show the first one and its chip so the
   phone layout is never blank. If the map fails to load, show every day. */
@media (max-width: 768px) {
	.caguide_itinerary_wrap:not(.is-ready):not(.is-map-failed) .caguide_itinerary_day:first-child {
		display: block;
	}

	.caguide_itinerary_wrap:not(.is-ready):not(.is-map-failed) .caguide_itinerary_day_chip:first-child {
		background: #fb2056;
		border-color: #fb2056;
		color: #fff;
	}

	.caguide_itinerary_wrap.is-map-failed .caguide_itinerary_day {
		display: block;
	}
}