/* Områden — see modules/nynasbo-omraden.php. Values are www.nynasbo.se's, measured 2026-10-26. */

/* ------------------------------------------------------------------ Single: Fastighet */

/* The body copy: live's property template has plain 22px h2s and 11px paragraph margins,
   not the page template's underlined headings, so the page rules are reset here. */
.elementor-element.elementor-element-fastighet-innehall {
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 15px;
	line-height: 22.5px;
	color: #262626;
}
.elementor-element.elementor-element-fastighet-innehall h2,
.elementor-element.elementor-element-fastighet-innehall h2:first-child {
	display: block;
	margin: 0 0 calc(var(--nynasbo-copy-rem, 11px) / 2);
	padding: 0;
	border: 0;
	font-size: calc(var(--nynasbo-copy-rem, 11px) * 2); /* 2rem on live: 22px on a desktop, 16px on a phone */
	font-weight: 500;
	line-height: 1.2;
	color: #262626;
}
.elementor-element.elementor-element-fastighet-innehall h2::after {
	content: none;
	display: none;
}
.elementor-element.elementor-element-fastighet-innehall p {
	margin: 0 0 11px;
	font-size: 15px;
	line-height: 22.5px;
}
.elementor-element.elementor-element-fastighet-innehall .gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px 11px;
}
.elementor-element.elementor-element-fastighet-innehall .gallery-item {
	width: 33.333%;
	margin: 0 0 11px;
	padding: 0 5px;
}
.elementor-element.elementor-element-fastighet-innehall .gallery-icon,
.elementor-element.elementor-element-fastighet-innehall .gallery-icon a {
	display: block;
	width: 100%;
}
.elementor-element.elementor-element-fastighet-innehall .gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}
.elementor-element.elementor-element-fastighet-innehall .gallery-caption {
	display: none;
}

.omr-section__title {
	margin: 0 0 22.5px;
	padding: 0 0 18px;
	border-bottom: 1px dashed #DDDDDD;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 21.6px;
	color: #262626;
}
.omr-section__title::after {
	content: none;
}

.omr-avstand {
	font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 22.5px;
	color: #262626;
}
.omr-avstand__item {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
.omr-avstand__data {
	font-weight: 700;
}

.omr-ansvarig__wrap {
	display: flex;
	align-items: flex-start;
	text-align: center;
}
.omr-ansvarig__avatar {
	flex: 0 0 auto;
	max-width: 50%;
	padding-left: 3px;
}
.omr-ansvarig__avatar img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 50%; /* live: the full portrait, rounded into an oval */
}
.omr-ansvarig__info {
	flex: 1 1 auto;
	padding-left: 22px;
	font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
	font-size: 11px;
	line-height: 16.5px;
}
.omr-ansvarig .omr-ansvarig__name {
	margin: 0;
	padding: 0;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 13.75px;
	font-weight: 500;
	line-height: 16.5px;
	color: #262626;
}
.omr-ansvarig__name::after {
	content: none;
}
/* Live prints a "Läs mer" link in the name and hides it. */
.omr-ansvarig__name a {
	display: none;
}
.omr-ansvarig__desc {
	margin: 16.5px 0;
	color: #262626;
}

/* Live on a tablet (768–1024px): the portrait above the text, centred, on the theme's 10px root. */
@media (min-width: 768px) and (max-width: 1024px) {
	.omr-ansvarig__wrap {
		flex-direction: column;
		align-items: center;
	}
	.omr-ansvarig__avatar {
		max-width: 100%;
		padding-left: 0;
	}
	.omr-ansvarig__info {
		padding: 0 0 0 20px;
	}
	.omr-ansvarig .omr-ansvarig__name {
		font-size: 12.5px;
		line-height: 15px;
	}
	.omr-ansvarig__desc {
		margin: 15px 0;
		font-size: 10px;
		line-height: 15px;
	}
}

@media (max-width: 767px) {
	/* Live on a phone: two gallery columns, and the theme's 8px root under the staff block. */
	.elementor-element.elementor-element-fastighet-innehall .gallery .gallery-item {
		margin-bottom: 9px;
	}
	.omr-ansvarig .omr-ansvarig__name {
		margin-top: 16px;
		font-size: 10px;
		line-height: 12px;
	}
	.elementor-element.elementor-element-fastighet-innehall p {
		margin-bottom: 9.5px;
	}
	.omr-ansvarig__desc {
		margin: 12px 0 0;
		font-size: 8px;
		line-height: 12px;
	}
	.omr-ansvarig__info {
		padding: 0 16px;
	}
	.omr-ansvarig__wrap {
		flex-direction: column;
		align-items: center;
	}
	.omr-ansvarig__avatar {
		max-width: 100%;
		padding-left: 0;
	}
}

/* Below 480px live's theme stacks its half-width items: two gallery columns and one distance per line. */
@media (max-width: 479px) {
	.elementor-element.elementor-element-fastighet-innehall .gallery .gallery-item {
		width: 50%;
	}
	.omr-avstand__item {
		width: 100%;
	}
}

/* Related properties between 480 and 767px: two across, as the news archive (nynasbo.css). */
@media (min-width: 480px) and (max-width: 767px) {
	.elementor-element-b6a1c03 .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
		row-gap: 40px;
	}
}

