/**
 * Single tour page, responsive.
 *
 * ONLY @media blocks live here, ordered widest-first so later blocks override
 * earlier ones without needing !important. Same split the theme uses between
 * style.css and responsive.css.
 *
 * Two kinds of media query exist for this page, deliberately in two places:
 *
 *   - tour-itinerary.css keeps the handful of one-line grid collapses that came
 *     with the supplied design (.hero-grid, .highlights-grid, .incl-grid,
 *     .hotel-grid, .explain-grid, .mp-row, .thumb, .carousel-nav), plus the
 *     sticky bar's own block. They sit next to the rule they modify, which is how
 *     the source had them, and moving them would gain nothing but risk.
 *   - everything below is the phone work that design never did: the type scale,
 *     the booking controls, the wide hero, and compressing the padding so
 *     fourteen sections do not become an endless scroll on a 360px screen.
 *
 * The page gutter is set here by overriding --wrap-pad, never by re-declaring
 * padding on .wrap. The hero image's breakout is computed from that variable and
 * --hero-inset, so none of the three can drift apart.
 *
 * The container's maximum width is NOT here. It is one value at every breakpoint
 * and lives in tour-layout.css.
 *
 * The overflow guards that stop admin-entered rich text widening the page are in
 * tour-itinerary.css, not here: a long URL overflows at any width, so it is not a
 * breakpoint concern. The base line-height lives there too, for the same reason,
 * because it was missing at every width rather than only on phones.
 *
 * @package CustomTours
 */

/* ==========================================================================
   1024px, small laptops and landscape tablets
   ========================================================================== */
@media (max-width: 1024px) {

	/* Tightens the vertical rhythm everywhere at once: `section` and the hero
	   both derive their padding from --gap. */
	.ct-itin { --gap: 34px; }

	.ct-itin .section-head h1 { font-size: 29px; }
	.ct-itin .section-head h2,
	.ct-itin .section-head h3 { font-size: 27px; }
}

/* ==========================================================================
   900px, the hero stacks so the booking widget becomes full width
   ========================================================================== */
@media (max-width: 900px) {

	/*
	 * The widget is no longer a narrow sidebar column, so all three controls fit
	 * comfortably on one row and the pickup field stops needing to span.
	 */
	.ct-itin .booking-form { grid-template-columns: repeat(3, 1fr); }
	.ct-itin .booking-form .full { grid-column: auto; }

	/* Sits under the gallery now, so it reads better centred and less boxed in. */
	.ct-itin .widget { padding: 20px; }
}

/* ==========================================================================
   767px, phones landscape and small tablets
   ========================================================================== */
