/*
 * Trailer single: starter styles, two-column layout with the site's navy / gold / sand branding.
 * Everything is scoped to .tr-single so it won't leak into the rest of the site.
 * Fonts, list bullets and heading styles are inherited from the theme on purpose.
 * The three colours below are estimates from a screenshot: swap them for the theme's exact values.
 */

.tr-single {
	--tr-navy: #1f2247;
	--tr-gold: #c2a97f;
	--tr-sand: #e3d9c5;
	--tr-text: #4a4a4a;
	--tr-on-navy: #ffffff;
	--tr-on-navy-muted: rgba(255, 255, 255, .6);
	--tr-radius: 3px;
	--tr-gap: 40px;
	--tr-sticky-top: 110px; /* increase if the site header is sticky and overlaps the card */
	--tr-header-h: 100px;   /* height of the site header that overlays the top of the banner: match it to your header */
}

.tr-single .tr-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* 1. Banner + breadcrumb */
.tr-banner {
	background: var(--tr-navy);
	color: var(--tr-on-navy);
	padding: calc(var(--tr-header-h) + 50px) 0 40px;
}
.tr-title {
	margin: 0 0 20px;
	color: var(--tr-on-navy);
	font-size: 2.75rem;
	line-height: 1.15;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.tr-breadcrumb {
	font-size: 13px;
	color: var(--tr-on-navy);
}
.tr-breadcrumb a {
	color: var(--tr-on-navy);
	text-decoration: none;
}
.tr-breadcrumb a:hover { text-decoration: underline; }
.tr-breadcrumb .tr-sep { margin: 0 8px; opacity: .6; }
.tr-breadcrumb .tr-current { color: var(--tr-gold); }

/* 2. Two-column main area */
.tr-main {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: var(--tr-gap);
	align-items: start;
	padding-top: 50px;
	padding-bottom: 30px;
}

/* Left: media */
.tr-hero {
	position: relative;
}
.tr-hero img {
	display: block;
	width: 100%;
	height: auto;
}
.tr-ribbon {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #c62828;
	color: #fff;
	padding: 6px 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-radius: var(--tr-radius);
}
/* Hero image opens the lightbox */
.tr-hero-link {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
	cursor: zoom-in;
}
.tr-hero-link img {
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

/* Gallery: a single row of four thumbnails (the rest are hidden links used by the lightbox) */
.tr-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
	align-items: stretch;
}
.tr-gallery-item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: zoom-in;
}
.tr-gallery-item[hidden] {
	display: none;
}
.tr-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .2s;
}
.tr-gallery-item:hover img { opacity: .85; }

/* "+N" on the last visible thumbnail */
.tr-gallery-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 34, 71, .72);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: .04em;
	pointer-events: none;
}

/* Right: sticky navy summary card */
.tr-summary {
	position: sticky;
	top: var(--tr-sticky-top);
	background: var(--tr-navy);
	color: var(--tr-on-navy);
	padding: 36px;
}
.tr-summary p { margin: 0; }
.tr-eyebrow {
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tr-gold);
}
.tr-eyebrow {
	--tr-dots: #c2b59b;
	position: relative;
	padding-left: 46px; /* room for the dots graphic, same as the Elementor sections */
	background: linear-gradient(to right, var(--tr-dots), rgb(184 151 128 / 6%)) no-repeat 10px 50% / 26px 2px;
}
.tr-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 11px;
	height: 15px;
	transform: translateY(-50%);
	box-sizing: border-box;
	border: 2px solid var(--tr-dots);
	border-left: 0;
	border-radius: 0 150px 150px 0;
}
.tr-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-top: 12px !important;
}
.tr-price-main {
	font-size: 2.5rem;
	line-height: 1.1;
	color: var(--tr-on-navy);
}
.tr-price-vat {
	font-size: 15px;
	color: var(--tr-on-navy-muted);
}
.tr-price-note {
	margin-top: 8px !important;
	color: var(--tr-gold);
	font-weight: 600;
}
.tr-ref-line {
	margin-top: 8px !important;
	font-size: 14px;
	color: var(--tr-on-navy-muted);
}
.tr-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
}
.tr-chip {
	margin: 0;
	padding: 4px 12px;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	color: var(--tr-on-navy);
}
.tr-chip::before { display: none; }
.tr-chip-reserved { border-color: #ef6c00; color: #ffb74d; }
.tr-chip-sold     { border-color: #ef5350; color: #ef9a9a; }

.tr-warranty,
.tr-location {
	margin-top: 14px !important;
	font-size: 15px;
}
.tr-warranty { font-weight: 600; }

.tr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}
.tr-btn {
	display: inline-block;
	padding: 12px 26px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--tr-gold);
	border-radius: var(--tr-radius);
	transition: opacity .2s;
}
.tr-btn:hover { opacity: .85; }
.tr-btn-primary   { background: var(--tr-gold); color: var(--tr-navy); }
.tr-btn-secondary { background: transparent; color: var(--tr-gold); }

