/* 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;
	}

	/* 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. */
	/* overflow-x:hidden - a closed day's title is nowrap+ellipsis (see
	   .caguide_itinerary_day_headline below), and that nowrap can still make a
	   long enough title's own intrinsic single-line width win out over its
	   flex ancestors' min-width:0 several levels up (.caguide_itinerary_day/
	   .caguide_itinerary_accordion aren't flex items themselves, so min-width:0
	   on the headline alone doesn't stop it) - confirmed live this was
	   widening the whole page (document.documentElement.scrollWidth), not just
	   this widget, letting the visitor drag the page sideways on mobile. The
	   ellipsis already clips the text correctly on its own; this just stops
	   that oversized box from ever escaping its own column. */
	.caguide_itinerary_wrap {
		max-width: 100%;
		min-width: 0;
		overflow-x: hidden;
	}

	.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: 0;
		background: #f7f7f9;
		color: #151515;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.caguide_itinerary_day_chip.is-active {
		background: var(--pink-action, #e8334f);
		border-color: var(--pink-action, #e8334f);
		color: #fff;
	}

	/* Without this, a non-active chip's :hover falls through to the theme's
	   own button:hover default (a jarring crimson flash) - same fight as
	   every other custom button in this plugin, see itinerary-map.css's own
	   .caguide_itinerary_wrap .caguide_itinerary_day_header comment. */
	.caguide_itinerary_day_chip:hover:not(.is-active) {
		background: #f7f7f9 !important;
		color: #151515 !important;
	}

	/* "← Previous day"/"Next day →" at the end of a day's text: step to the
	   adjacent day 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. Ink outline that fills ink solid on hover -
	   matches this session's other secondary-action buttons (.tour_dates_book_btn,
	   .tour_sticky_nav_contact_btn), not the pink this used before v3
	   reserved pink for click targets/active states only (see itinerary-map.css's
	   own comment on that). Same specificity trick as the desktop header
	   (.caguide_itinerary_wrap prefix) so the theme's button styling doesn't
	   recolour it - text-transform/letter-spacing reset too, the same Astra
	   button-tag leak fixed on .caguide_itinerary_day_header. */
	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_nav {
		display: flex;
		gap: 10px;
		margin-top: 14px;
	}

	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_prev,
	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_next {
		flex: 1 1 0;
		min-width: 0;
		padding: 12px 16px;
		border: 1px solid var(--ink, #2b2420);
		border-radius: 0;
		background: #fff;
		color: var(--ink, #2b2420);
		font-family: "Noto Sans", sans-serif;
		font-size: 15px;
		font-weight: 600;
		text-transform: none;
		letter-spacing: normal;
		text-align: center;
		cursor: pointer;
	}

	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_prev:hover,
	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_prev:focus,
	.caguide_itinerary_wrap.is-ready .caguide_itinerary_day_prev:active,
	.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: var(--ink, #2b2420);
		border-color: var(--ink, #2b2420);
		color: #fff;
	}

	.caguide_itinerary_wrap.is-map-failed .caguide_itinerary_day_nav {
		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;
	}

	/* Larger than desktop's 13px - the day header here is this view's only
	   title (the chips are the picker, not this), so it can carry more
	   visual weight than a label sitting beside 12 other closed rows. */
	.caguide_itinerary_day_number {
		font-size: 16px;
	}

	/* 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: 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: 0;
		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: 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: var(--pink-action, #e8334f);
		border-color: var(--pink-action, #e8334f);
		color: #fff;
	}

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