@media (max-width: 767px) {

	/*
	 * 24px each side is 13% of a 360px viewport. Set the variable, never the
	 * padding, because the hero breakout below is derived from it.
	 *
	 * line-height goes a step looser than the 1.6 base: lines wrap far more often
	 * at this width, so the extra leading is what stops a wrapped paragraph reading
	 * as a solid block.
	 */
	.ct-itin { --gap: 28px; --wrap-pad: 16px; line-height: 1.7; }

	/*
	 * The big gallery image runs wider than the text column but keeps a small
	 * margin from the screen edge.
	 *
	 * Both halves come out of variables: the gutter is cancelled, then --hero-inset
	 * is added back, so the image sits the same distance from the edge at 767px and
	 * at 420px even though the gutter itself steps from 16px to 13px. Neither value
	 * is repeated as a literal, so they cannot drift.
	 *
	 * The rounded corners are deliberately NOT reset now, because the image is no
	 * longer touching the edge and the design's radius reads correctly again.
	 */
	.ct-itin .main-gallery { margin-inline: calc( ( var(--wrap-pad) - var(--hero-inset) ) * -1 ); }

	/*
	 * aspect-ratio:auto hands the height back to the image, which is the whole
	 * point: a square in the old 16/9 slot lost 44% of its width to grey bars.
	 *
	 * Consequence, accepted deliberately: slides of different shapes now have
	 * different heights, so switching thumbnails moves the content below.
	 */
	.ct-itin .main-gallery .ph { aspect-ratio: auto; }

	/*
	 * max-height is for landscape phones specifically. A 740x360 viewport is still
	 * under this breakpoint, and a square image would otherwise ask for 740px of
	 * height on a 360px-tall screen. object-fit stays purely so that clamped case
	 * scales down instead of distorting; in the normal case nothing is fitted.
	 */
	.ct-itin .main-gallery .ph img { height: auto; max-height: 70vh; object-fit: contain; }

	.ct-itin .section-head { margin-bottom: 20px; }
	.ct-itin .section-head h1 { font-size: 25px; }
	.ct-itin .section-head h2,
	.ct-itin .section-head h3 { font-size: 23px; }
	.ct-itin .section-head p { font-size: 14.5px; }
	.ct-itin .eyebrow { font-size: 12px; letter-spacing: 1.2px; }

	/*
	 * 23px is the page's own mobile section-heading size, not the 28px the
	 * Elementor card used. At 28px on a 360px screen this heading wraps to three
	 * lines and reads louder than the real section titles above and below it,
	 * which is a hierarchy this card should not win.
	 */
	.ct-itin .explain-content h2,
	.ct-itin .explain-content h3 { font-size: 23px; line-height: 32px; margin-bottom: 18px; }
	.ct-itin .explain-card { padding: 20px 18px; }

	/*
	 * The form panel is the third box the page has already paid padding for:
	 * gutter, then card, then this. At 20px a 360px screen leaves 258px for the
	 * fields; 16px gives them 266px.
	 *
	 * Nothing here stacks the two-up rows, and nothing needs to: Elementor's own
	 * `.elementor-column.elementor-col-50 { width: 50% }` lives inside
	 * `@media (min-width: 768px)`, so every field is already full width below
	 * this breakpoint. A rule to force it would be dead weight that looks load-
	 * bearing.
	 */
	.ct-itin .explain-form { padding: 16px; }
	.ct-itin .incl-card { padding: 20px 18px; }
	.ct-itin .cancel-card { padding: 18px; }

	/* The accordion is the main content on this page, so reclaiming 8px a side
	   matters more here than anywhere else. */
	.ct-itin .itin-head { padding: 15px 16px; }
	.ct-itin .itin-head .itin-t { font-size: 15.5px; }
	.ct-itin .itin-body-inner { padding: 0 16px; }
	.ct-itin .itin-item.open .itin-body-inner { padding-bottom: 16px; }
	.ct-itin .itin-head .left { gap: 10px; }

	.ct-itin .mp-row { padding: 14px 16px; }

	/* Horizontal half stays on the variable so it tracks the 420px step too. */
	.ct-itin .meta-strip .wrap { gap: 14px 18px; padding: 14px var(--wrap-pad); }
	.ct-itin .meta-item { font-size: 13px; }
}

/* ==========================================================================
   600px, phones
   ========================================================================== */
