/**
 * Casas Choice — "Ficha do Imóvel": what the ficha adds to the gallery's
 * lightbox (template-parts/imovel/ficha.php, assets/js/imovel-ficha.js), and
 * the A4 pages in it.
 *
 * The pages (`.imv-fp`) are laid out at real A4 size, in mm and pt, and the
 * same rules serve the preview (scaled down by --imv-fp-scale), the PDF
 * (each page captured unscaled, see `.imv-fp-capture`) and print. Their
 * selectors never depend on the lightbox around them, for that reason.
 * Plain hex colours only: the PDF capture can't read color-mix()/oklch().
 */

/* ---------------------------------------------------------------------- */
/* Lightbox                                                                */
/* ---------------------------------------------------------------------- */

/* The photo gallery's lightbox (.imv-lightbox, imovel.css): backdrop, close
 * button, counter and prev/next as they are there. Only the page scaling
 * and the Imprimir / Descarregar buttons are the ficha's own. */

.imv-ficha {
	--imv-fp-scale: .5;
}

/* The page, as big as the slider allows (imovel-ficha.js sets
 * --imv-fp-scale from the slider's size). */
.imv-fp-frame {
	flex: none;
	width: calc(210mm * var(--imv-fp-scale));
	height: calc(297mm * var(--imv-fp-scale));
	overflow: hidden;
	background: #fff;
}

.imv-fp-frame > .imv-fp {
	transform: scale(var(--imv-fp-scale));
	transform-origin: 0 0;
}

/* The counter stays on the left, as in the gallery; the actions go on the
 * right, next to prev/next. */
.imv-ficha__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	margin-right: 24px;
}

/* Same outline as the lightbox's round buttons: Imprimir round as well,
 * Descarregar a pill with its label. */
.imv-ficha__print,
.imv-ficha__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 23px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.imv-ficha__print {
	flex: none;
	width: 46px;
}

.imv-ficha__download {
	padding-inline: 20px;
}

.imv-ficha__print svg,
.imv-ficha__download svg {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
}

@media (hover: hover) {
	.imv-ficha__print:hover,
	.imv-ficha__download:hover {
		background: rgba(255, 255, 255, .12);
		color: #fff;
	}
}

.imv-ficha__download[aria-busy="true"] {
	cursor: progress;
	opacity: .6;
}

/* One page only: nothing to page through. */
.imv-ficha.is-single .imv-lightbox__counter,
.imv-ficha.is-single .imv-lightbox__foot-nav {
	display: none;
}

.imv-ficha.is-single .imv-ficha__actions {
	margin-right: 0;
}

/* Phones: counter + prev/next on one row, the actions on a full-width row
 * under it. */
