/**
 * The "Why travel with us" and "How you travel" cards.
 *
 * Its own file rather than an addition to tour-itinerary.css, which is 31KB of
 * supplied design that this plugin can only replace whole: appending one
 * component there would mean transcribing 800 unrelated lines and risking a slip
 * in them.
 *
 * SOURCE ORDER IS LOAD-BEARING. These rules override .hcard and .highlights-grid
 * from tour-itinerary.css at equal specificity, so they only win by printing
 * afterwards. includes/highlight-cards.php enqueues this at priority 20 with
 * ct-tour-itinerary as a dependency, which guarantees both. It also prints after
 * tour-responsive.css, which is why the breakpoints at the bottom of this file
 * restate the row: the old file's media queries would otherwise be beaten by this
 * file's base rules and the cards would stay four wide on a phone.
 *
 * Scoped under .ct-itin so it borrows that block's design tokens and cannot reach
 * the site's Elementor header and footer, which render on this page too.
 *
 * THE SECTION HEADING IS NOT STYLED HERE, AND THAT IS THE POINT.
 *
 * It used to be: 40px, weight 800, negative tracking, its own eyebrow rules and
 * its own ladder at 1100 and 640 — a third larger than every other heading on the
 * page, reached by a different route. The markup now carries .section-head as
 * well, so the size, the weight, the centring and the breakpoints all come from
 * the design. Only the one genuine difference is left below.
 *
 * TWO SECTIONS SHARE THESE RULES
 * ------------------------------
 * The highlights and the transportation rows are the same markup, and they are
 * deliberately kept the same size:
 *
 *   A HIGHLIGHT is a photograph. The colour tint over it and the white icon badge
 *   on top of it are both gone; the picture is the point, and anything laid over
 *   it was in the way of the thing it was decorating.
 *
 *   A TRANSPORT ROW has no photograph — the schema has no image field for one —
 *   so its header is the accent colour with an icon on it.
 *
 * The accent gradient is a BACKGROUND rather than an overlay: a photograph covers
 * it completely, and a card without one shows it. Nothing has to know which kind
 * of card it is drawing, and every header is the same height either way.
 *
 * @package CustomTours
 */

/* ==========================================================================
   Section heading
   ==========================================================================
 * One rule. Everything else comes from .section-head in the design.
 */

/*
 * The default heading is nine words and wraps to "…nothing left to / chance",
 * leaving one word alone on the second line of a centred headline — which is
 * where it is most obvious. balance evens the lines instead, and is ignored by
 * browsers that do not know it, which get the ragged wrap they got before.
 */
.ct-itin .hcards-head h2 {
	text-wrap: balance;
}

/* ==========================================================================
   The row
   ==========================================================================
 * FLEX, NOT GRID, AND THAT IS THE WHOLE POINT OF THIS BLOCK.
 *
 * It was a four-column grid. Four columns are four columns whether or not there
 * are four cards, so a section with three — which "How you travel" usually has,
 * and plenty of tours have for their highlights — filled the first three tracks
 * and left the fourth empty. The row sat hard against the left of the page under
 * a centred heading, which reads as a layout that has gone wrong rather than as
 * three cards.
 *
 * justify-content cannot fix that on a grid whose tracks are 1fr: the tracks fill
 * the width whether anything is in them or not, so there is nothing left over to
 * distribute. Flex items only take the width they are given, so the spare quarter
 * becomes real space and splits either side.
 *
 * The basis is written as (100% - the gaps) / 4 rather than 25%, because a
 * percentage basis does not know about the gap and four of them plus three gaps
 * overflow the row.
 */

.ct-itin .highlights-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
	align-items: stretch;
}

.ct-itin .highlights-grid > .hcard {
	flex: 0 1 calc((100% - 78px) / 4);
	min-width: 0;
}

/* ==========================================================================
   The card
   ========================================================================== */

.ct-itin .hcard {
	--ac: #F68B2D;
	--ac-deep: #C86A16;

	display: flex;
	flex-direction: column;
	/* Reset the tile: tour-itinerary.css gives .hcard its own padding, border,
	   centred text and grey ground, all of which fight this layout. */
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: #fff;
	text-align: left;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(22, 35, 58, .09);
	transition: transform .18s ease, box-shadow .18s ease;
}

.ct-itin .hcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(22, 35, 58, .15);
}

/* ---------- accents ---------- */

/*
 * Cycled by position from ct_hcard_accent(), so a row always reads orange, blue,
 * rust, green.
 *
 * On a photo card the accent is only the proof line's colour. On a card without a
 * picture it is the header.
 */