@media (max-width: 600px) {

	/*
	 * One control per row. An <input type="date"> has a minimum intrinsic width
	 * of roughly 150px in Chrome and Safari: it will not shrink to fit a
	 * half-width column inside the widget, and forces the widget wider instead.
	 */
	.ct-itin .booking-form { grid-template-columns: 1fr; }

	/* Two info cards side by side leaves ~130px each, which wraps every label. */
	.ct-itin .info-cards { grid-template-columns: 1fr; }

	.ct-itin .price-now { font-size: 25px; }

	/* Full-width taps, and comfortably above the 44px minimum target. */
	.ct-itin .btn { width: 100%; height: 46px; }
	.ct-itin .check-avail { margin-bottom: 8px; }

	/*
	 * Customize and Enquire stack from here rather than from the 480px in
	 * tour-quote.css, because .btn has just gone full width: side by side they
	 * would be the only pair of half-width controls left on the page, sitting
	 * under a full-width Book Now.
	 *
	 * `flex: 0 0 auto` IS THE FIX, not tidying. tour-quote.css gives these
	 * buttons `flex: 1 1 0` so the two halves stay equal while they are in a row,
	 * and a flex-basis is measured along the MAIN axis, which becomes the height
	 * the moment the row turns into a column. A basis of 0 then beats the
	 * `height: 46px` above, and each button collapses to its automatic minimum,
	 * roughly one line of text with no button drawn around it. That is what made
	 * these two look broken on a phone while every other button was fine.
	 *
	 * min-height rather than a fixed height, because both labels are editable in
	 * Tour Settings: a longer one wraps to two lines, and a fixed 46px would push
	 * the second line straight out of the button.
	 */
	.ct-itin .btn-row {
		flex-direction: column;
		gap: 10px;
	}

	.ct-itin .btn-row .btn {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		min-height: 46px;
		padding: 10px 16px;
		/* Back to the base size. The 13.5px in tour-quote.css exists only to fit
		   two labels into half of a sidebar, which is not what this is any more. */
		font-size: 14.5px;
	}

	.ct-itin .day-num { font-size: 12px; padding: 4px 9px; }

	.ct-itin .itin-desc li,
	.ct-itin .itin-prose,
	.ct-itin .mp-value { font-size: 14px; }

	/* Slightly narrower cards mean the next one peeks in, which is the only cue
	   that the carousel scrolls now the arrows are hidden at this width. */
	.ct-itin .pkg-card { width: 240px; }
}

/* ==========================================================================
   420px, small phones
   ========================================================================== */
@media (max-width: 420px) {

	/* The hero breakout follows this automatically, with nothing else to change,
	   and the image keeps its 10px distance from the edge because --hero-inset is
	   subtracted from whatever the gutter happens to be. */
	.ct-itin { --wrap-pad: 13px; }

	.ct-itin .section-head h1 { font-size: 23px; }
	.ct-itin .section-head h2,
	.ct-itin .section-head h3 { font-size: 21px; }

	.ct-itin .widget { padding: 16px; }
	.ct-itin .price-now { font-size: 23px; }

	/*
	 * Tied to the widget padding above. The nationality buttons are nowrap, and
	 * once the widget loses 6px a side the inline "I am:" label no longer leaves
	 * room for both, so the label takes its own row from here rather than at the
	 * design's original 400px, which would have left a 20px band that overflowed.
	 */
	.ct-itin .nat-toggle { padding: 8px; }
	.ct-itin .nat-label { flex: 0 0 100%; margin-bottom: 2px; }

	.ct-itin .itin-head { padding: 14px 13px; }
	.ct-itin .itin-body-inner { padding: 0 13px; }

	/*
	 * The sticky bar has four items in a fixed grid, and the Book Now label is
	 * admin-editable, so a long one would otherwise push the bar wider than the
	 * screen. Ellipsis rather than wrap, so the bar keeps its height.
	 *
	 * Not scoped under .ct-itin: the bar is printed on wp_footer, outside it.
	 */
	.ct-mobile-cta a {
		font-size: 10px;
		/*
		 * The bottom value has to repeat the safe-area inset. A plain
		 * `padding: 9px 2px` shorthand here would reset all four sides and silently
		 * discard the calc() set at the 760px breakpoint, since this block comes
		 * later in source order, putting the labels back under the gesture pill.
		 */
		padding: 9px 2px calc( 9px + env(safe-area-inset-bottom, 0px) );
	}
	.ct-mobile-cta a span {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ct-itin .pkg-card { width: 215px; }

	/* 183px of content once the padding is off, so the button gives some back. */
	.ct-itin .pkg-go { padding: 7px 11px; font-size: 11.5px; }
}