@media (max-width: 767px) {
	.imv-ficha .imv-lightbox__foot {
		flex-wrap: wrap;
		row-gap: 16px;
	}

	.imv-ficha__actions {
		order: 3;
		width: 100%;
		margin: 0;
	}

	.imv-ficha__download {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------- */
/* A4 pages                                                                */
/* ---------------------------------------------------------------------- */

/* --k: the size of the type and the space around it, lowered a little at a
 * time by imovel-ficha.js while a page's content doesn't fit (after the
 * photo has shrunk to its minimum). */
.imv-fp {
	--k: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 210mm;
	height: 297mm;
	padding: 0 8mm 9mm;
	overflow: hidden;
	background: #fff;
	color: #333538;
	font-family: var(--cc-font, 'Montserrat', sans-serif);
	font-size: calc(8pt * var(--k));
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.imv-fp *,
.imv-fp *::before,
.imv-fp *::after {
	box-sizing: border-box;
}

.imv-fp p,
.imv-fp ul,
.imv-fp ol,
.imv-fp dl,
.imv-fp dd,
.imv-fp h3,
.imv-fp h4 {
	margin: 0;
	padding: 0;
}

.imv-fp a {
	color: inherit;
	text-decoration: none;
}

.imv-fp__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24mm;
}

.imv-fp .imv-fp__logo {
	display: block;
	width: auto;
	max-width: 50mm;
	height: 11mm;
}

/* The photo gives way first when the page is full: from its height in the
 * mockup down to a minimum. */
.imv-fp__photo {
	flex: 0 1 93mm;
	min-height: 55mm;
	overflow: hidden;
	background: #F0F0F0;
}

.imv-fp--capa .imv-fp__photo {
	flex-basis: 128mm;
	min-height: 88mm;
}

.imv-fp--plantas .imv-fp__photo {
	flex-basis: 76mm;
	min-height: 45mm;
}

/* `.imv-fp` first: these outrank the gallery lightbox's own image rule. */
.imv-fp .imv-fp__photo img,
.imv-fp .imv-fp__plan img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imv-fp__h1,
.imv-fp__h2 {
	font-family: inherit;
	font-size: 17pt;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;
	color: #333538;
}

.imv-fp .imv-fp__h2 {
	flex: none;
	margin-top: 7mm;
}

.imv-fp.imv-fp--no-photo .imv-fp__h2 {
	margin-top: 0;
}

.imv-fp__h4 {
	font-family: inherit;
	font-size: calc(9pt * var(--k));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: #333538;
}

/* Bullets drawn as a dot, not list markers: the PDF capture doesn't draw
 * list markers. */
.imv-fp__list,
.imv-fp__desc ul,
.imv-fp__desc ol {
	list-style: none;
}

.imv-fp__list li,
.imv-fp__desc li {
	position: relative;
	padding-left: 4mm;
}

.imv-fp__list li::before,
.imv-fp__desc li::before {
	content: "";
	position: absolute;
	left: .8mm;
	top: .62em;
	width: 1.1mm;
	height: 1.1mm;
	border-radius: 50%;
	background: #333538;
}

/* Cover: title + specs under the photo. (Margins on the elements reset
 * above carry `.imv-fp` too, to outrank that reset.) */
.imv-fp__intro {
	flex: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8mm;
	margin-top: 7mm;
}

.imv-fp__id {
	flex: 1 1 auto;
	min-width: 0;
}

.imv-fp .imv-fp__sub {
	margin-top: 2mm;
	font-size: 8pt;
	color: #54565A;
}

.imv-fp__specs {
	flex: none;
	display: flex;
	gap: 6mm;
	max-width: 104mm;
	padding-top: 1mm;
}

.imv-fp__specs dt {
	font-size: 7pt;
	font-weight: 400;
	color: #54565A;
	white-space: nowrap;
}

.imv-fp .imv-fp__specs dd {
	margin-top: 2mm;
	font-size: 10pt;
	font-weight: 500;
	color: #333538;
	white-space: nowrap;
}

/* Cover: Destaques on the left, the description on the right, centred in
 * the space left above the footer. */
.imv-fp__body {
	flex: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 92mm;
	align-items: center;
	column-gap: 10mm;
	margin-block: auto;
	padding: 8mm 7mm 6mm;
}

.imv-fp__body--desc-only {
	display: block;
}

.imv-fp__body--desc-only .imv-fp__desc {
	column-count: 2;
	column-gap: 10mm;
}

.imv-fp__destaques .imv-fp__list {
	margin-top: calc(4mm * var(--k));
}

.imv-fp__destaques li {
	margin-top: calc(2.2mm * var(--k));
	font-size: calc(7.5pt * var(--k));
}

.imv-fp__desc {
	font-size: calc(8pt * var(--k));
	line-height: 1.4;
}

.imv-fp .imv-fp__desc > * + * {
	margin-top: calc(3mm * var(--k));
}

.imv-fp__desc li + li {
	margin-top: calc(.8mm * var(--k));
}

.imv-fp__desc strong,
.imv-fp__desc b {
	font-weight: 600;
}

/* Características: the attribute table in two columns, the lists in a
 * third (or the table in three, without lists). */
.imv-fp__grid {
	flex: none;
	display: grid;
	grid-template-columns: 62mm 80mm minmax(0, 1fr);
	align-items: start;
	margin-block: auto;
	padding: 9mm 0 6mm 8mm;
}

.imv-fp__grid--attrs-only {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.imv-fp__attrs > div + div {
	margin-top: calc(9mm * var(--k));
}

.imv-fp__attrs dt {
	font-size: calc(9pt * var(--k));
	font-weight: 500;
	line-height: 1.3;
	color: #333538;
}

.imv-fp .imv-fp__attrs dd {
	margin-top: calc(2.5mm * var(--k));
	font-size: calc(7.5pt * var(--k));
	color: #333538;
}

.imv-fp__char-group + .imv-fp__char-group {
	margin-top: calc(7mm * var(--k));
}

.imv-fp__chars .imv-fp__list {
	margin-top: calc(2mm * var(--k));
}

.imv-fp__chars li {
	margin-top: calc(2.2mm * var(--k));
	font-size: calc(7.5pt * var(--k));
}

/* Plantas: one or two plans, each as big as its half of the page allows. */
.imv-fp__plans {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 6mm;
	padding: 8mm 12mm 6mm;
}

.imv-fp__plan {
	flex: 1 1 0;
	min-height: 0;
}

.imv-fp .imv-fp__plan img {
	object-fit: contain;
}

/* Footer: contacts on the left, AMI on the right of the last page. */
.imv-fp__foot {
	flex: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8mm;
	margin-top: auto;
	padding-top: 4mm;
	font-size: 7.5pt;
	line-height: 1.6;
}

.imv-fp__contacts a {
	display: block;
	width: max-content;
}

.imv-fp__phone {
	font-weight: 600;
}

.imv-fp__legal {
	font-size: 7pt;
	text-align: right;
}

/* ---------------------------------------------------------------------- */
/* PDF capture and print                                                   */
/* ---------------------------------------------------------------------- */

/* Where imovel-ficha.js lays out each page, unscaled, to capture it for the
 * PDF: in the page's normal flow (the capture can't see a page that isn't
 * laid out) but under the lightbox, which covers the whole screen. */
.imv-fp-capture {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}

/* "Imprimir" (imovel-ficha.js): only the pages, one per sheet, at real
 * size — the A4 / no margin @page rule is added just for that print. */
@media print {
	html.imv-ficha-printing,
	html.imv-ficha-printing body {
		height: auto !important;
		overflow: visible !important;
		background: #fff !important;
	}

	html.imv-ficha-printing body > :not(.imv-ficha) {
		display: none !important;
	}

	html.imv-ficha-printing .imv-ficha {
		position: static !important;
		display: block !important;
		padding: 0 !important;
		background: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transition: none !important;
	}

	html.imv-ficha-printing .imv-ficha > :not(.imv-lightbox__stage),
	html.imv-ficha-printing .imv-ficha .imv-lightbox__foot {
		display: none !important;
	}

	html.imv-ficha-printing .imv-ficha .imv-lightbox__stage,
	html.imv-ficha-printing .imv-ficha__swiper,
	html.imv-ficha-printing .imv-ficha .swiper-wrapper,
	html.imv-ficha-printing .imv-ficha .swiper-slide,
	html.imv-ficha-printing .imv-fp-frame {
		display: block !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		transform: none !important;
	}

	html.imv-ficha-printing .imv-fp-frame > .imv-fp {
		height: 296.5mm;
		transform: none !important;
	}

	html.imv-ficha-printing .imv-ficha .swiper-slide:not(:last-child) .imv-fp {
		break-after: page;
	}
}