.ct-itin .hcard--orange { --ac: #F68B2D; --ac-deep: #C86A16; }
.ct-itin .hcard--blue   { --ac: #1B79B8; --ac-deep: #12557F; }
.ct-itin .hcard--rust   { --ac: #A6522E; --ac-deep: #7B3A1E; }
.ct-itin .hcard--green  { --ac: #1F9D55; --ac-deep: #14713C; }

/* ---------- header ---------- */

/*
 * ONE HEIGHT, EVERY CARD, BOTH SECTIONS.
 *
 * Not an aspect ratio: the photographs uploaded for these are every shape from
 * 2560x2560 to 870x555, and an aspect ratio would give each card a different
 * height and leave the row's titles on different lines. A fixed height with
 * object-fit: cover crops instead, which is the trade that keeps the row square.
 *
 * The gradient is the GROUND, not a veil. A card with a photograph paints over
 * every pixel of it; a card without one shows it.
 */
.ct-itin .hcard__head {
	position: relative;
	height: 200px;
	background: linear-gradient(135deg, var(--ac) 0%, var(--ac-deep) 100%);
	overflow: hidden;
}

/*
 * No filter. The picture used to be desaturated because a colour was being laid
 * over it and the two fought; with the tint gone, dulling the photograph would be
 * removing the only thing the card now has.
 */
.ct-itin .hcard__head img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- icon badge ---------- */

/*
 * Transport cards only. The highlight cards no longer print this at all, so
 * these rules are what keeps "How you travel" looking like itself.
 */
.ct-itin .hcard__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(22, 35, 58, .18);
}

.ct-itin .hcard__badge i {
	font-size: 26px;
	line-height: 1;
	color: var(--ac);
}

/*
 * The emoji fallback, for a card whose icon could not be resolved to a glyph, or
 * where the Font Awesome stylesheet is missing. Sized to sit on the same optical
 * centre as the glyph it replaces.
 */
.ct-itin .hcard__badge .hcard__emoji {
	font-size: 28px;
	line-height: 1;
	font-style: normal;
}

/* ---------- body ---------- */

.ct-itin .hcard__body {
	display: flex;
	flex-direction: column;
	/* Fills the card so the proof line can be pinned to the bottom and the cards
	   share a baseline however long the descriptions run. */
	flex: 1 1 auto;
	gap: 7px;
	padding: 20px 20px 22px;
}

/*
 * THE TITLE IS NOT ALWAYS A TITLE.
 *
 * On the tours built here it is two or three words — "5-Star Hotels", "Expert
 * Guides". On the 29 imported ones it is a whole sentence: "2-day private tour of
 * Agra, and Jaipur, including round-trip transport and accommodations". Both go
 * through this one rule, and it was set for the short kind: 17px extra-bold
 * Poppins over four lines is a paragraph shouted rather than a heading.
 *
 * The fix is typographic, not structural. Nothing here can tell the two apart,
 * and rewriting thirty tours' worth of copy is not a stylesheet's job — but a
 * size and a line height that suit a sentence still suit three words, whereas the
 * reverse is not true. So it is set for the harder case.
 *
 * text-wrap: pretty is what stops the last line being a single orphaned word,
 * which is the other half of why these read badly. Ignored where unsupported.
 */
.ct-itin .hcard__body h4 {
	margin: 0;
	color: #16233A;
	font-family: 'Poppins', sans-serif;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: -0.1px;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.ct-itin .hcard__body p {
	margin: 0;
	color: #6B7280;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.55;
}

.ct-itin .hcard__proof {
	display: flex;
	align-items: baseline;
	gap: 7px;
	/* margin-top:auto pins this to the bottom of the card. */
	margin-top: auto;
	padding-top: 10px;
	color: var(--ac);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

/*
 * The tick is drawn here rather than typed into the field, so an editor writes
 * only the words and every card is punctuated the same way. aria-hidden is not
 * available on a pseudo-element, but generated content is not exposed as text by
 * the screen readers that matter here, and the sentence reads correctly without
 * it.
 */
.ct-itin .hcard__proof::before {
	content: "\2713";
	flex: 0 0 auto;
	font-weight: 700;
}

/* ==========================================================================
   Responsive
   ==========================================================================
 * The row only. The heading's breakpoints come from the design now, along with
 * the rest of its type.
 *
 * Restated here rather than left to tour-responsive.css, which prints before this
 * file and would lose to the four-across rule above.
 *
 * Each breakpoint restates the basis as well as the gap, because the two are
 * arithmetic on each other: change one without the other and the row either
 * overflows or leaves a stripe down the side.
 */

@media (max-width: 1100px) {

	.ct-itin .highlights-grid { gap: 22px; }

	/* Two across: one gap between them. */
	.ct-itin .highlights-grid > .hcard {
		flex-basis: calc((100% - 22px) / 2);
	}
}

@media (max-width: 640px) {

	.ct-itin .highlights-grid { gap: 18px; }

	/* One across, so no gap to subtract. */
	.ct-itin .highlights-grid > .hcard {
		flex-basis: 100%;
	}

	/*
	 * One card per row, so the header is the full width of the screen. 200px
	 * across a phone is most of the first screenful before a word has been read.
	 */
	.ct-itin .hcard__head { height: 178px; }

	.ct-itin .hcard__badge {
		width: 56px;
		height: 56px;
		border-radius: 16px;
	}

	.ct-itin .hcard__badge i { font-size: 23px; }

	.ct-itin .hcard__body { padding: 17px 17px 19px; }

	/* One card wide means a long title has the whole screen, so it can carry a
	   little more size than it can in a quarter-width column. */
	.ct-itin .hcard__body h4 { font-size: 16.5px; }

	/* A hover lift on a touch screen only ever fires as a stuck state after a tap. */
	.ct-itin .hcard:hover {
		transform: none;
		box-shadow: 0 12px 34px rgba(22, 35, 58, .09);
	}
}