/**
 * Casas Choice — `lp_local` CPT single template (single-lp_local.php +
 * template-parts/lp-local/*.php). The whole page is Pods fields (see
 * inc/pods-bootstrap/06-cpt-lp-local.php), so unlike most of this theme's
 * CSS this isn't shadowing any Greenshift per-block inline style — these
 * classes are the only styling these sections get. Content-width sections
 * use Blocksy's own `.ct-container` (matches its sitewide `maxSiteWidth`
 * customizer setting, 1785px, exactly what the Penpot design uses) rather
 * than a page-specific container — the hero photo stays outside it since
 * it's edge-to-edge. `--cc-*` tokens mirror the ones already established
 * in assets/css/comprar.css (each page-scoped CSS file in this theme
 * redeclares its own copy rather than relying on a shared `:root`).
 *
 * Headings (h1 excepted — the hero title is a bespoke display size bigger
 * than the site's own h1) intentionally carry no font-size override:
 * Blocksy's h2Typography customizer setting is already 36px/300 desktop,
 * 26px/300 mobile, which is what the Penpot design uses too.
 */

.cc-lp-local {
	--cc-ink: var( --theme-palette-color-5, #333538 );
	--cc-ink-warm: #211E16;
	--cc-border: var( --theme-palette-color-7, #C4C7CA );
	--cc-bg-alt: var( --theme-palette-color-8, #F2F3F4 );
	--cc-accent: var( --theme-palette-color-1, #00A6CE );
	--cc-font: 'Montserrat', sans-serif;

	color: var( --cc-ink );
	font-family: var( --cc-font );
}

/* Sections alternate white / light grey as in the design. White has to be
 * explicit: the page body itself is the same light grey, so a section with
 * no background of its own read as grey too and the alternation was lost. */
.cc-lp-section {
	padding-block: 96px;
	background: var( --theme-palette-color-9, #FFFFFF );
}

.cc-lp-section--alt {
	background: var( --cc-bg-alt );
}

.cc-lp-center {
	align-items: center !important;
}

/* ---- Hero: heading + lead/CTA, then a full-width photo underneath ---- */

.cc-lp-hero__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 64px;
	align-items: end;
	padding-block: 96px 32px;
}

.cc-lp-hero__title {
	/* Scales with the width (60px from ~1430px up) so the text row stays
	 * short enough to leave the photo room in the first screen. */
	font-size: clamp( 38px, 4.2vw, 60px );
	font-weight: 300;
	line-height: 1.3;
	margin: 0;
}

.cc-lp-hero__title em {
	font-style: italic;
	color: var( --cc-accent );
}

.cc-lp-hero__lead {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
}

/* Above the fold: text row + photo share exactly one screen (viewport minus
 * the in-flow header — --cc-header-flow, kept current by nav.js). The text
 * row is never squeezed or clipped (it keeps its natural height, with 96px
 * of space above it on desktop / 64px on mobile); the photo is the flexible
 * part and fills whatever is left, never below a sensible floor — on a very
 * short or narrow screen the page simply runs a little past the fold rather
 * than cutting text. */
.cc-lp-hero {
	display: flex;
	flex-direction: column;
	min-height: calc( 100dvh - var( --cc-header-flow, 76px ) );
}

.cc-lp-hero__media {
	position: relative;
	flex: 1 1 0;
	min-height: 240px;
	overflow: hidden;
}

/* Absolutely positioned so the photo's own intrinsic ratio can't feed back
 * into the flex-basis and size the block to the picture instead. */
.cc-lp-hero__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Generic primary button (matches the site's dark CTA convention,
 * e.g. the old "Carregar mais imóveis" button) ---- */

.cc-lp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding-inline: 24px;
	background: var( --cc-ink );
	color: var( --cc-bg-alt );
	border-radius: 6px;
	font-family: var( --cc-font );
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) {
	.cc-lp-btn:hover {
		background: #000;
	}
}

.cc-lp-btn svg {
	flex: none;
	width: 16px;
	height: 16px;
}

/* ---- Two-column text sections (intro, "o que precisa de saber") ---- */

.cc-lp-cols {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 64px;
	align-items: start;
}

.cc-lp-cols h2 {
	margin: 0 0 12px;
}

.cc-lp-cols p {
	margin: 0 0 12px;
	line-height: 1.6;
}

.cc-lp-cols p:last-child {
	margin-bottom: 0;
}

.cc-lp-cols img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

/* ---- Intro section uses the design's warmer near-black ink instead of
 * the site's default --cc-ink, matching assets/css/imovel.css's own
 * `--imv-warm-ink` precedent for the same colour. ---- */

.cc-lp-intro h2,
.cc-lp-intro .cc-lp-cols p,
.cc-lp-intro .cc-lp-numbered__item h4,
.cc-lp-intro .cc-lp-numbered__item p {
	color: var( --cc-ink-warm );
}

/* ---- "01 / 02 / 03…" numbered info blocks — a flexible-length repeater
 * (inc/pods-bootstrap/06-cpt-lp-local.php's `blocos_numerados`), so this
 * can't assume a fixed column count: `auto-fit` gives 2 items 2 equal
 * columns, 4 items 4, and wraps whatever doesn't fit a min width of 220px
 * onto a new row on its own, however many there are. ---- */

.cc-lp-numbered {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 96px;
	margin-top: 48px;
}

.cc-lp-numbered__item {
	padding-top: 32px;
	border-top: 1px solid var( --cc-border );
}

.cc-lp-numbered__item h3 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 400;
	color: var( --cc-accent );
}

.cc-lp-numbered__item h4 {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 400;
}

.cc-lp-numbered__item p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* ---- Section heading row shared by "Imóveis em destaque" and the FAQ
 * heading half — a plain heading (+ optional "ver todos" link), hand-typed
 * next to the [cc_lp_destaques]/[cc_faqs] shortcode rather than built by
 * either shortcode itself (same split as [cc_imoveis_destaque]). ---- */

.cc-lp-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.cc-lp-section__head h2 {
	margin: 0 0 4px;
}

.cc-lp-section__head p {
	margin: 0;
}

/* Same underlined link-button as the Greenshift "Ver todos…" links
 * (a 1px rule 8px under the text — see style.css). */
.cc-lp-section__head a {
	display: inline-block;
	padding-block: 8px;
	border-bottom: 1px solid currentColor;
	color: var( --cc-ink );
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 200ms ease;
}

@media (hover: hover) {
	.cc-lp-section__head a:hover {
		color: var( --cc-accent );
	}
}

/* ---- FAQ: eyebrow + heading on one side, the [cc_faqs] accordion on the
 * other, over a soft decorative background — a theme asset (assets/img/),
 * not a media-library upload, since it's fixed page chrome rather than
 * per-page editorial content. ---- */

.cc-lp-faq {
	position: relative;
	background-image: url( '../img/bg-faq.png' );
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: contain;
}

.cc-lp-faq__eyebrow {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --cc-accent );
}

.cc-lp-faq h2 {
	color: var( --cc-ink-warm );
}

/* The number+heading pair and .accordion-content paragraph spacing are
 * generic, shared with any other [cc_page_accordion] accordion — see
 * `.accordion-title__group` / `.accordion-content p` in accordion.css.
 * Only the colour differs here from that shared component's own default
 * (--cc-ink-warm rather than its hardcoded #333538); specificity still
 * lets its active-item accent colour win over this. */

.cc-lp-faq .accordion-title__group h3,
.cc-lp-faq .accordion-title__group h4,
.cc-lp-faq .accordion-content p {
	color: var( --cc-ink-warm );
}

@media ( max-width: 900px ) {
	.cc-lp-hero__row,
	.cc-lp-cols {
		grid-template-columns: 1fr;
	}

	/* Not "hero fills the screen" here: the photo got whatever height the
	 * text left, so the LPs with a short intro (Investir em Portugal /
	 * Lisboa) had a very long one. Same proportion as the ficha's mobile
	 * hero instead (imovel.css): ≈ 425 × 500, at most 65% of the screen. */
	.cc-lp-hero {
		min-height: 0;
	}

	/* Stacked on mobile: the 64px column gap read as a section break
	 * between the title and its own lead text (and between the intro's two
	 * paragraphs); the design keeps them close together. */
	.cc-lp-hero__row {
		gap: 24px;
		padding-block: 64px 32px;
	}

	.cc-lp-intro .cc-lp-cols {
		gap: 16px;
	}

	.cc-lp-hero__media {
		flex: none;
		height: min( 118vw, 65dvh );
		min-height: 200px;
	}

	.cc-lp-hero__title,
	.cc-lp-cols h2 {
		font-size: 30px;
		line-height: 1.4;
	}

	.cc-lp-numbered {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cc-lp-faq {
		background-image: none;
	}

	.cc-lp-section {
		padding-block: 64px;
	}
}