/**
 * Travelity plugin page styles.
 * All colors/fonts come from CSS custom properties injected by
 * Travelity_Theme (default = the workspace's widget theme):
 *   --tv-primary, --tv-primary-dark, --tv-primary-light (widget accent),
 *   --tv-text (optional text-color override; unset = inherit the site theme),
 *   --tv-bg, --tv-font
 */

.travelity-page {
	font-family: var(--tv-font, inherit);
	background: var(--tv-bg, #fff);
	color: var(--tv-text, inherit);
	/* Injected from the active WP theme's content width so plugin pages
	   line up with the rest of the site (override in Settings → Travelity),
	   but capped at 1140px — the Travelity widget's own container width. */
	max-width: min(var(--tv-page-width, 900px), 1140px);
	margin: 0 auto;
	/* Explicit width, not just max-width: as a flex/grid child, auto
	   margins override the default cross-axis stretch and the page would
	   collapse to fit-content (seen on a block theme whose canvas is a
	   flex column for a sticky footer). width:100% + max-width + auto
	   margins center it in every layout context. */
	width: 100%;
	box-sizing: border-box;
	padding: 32px 20px 64px;
	line-height: 1.6;
}

.travelity-page--wide {
	max-width: min(var(--tv-page-width-wide, 1120px), 1140px);
}

.travelity-page h1,
.travelity-page h2 {
	font-family: var(--tv-font, inherit);
	color: var(--tv-text, inherit);
	line-height: 1.25;
}

.travelity-page h1 {
	font-size: 2rem;
	margin: 0 0 8px;
}

.travelity-page h2 {
	font-size: 1.3rem;
	margin: 0 0 16px;
}

.travelity-page a {
	color: var(--tv-primary, #0071c2);
}

/* ---- hero / cover ---- */

.travelity-cover {
	margin: 0;
}

.travelity-cover img {
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* ---- hero: title + description on the left, cover beside it on desktop ---- */

.travelity-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 0 0 36px;
}

/* min-width:0 lets the text column shrink instead of forcing the grid wider. */
.travelity-hero__main {
	min-width: 0;
}

/* The grid gap owns the vertical rhythm here — zero the children's own margins.
   Also give the description more presence than the plain page default. */
.travelity-hero .travelity-description {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--tv-text, inherit);
}

@media (min-width: 768px) {
	.travelity-hero--has-cover {
		grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* Give the title more presence than the plain page default. */
.travelity-hero h1 {
	font-size: 2.4rem;
	font-weight: 800;
	margin: 0 0 12px;
}

/* ---- description clamp + "See more" (pure CSS, checkbox toggle) ---- */

.travelity-hero__desc {
	position: relative;
}

/* The checkbox drives the toggle but stays out of sight — kept in flow and
   focusable (not display:none) so keyboard users can operate it. */
.travelity-desc-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}

.travelity-description--clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.travelity-desc-toggle:checked ~ .travelity-description--clamp {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

.travelity-desc-more {
	display: inline-block;
	margin-top: 6px;
	color: var(--tv-primary, #0071c2);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

/* Swap the label text with the checkbox state; both live in the DOM. */
.travelity-desc-more__less {
	display: none;
}

.travelity-desc-toggle:checked ~ .travelity-desc-more .travelity-desc-more__more {
	display: none;
}

.travelity-desc-toggle:checked ~ .travelity-desc-more .travelity-desc-more__less {
	display: inline;
}

.travelity-desc-toggle:focus-visible ~ .travelity-desc-more {
	outline: 2px solid var(--tv-primary, #0071c2);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- content sections ---- */

.travelity-section {
	margin: 0 0 36px;
}

/* ---- description: quieter than the widget below ---- */

.travelity-description {
	font-size: 0.95rem;
	line-height: 1.7;
	color: color-mix(in srgb, var(--tv-text, currentColor) 85%, transparent);
}

.travelity-description p {
	margin: 0 0 14px;
}

.travelity-description h2,
.travelity-description h3 {
	font-size: 1.1rem;
	margin: 20px 0 10px;
}

/* ---- booking section ---- */

.travelity-booking {
	padding-top: 12px;
}

/* ---- funnel pages (checkout / result / wishlist): the embed renders inside
   the theme's own content area, which may be full width. Constrain it to the
   same column the product pages use so the funnel lines up with the catalog. */

.travelity-funnel .travelity-embed {
	max-width: min(var(--tv-page-width, 900px), 1140px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* The widget is the whole page here — the WP page title ("Checkout" etc.) is
   redundant. Hidden, not removed: kept in the DOM for a11y (and these pages
   are noindex anyway). Covers block themes (.wp-block-post-title) and classic
   themes (.entry-title). */
.travelity-funnel .wp-block-post-title,
.travelity-funnel .entry-title {
	display: none;
}

/* ---- archive grid ---- */

.travelity-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.travelity-card {
	border: 1px solid var(--tv-primary-light, #e3f1fa);
	border-radius: 16px;
	overflow: hidden;
	background: var(--tv-bg, #fff);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	display: flex;
	flex-direction: column;
}

.travelity-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.travelity-card__image {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--tv-primary-light, #e3f1fa);
}

.travelity-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.travelity-card__body {
	padding: 14px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.travelity-card__body h2 {
	font-size: 1.05rem;
	margin: 0;
}

.travelity-card__body h2 a {
	text-decoration: none;
	color: var(--tv-text, inherit);
}

.travelity-card__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tv-primary-dark, #0060a5);
	font-weight: 600;
}

.travelity-card__excerpt {
	margin: 0;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--tv-text, currentColor) 72%, transparent);
}

/* ---- pagination ---- */

.travelity-pagination {
	margin: 32px 0 0;
	text-align: center;
}

.travelity-pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin: 0 2px;
	border-radius: 8px;
	text-decoration: none;
}

.travelity-pagination .page-numbers.current {
	background: var(--tv-primary, #0071c2);
	color: #fff;
}

@media (max-width: 480px) {
	.travelity-page {
		padding: 20px 14px 48px;
	}

	.travelity-page h1 {
		font-size: 1.5rem;
	}
}