/* =========================================================
   Our Brochures page — design mockup
========================================================= */

body.te-brochures-page .content-area,
body.te-brochures-page #primary,
body.te-brochures-page #inner-wrap {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

body.te-brochures-page.footer-on-bottom #wrapper {
	display: block;
	min-height: 0;
}

body.te-brochures-page.footer-on-bottom #inner-wrap {
	flex: none;
}

body.te-brochures-page #inner-wrap,
body.te-brochures-page #wrapper {
	background: #fff;
}

body.te-brochures-page #colophon.site-footer {
	display: none;
	margin: 0;
	padding: 0;
}

.te-brochures {
	background: transparent;
	margin-bottom: 0;
	padding-bottom: 0;
}

.te-brochures__top {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 14px var(--global-content-edge-padding, 1.5rem) 0;
	text-align: left;
}

/*
 * Breadcrumbs — .te-brochures__top (this element's parent) is
 * deliberately narrowed to 1100px to match the sitewide body-content
 * width standard for the intro copy it also contains, but that meant the
 * breadcrumb (sitting in the same column) landed ~95px right of the
 * site-container/logo the header uses, instead of lining up with it like
 * every other page's breadcrumb does (same bug as the expert single page,
 * see [[at_a_glance_grid_fix]]-adjacent breadcrumb fix). Broken out to
 * full viewport width and re-inset with site-container's own
 * max(24px, ...) formula so it stays correct at every viewport width.
 */
.te-brochures__breadcrumbs {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: 0;
	margin-bottom: 1.75rem;
	padding-left: max(24px, calc((100vw - 1290px) / 2 + 24px));
	padding-right: max(24px, calc((100vw - 1290px) / 2 + 24px));
	box-sizing: border-box;
	color: #006a9c;
	font-family: Roboto, sans-serif;
	/* Was 15px — every other page's breadcrumb (About Us, expert single,
	   tour category) uses 1.1rem (17.6px); matched here for consistency. */
	font-size: 1.1rem;
	line-height: 1.5;
	text-align: left;
}

.te-brochures__breadcrumbs a {
	color: #006a9c;
	text-decoration: none;
}

.te-brochures__breadcrumbs a:hover,
.te-brochures__breadcrumbs a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.te-brochures__breadcrumb-sep {
	color: #006a9c;
}

/* Was #006a9c (link blue) — the current-page segment isn't a link, so it
   should read as plain text like every other page's breadcrumb (About Us,
   expert single, tour single all use #333 here). */
.te-brochures__breadcrumb-current {
	color: #333;
}

/*
 * Editor content wrapper — full width, holds every top-level block from the
 * page editor (post 7422) as a FLAT sibling list: the intro H1 + paragraphs,
 * the brochures grid section, and the "Why Choose" blue row. Nothing is
 * nested inside an intro wrapper, so each section is its own separate block
 * and the full-width sections (grid, why) span edge to edge naturally — no
 * viewport-breakout hacks needed. Only the intro text is pulled back to the
 * 1100px content column.
 */
.te-brochures__content {
	width: 100%;
}

.te-brochures-intro__title {
	max-width: 1148px;
	margin: 0 auto 1.35rem;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
	color: #333;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: clamp(2rem, 3.2vw, 2.85rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: left;
}

/* Intro paragraphs — the plain <p> blocks the client types in the editor.
   Constrained to the 1100px content column; the grid/why sections below are
   full width. (font-size/line-height come from the sitewide 16/21 rule.) */
.te-brochures__content > p {
	max-width: 1148px;
	margin: 0 auto 1rem;
	padding: 0 var(--global-content-edge-padding, 1.5rem);
	color: #333;
	font-family: Roboto, sans-serif;
	text-align: left;
}

/* 40px spacer between the last intro paragraph and the grey grid band. */
.te-brochures__content > p:last-of-type {
	margin-bottom: 40px;
}

/* Brochure cards grid — a direct full-width child of .te-brochures__content,
   so its grey band spans edge to edge with no breakout; the inner
   .te-brochures-grid.site-container keeps the cards at content width. */
.te-brochures-grid-wrap {
	background: #eeedea;
	padding: 3rem 0 4rem;
}

.te-brochures-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.te-brochures-card {
	display: flex;
	flex-direction: column;
	background: transparent;
}

.te-brochures-card__media {
	position: relative;
	padding: 0 0 1.25rem;
	background: transparent;
}

.te-brochures-card__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	background: transparent;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.te-brochures-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1rem 0 0;
	background: transparent;
	box-shadow: none;
}

.te-brochures-card__collection {
	margin: 0 0 0.35rem;
	color: #888;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

.te-brochures-card__title {
	margin: 0 0 1.25rem;
	color: #333;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: clamp(1.25rem, 1.8vw, 1.55rem);
	font-weight: 400;
	line-height: 1.25;
	flex: 1;
}

.te-brochures-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.te-brochures-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8.8px 16px;
	background: #2e6b98;
	border: 1px solid #2e6b98;
	border-radius: 4px;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.te-brochures-card__button:hover,
.te-brochures-card__button:focus-visible {
	background: #265a82;
	border-color: #265a82;
	color: #fff;
}

/* Why Choose */
/*
 * The "Why Choose" blue band is the Blue Row pattern — a Kadence row
 * carrying class .te-brochures-why with the reusable block ref 8718 inside,
 * inserted into the page's editor content (post 7422). It's a direct
 * full-width child of .te-brochures__content, so the blue spans edge to
 * edge naturally (no breakout); the row's inner .kt-row-column-wrap is
 * pulled back to the 1100px content column. Blue comes from the row's own
 * Kadence bgColor (repeated here as a fallback); vertical padding comes
 * from block 8718's own column (50px).
 */
.te-brochures-why {
	margin-bottom: 0;
	background: #c0d2e0;
}

.te-brochures-why > .kt-row-column-wrap {
	max-width: 1148px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--global-content-edge-padding, 1.5rem);
	padding-right: var(--global-content-edge-padding, 1.5rem);
}

@media (max-width: 1024px) {
	.te-brochures-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767px) {
	.te-brochures__top {
		padding-top: 8px;
		padding-bottom: 0;
	}

	.te-brochures-grid-wrap {
		padding: 2rem 0 2.75rem;
	}

	.te-brochures-card__actions {
		grid-template-columns: 1fr;
	}
}