/* 3. Details: description, then features in two columns */
.tr-details {
	padding-top: 30px;
	padding-bottom: 40px;
	color: var(--tr-text);
}
.tr-features { margin-top: 24px; }
.tr-features-heading {
	margin: 0 0 24px;
	text-align: center; /* optional heading, centred above the columns */
	color: var(--tr-navy);
}
.tr-features-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
}
.tr-features-cols.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.tr-features-col > *:first-child { margin-top: 0; }
.tr-features-col ul, .tr-features-col ol { margin-top: 0; }
.tr-features-col p { break-after: avoid; }

/* 4. Enquiry: navy card on a sand band */
.tr-enquiry {
	background: var(--tr-sand);
	padding: 60px 20px;
}
.tr-enquiry-card {
	max-width: 700px;
	margin: 0 auto;
	padding: 40px;
	background: var(--tr-navy);
	color: var(--tr-on-navy);
}
.tr-enquiry-card h2 {
	margin: 0 0 24px;
	text-align: center;
	color: var(--tr-on-navy);
	font-size: 1.75rem;
}
.tr-enquiry-placeholder {
	padding: 30px;
	border: 1px dashed rgba(255, 255, 255, .3);
	color: var(--tr-on-navy-muted);
	text-align: center;
}

/* Tablet and mobile */
@media (max-width: 900px) {
	.tr-single { --tr-header-h: 80px; }
	.tr-banner { padding: calc(var(--tr-header-h) + 30px) 0 30px; }
	.tr-title  { font-size: 2rem; }
	.tr-main {
		grid-template-columns: 1fr;
	}
	.tr-summary {
		position: static;
		padding: 28px 24px;
	}
	.tr-features-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.tr-gallery { gap: 6px; }
	.tr-gallery-more { font-size: 1.05rem; }
	.tr-price-main { font-size: 2rem; }
	.tr-enquiry { padding: 30px 12px; }
	.tr-enquiry-card { padding: 24px 18px; }
	.tr-btn { flex: 1 1 100%; text-align: center; }
}

/* Lightbox (added to <body>, so it can't rely on the .tr-single variables) */
.tr-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(14, 16, 38, .95);
}
.tr-lb[hidden] { display: none; }
html.tr-lb-open { overflow: hidden; }

.tr-lb-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 60px 70px 50px;
	box-sizing: border-box;
}
.tr-lb-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.tr-lb-count {
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .7);
}

.tr-lb button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 34px;
	line-height: 1;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.tr-lb button:hover,
.tr-lb button:focus-visible {
	background: rgba(194, 169, 127, .35);
	border-color: #c2a97f;
	outline: none;
}
.tr-lb button[hidden] { display: none; }
.tr-lb-close { top: 16px; right: 16px; }
.tr-lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.tr-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
	.tr-lb-figure { padding: 60px 8px 50px; }
	.tr-lb-prev,
	.tr-lb-next { top: auto; bottom: 8px; transform: none; }
	.tr-lb-prev { left: 16px; }
	.tr-lb-next { right: 16px; }
}