/* NCCR Collections — branded direct-booking landing (styled resort archive).
   Scoped to .nccr-col-* so it never affects the main search plugin.
   --nccr-brand is set inline on .nccr-col-landing from the collection color. */

.nccr-col-landing { --nccr-brand: #2f5d3a; color: #222; }

/* Hero */
.nccr-col-hero { position: relative; width: 100%; height: 56vh; min-height: 340px; max-height: 600px; overflow: hidden; }
.nccr-col-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nccr-col-hero-overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 2rem clamp(1rem, 5vw, 4rem);
	/* Scrim must hold up over light/hazy photos — darker and taller than a
	   typical hero fade, since the title + intro can stack high on mobile. */
	background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.08) 100%);
	color: #fff;
}
.nccr-col-hero-title {
	font-size: clamp(1.9rem, 4.5vw, 3.2rem); margin: 0 0 .4rem; line-height: 1.1; color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.nccr-col-hero-intro {
	font-size: 1.05rem; margin: 0; max-width: 46rem;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
@media (max-width: 640px) {
	.nccr-col-hero { height: 42vh; min-height: 280px; }
	/* The full intro renders as the first body section right below the hero —
	   repeating it over the photo doubles the text and climbs into the light
	   top of the image. Title-only hero on phones. */
	.nccr-col-hero-intro { display: none; }
}

/* Body container */
.nccr-col-landing-body { max-width: 1180px; margin: 2rem auto 4rem; padding: 0 clamp(1rem, 4vw, 2rem); }
.nccr-col-landing-intro { line-height: 1.7; font-size: 1.05rem; margin-bottom: 2.5rem; }
.nccr-col-empty { color: #777; }

/* Jump nav (multiple units) */
.nccr-col-jumpnav { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.nccr-col-jumpnav a {
	display: inline-block; padding: .4rem .9rem; border: 1px solid var(--nccr-brand);
	border-radius: 999px; color: var(--nccr-brand); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.nccr-col-jumpnav a:hover { background: var(--nccr-brand); color: #fff; }

/* Unit block: info + sticky booking column */
.nccr-col-unit-block {
	display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start;
	padding: 2.5rem 0; border-top: 1px solid #eee;
}
.nccr-col-unit-block:first-of-type { border-top: 0; }
@media (max-width: 880px) { .nccr-col-unit-block { grid-template-columns: 1fr; gap: 1.5rem; } }

.nccr-col-unit-name { font-size: 1.6rem; margin: 0 0 1rem; color: var(--nccr-brand); }

/* Stats */
.nccr-col-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; }
.nccr-col-stat { display: flex; flex-direction: column; }
.nccr-col-stat strong { font-size: 1.25rem; color: var(--nccr-brand); }
.nccr-col-stat span { font-size: .82rem; color: #666; }

/* Gallery */
.nccr-col-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-bottom: 1.25rem; }
.nccr-col-thumb { padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; border-radius: 8px; aspect-ratio: 4/3; }
.nccr-col-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.nccr-col-thumb:hover img { transform: scale(1.05); }

.nccr-col-overview { line-height: 1.7; margin-bottom: 1.25rem; }

/* Amenities */
.nccr-col-amenities { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.nccr-col-amenities li { display: flex; align-items: center; gap: .5rem; }
.nccr-col-amen-icon { font-size: 1.1rem; }

.nccr-col-fulllink a { color: var(--nccr-brand); font-weight: 600; text-decoration: none; }
.nccr-col-fulllink a:hover { text-decoration: underline; }

/* Booking widget column */
.nccr-col-booking { position: sticky; top: 1.5rem; }
.nccr-col-booking-inner { border: 1px solid #e3e3e0; border-radius: 12px; padding: 1.25rem; box-shadow: 0 4px 18px rgba(0,0,0,.06); background: #fff; }
.nccr-col-booking-title { font-size: 1.2rem; margin: 0 0 1rem; color: var(--nccr-brand); }
.nccr-col-widget { min-height: 60px; }
.nccr-col-widget-missing { color: #b32d2e; font-size: .88rem; }
.nccr-col-booking-note { font-size: .82rem; color: #666; margin: 1rem 0 0; text-align: center; }
.nccr-col-book-fallback { display: inline-block; font-weight: 600; color: var(--nccr-brand); text-decoration: none; }
@media (max-width: 880px) { .nccr-col-booking { position: static; } }

.nccr-col-widget-standalone { max-width: 420px; }

/* Lightbox */
.nccr-col-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.92); align-items: center; justify-content: center; }
.nccr-col-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 6px; }
.nccr-col-lb-close { position: absolute; top: 1rem; right: 1.5rem; background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; }

/* Units grid (shortcode) inherits the core .nccr-property-grid styles. */
.nccr-collection-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }

/* ─── Additive "Book Direct" on a unit's own single listing page ───
   The button sits in the core .nccr-booking-bar next to Airbnb/VRBO and
   reuses core's .nccr-book-btn box model; we only set its color + icon. */
.nccr-book-direct {
	background: #2f5d3a; color: #fff; border: 1px solid #2f5d3a;
}
.nccr-book-direct:hover, .nccr-book-direct:focus { background: #24482d; border-color: #24482d; color: #fff; }
.nccr-book-direct::before { content: "🌲"; margin-right: .4em; }

/* Embedded direct-booking widget section (anchored by #nccr-book-direct). */
.nccr-col-single-booking { scroll-margin-top: 1.5rem; }
.nccr-col-single-booking-title { color: #2f5d3a; }
.nccr-col-single-booking-note { font-size: .95rem; color: #555; margin: 0 0 1.25rem; max-width: 44rem; }
.nccr-col-single-widget { min-height: 60px; }
.nccr-col-single-widget iframe { max-width: 100%; }

/* ─── Landing SEO content + FAQ (v1.3.1) ─── */
.nccr-col-landing-content { max-width: 52rem; margin-left: auto; margin-right: auto; }
.nccr-col-landing-content h2 { font-size: 1.45rem; color: var(--nccr-brand); margin: 2rem 0 .75rem; }
.nccr-col-landing-content p { line-height: 1.7; color: #333; }
.nccr-col-landing-content ul { line-height: 1.7; color: #333; padding-left: 1.25rem; }

.nccr-col-faq { max-width: 52rem; margin-left: auto; margin-right: auto; }
.nccr-col-faq h2 { font-size: 1.45rem; color: var(--nccr-brand); margin: 2rem 0 1rem; }
.nccr-col-faq-item { border: 1px solid #e3e3e3; border-radius: 8px; margin-bottom: .6rem; padding: 0; background: #fff; }
.nccr-col-faq-item summary { cursor: pointer; font-weight: 600; padding: .85rem 1.1rem; list-style-position: inside; }
.nccr-col-faq-item[open] summary { border-bottom: 1px solid #eee; }
.nccr-col-faq-item p { margin: 0; padding: .85rem 1.1rem; line-height: 1.65; color: #444; }