/* The address line on a related card: street, then the ort as a link. */
.e-paragraph-base[data-id="relaterad-adress"] > span > span + span {
	margin-left: 7px;
}
.e-paragraph-base[data-id="relaterad-adress"] a {
	color: #0B5A9C;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ Archive cards
   The heading widget's style reaches the h5, not its link; live's link is the theme's blue. */
.e-heading-base:is([data-id="fastighet-arkiv-title"], [data-id="fastighet-ort-title"]) > a {
	color: #0B5A9C;
	text-decoration: underline;
}
.e-heading-base[data-id="personal-title"] > a {
	color: #262626;
	text-decoration: none;
}

/* System-font lines on the cards: an atomic font-family takes one family name, not a stack. */
.e-paragraph-base:is([data-id="relaterad-adress"], [data-id="personal-beskrivning"]) {
	font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Live's theme pagination prints no arrow where there is no page to go to. */
.elementor-element:is(.elementor-element-b6a1c01, .elementor-element-b6a1c02) .elementor-pagination span.page-numbers:is(.prev, .next) {
	display: none;
}

/* ------------------------------------------------------------------ Area carousels
   prod's snippet "Karusell Våra Områden", on cards printed by [nynasbo_omradeskarusell]. */

.city-carousel-block {
	margin: 34px 0 0;
}
.city-carousel-block h1,
.city-carousel-block h1:first-child {
	margin: 0;
}
/* The page copy's link and image rules do not reach into the cards. */
.city-carousel-block .cc-item a {
	display: inline;
	color: inherit;
}
.city-carousel-block .cc-item .cc-image {
	display: block;
}
.city-carousel-block .cc-item img {
	vertical-align: top;
}
.city-carousel-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 4px 0 10px;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}
.city-carousel-viewport.is-dragging {
	cursor: grabbing;
}
.city-carousel-viewport.is-dragging a {
	pointer-events: none;
}
.city-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 16px;
	width: max-content;
	will-change: transform;
}
.cc-item {
	display: flex;
	flex-direction: column;
	flex: 0 0 clamp(260px, 29vw, 360px);
	width: clamp(260px, 29vw, 360px);
	overflow: hidden;
	border: 1px solid rgba(9, 34, 51, .10);
	border-radius: 14px;
	background: #D1E3E8;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .10);
	text-align: center;
	transition: transform .08s ease, box-shadow .15s ease;
}
.cc-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
}
.cc-image {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #D1E3E8;
}
.cc-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
}
.cc-content {
	padding: 12px;
}
.city-carousel-block .cc-title {
	display: block;
	max-width: none;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 18px;
	font-weight: 900;
	line-height: 22.5px;
	letter-spacing: .1px;
	color: #092233;
}
.city-carousel-block .cc-title::after {
	content: none;
}
.city-carousel-block .cc-title a {
	font-weight: 400;
	color: #092233;
	text-decoration: none;
}
/* Live: the title's 6px margin and the meta line's 8px do not collapse there. */
.cc-meta {
	padding-top: 8px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 800;
	line-height: 18.85px;
	color: #0F3C53;
}
.cc-meta a {
	color: inherit;
	text-decoration: none;
}
.cc-excerpt {
	margin-top: 22px;
	max-height: 75px;
	overflow: hidden;
}
.city-carousel-block .cc-excerpt p {
	margin: 0;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 15px;
	line-height: 24px;
	color: #262626;
}
@media (max-width: 980px) {
	.cc-item {
		flex-basis: clamp(240px, 44vw, 320px);
		width: clamp(240px, 44vw, 320px);
	}
}
@media (max-width: 640px) {
	.cc-item {
		flex-basis: 82vw;
		width: 82vw;
	}
}
/* Live on a phone: the ort heading at the theme's 8px root, 15px in; a tighter excerpt gap. */
@media (max-width: 767px) {
	.city-carousel-block h1,
	.city-carousel-block h1:first-child {
		padding: 0 15px;
		font-size: 20px;
		line-height: 24px;
	}
	.cc-excerpt {
		margin-top: 15px;
	}
}

/* Live: the last ort's WPBakery row ends 27px below its carousel (an empty element in prod's row). */
.city-carousel-block:last-child {
	padding-bottom: 27px;
}

/*
 * "Läs mer" on a related card (Loop Item: Fastighet / Relaterad), as live's theme button: an arrow
 * after the text (fontello e946, 1.2em, 1.44em from the text), and sizes in em that follow live's
 * steps — 14px above 1262px, 11px below; 1em top and bottom padding below 960px; the card's full
 * width with centred text below 768px. Measured 2026-10-27 at 390, 768, 1024 and 1280.
 */
.elementor .e-loop-item a[data-id="relaterad-knapp"] {
	/* flex, not inline-block: the markup's line break would otherwise leave a space before the arrow */
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	width: auto;
	padding: 0.7em 1.05em 0.65em 1.3em;
}
.elementor .e-loop-item a[data-id="relaterad-knapp"]::after {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1em;
	margin-left: 1.44em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / 0.62em no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / 0.62em no-repeat;
}
@media (max-width: 1262px) {
	.elementor .e-loop-item a[data-id="relaterad-knapp"] {
		font-size: 11px;
		line-height: 16px;
	}
}
@media (max-width: 959px) {
	.elementor .e-loop-item a[data-id="relaterad-knapp"] {
		padding-block: 1em;
	}
}
@media (max-width: 767px) {
	.elementor .e-loop-item a[data-id="relaterad-knapp"] {
		display: flex;
		justify-content: center;
		align-self: stretch;
		width: 100%;
		text-align: center;
		line-height: 17px;
	}
}