/* Start page (overview.html), upper part: hero with search card and folded corner (offer
   cards and provider block: start-content.css). Target design: boards "Startseite" and "Startseite-Handy" in the theme artifact
   (docs/specs/ui-modernisierung-gestaltung.md, ADR 0003). Mobile first; desktop from 992 px.
   Hooks kept for overview.js and Selenium: #ov-slider/.carousel-item, .overview-col/#col-*,
   #colField, #colVicinity, #colHomeType, #colAdType(.hidden), #btnSearch, .search-count. */

/* ---------- Hero ---------- */

.hwa-hero {
	--fold: 110px; /* edge of the folded corner */
	--fold-open: 135px; /* edge when it opens further on hover */
	--fold-radius: 20px;
	position: relative;
	margin: 1rem 1rem 0;
}

.hwa-hero-photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 170px;
	overflow: hidden;
	border-radius: var(--fold-radius);
	z-index: 0; /* own stacking context: the active carousel item (z-index 1) stays below the panel */
}

.hwa-hero-photo .carousel-item {
	height: 100%;
	background-size: cover;
}

/* Crops as in the target design; the services photo is already cut to the centre. */
.hwa-photo-rent { background-image: url('/hwa/images/start/mieten-640-8884f480e33cf8008c61d7efcbd21738.jpg'); background-position: 40% 30%; }
.hwa-photo-travel { background-image: url('/hwa/images/start/reisen-640-06ae10c79f6f8898e9e3a067f5252917.jpg'); background-position: 85% 40%; }
.hwa-photo-exchange { background-image: url('/hwa/images/start/tauschen-640-537caca0a5986733fc5f5b964c9b18a4.jpg'); background-position: 45% 45%; }
.hwa-photo-services { background-image: url('/hwa/images/start/dienstleistungen-640-325bc54b1da7aff99921327601814807.jpg'); background-position: center; }

/* The gradient panel leaves the top right corner open, so the photo shows through. */
.hwa-hero-panel {
	position: absolute;
	inset: 0;
	border-radius: var(--fold-radius);
	background: linear-gradient(170deg, var(--hwa-hero-from) 0%, var(--hwa-hero-to) 100%);
	clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}

/* The turned-down flap; its free corner has the panel radius (user, 2026-10-12). */
.hwa-hero-fold {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	width: 110px;
	height: 110px;
	transform-origin: top right;
	filter: drop-shadow(-4px 6px 8px var(--hwa-fold-shadow));
}

.hwa-hero-fold::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--hwa-fold-from) 0%, var(--hwa-fold-mid) 60%, var(--hwa-fold-to) 100%);
	clip-path: path('M0 0 L110 110 L20 110 Q0 110 0 90 Z');
}

.hwa-hero-content {
	position: relative;
	z-index: 1;
	padding: 1.75rem 1.25rem 1.25rem;
}

.hwa-kicker {
	/* The corner square (photo and flap) sits at the top right: the kicker stays left of it and
	   is at least as tall, so the heading starts below it. Sized for the opened corner, so the
	   hover movement never shifts the search card or covers text. */
	min-height: calc(var(--fold-open) - 1.75rem);
	margin: 0 calc(var(--fold-open) - 0.75rem) 0.5rem 0;
	color: var(--hwa-primary);
	font-size: var(--hwa-fs-small);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.hwa-hero-title {
	margin: 0;
	font-size: clamp(1.5rem, 6.5vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance; /* on phones the first line breaks in two even halves, no lone last word */
}

.hwa-hero-title span {
	display: block; /* the heading always breaks after the first line */
}

.hwa-hero-lead {
	margin: 0.75rem 0 0;
	color: var(--hwa-muted);
	font-size: var(--hwa-fs-body);
}

/* ---------- Search card ---------- */

.hwa-search {
	margin-top: 1.25rem;
	padding: 0.875rem;
	background: var(--hwa-card);
	border-radius: var(--hwa-radius-lg);
	box-shadow: var(--hwa-shadow-md);
}

/* bootstrap-add-clear writes top: 8px inline (sized for the old, lower fields); !important is the
   only way past an inline style – centres the clear icon whatever the field height */
.hwa-search .add-clear-x {
	top: 50% !important;
	transform: translateY(-50%);
}

.hwa-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 0.75rem;
	padding: 4px;
	background: var(--hwa-bg);
	border-radius: var(--hwa-radius);
}

.hwa-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 2.75rem;
	padding: 0 0.25rem;
	color: var(--hwa-muted);
	background: transparent;
	border: 0;
	border-radius: 9px;
	font-size: 0.8125rem; /* "Mieten & Kaufen" on one line at 390 px */
	font-weight: 600;
	line-height: 1.2;
}

.hwa-tab svg {
	flex: none;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hwa-tab:hover:not(.active) {
	color: var(--hwa-text);
	background: var(--hwa-primary-soft);
}

.hwa-tab.active {
	color: var(--hwa-primary-ink);
	background: var(--hwa-primary);
	box-shadow: var(--hwa-shadow-sm);
}

.hwa-tab:focus-visible {
	outline: none;
	box-shadow: var(--hwa-focus-ring);
}

.hwa-search-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"where where"
		"what type"
		"vicinity btn";
	gap: 0.75rem 0.5rem;
}

/* Travel and services have no offer type: overview.js hides #colAdType. */
.hwa-search-grid:has(#colAdType.hidden) {
	grid-template-areas:
		"where where"
		"what what"
		"vicinity btn";
}

.hwa-field:has(> #colAdType.hidden) {
	display: none;
}

.hwa-field-where { grid-area: where; }
.hwa-field-vicinity { grid-area: vicinity; }
.hwa-field-what { grid-area: what; }
.hwa-field-type { grid-area: type; }
.hwa-field-btn { grid-area: btn; align-self: end; }

.hwa-label {
	display: block;
	margin-bottom: 4px;
	color: var(--hwa-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.hwa-search .form-control,
.hwa-search .select2-container .select2-selection--single {
	height: 2.875rem;
}

/* select2.css sizes the text for 2.3rem fields (line-height 35px); centre it in the taller ones. */
.hwa-search .select2-container .select2-selection--single {
	padding-top: 0;
	padding-bottom: 0;
}

.hwa-search .select2-container .select2-selection--single .select2-selection__rendered {
	display: flex;
	align-items: center;
	height: 100%;
	line-height: 1.5;
}

/* select2 writes its measured width inline ("width: auto"); the grid cell decides here. */
.hwa-search .select2-container {
	width: 100% !important;
}

.hwa-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 2.875rem;
	font-weight: 600;
}

/* ---------- Desktop ---------- */

@media (min-width: 992px) {
	.hwa-hero {
		--fold: 230px;
		--fold-radius: 24px;
		margin: 2rem 3rem 0;
	}

	.hwa-hero-photo {
		width: 420px;
		height: 330px;
	}

	.hwa-photo-rent { background-image: url('/hwa/images/start/mieten-4fd5d3aac1c384809135843c8e678fc1.jpg'); }
	.hwa-photo-travel { background-image: url('/hwa/images/start/reisen-fbeb5e80ca6ed52deaf80610b5c42fb5.jpg'); }
	.hwa-photo-exchange { background-image: url('/hwa/images/start/tauschen-5de24e8cc0cb0c1e03e9a9c7e8acfa93.jpg'); }
	.hwa-photo-services { background-image: url('/hwa/images/start/dienstleistungen-6eca4f36e6012775e4d8bb8d020137b1.jpg'); }

	.hwa-hero-fold {
		width: 230px;
		height: 230px;
		filter: drop-shadow(-6px 8px 10px var(--hwa-fold-shadow));
	}

	.hwa-hero-fold::before {
		clip-path: path('M0 0 L230 230 L24 230 Q0 230 0 206 Z');
	}

	.hwa-hero-content {
		max-width: calc(42.5rem + 7rem);
		padding: 3.5rem;
	}

	.hwa-kicker {
		min-height: 0; /* the content column ends left of the corner */
		margin: 0 0 0.75rem;
		font-size: var(--hwa-fs-body);
	}

	.hwa-hero-title {
		padding-right: 0;
		font-size: 2.875rem;
		line-height: 1.12;
		letter-spacing: -0.026em;
	}

	.hwa-hero-lead {
		margin-top: 1rem;
		font-size: 1.1875rem;
	}

	.hwa-search {
		margin-top: 1.75rem;
		padding: 1.25rem;
	}

	.hwa-tabs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-bottom: 1rem;
	}

	.hwa-tab {
		height: 2.625rem;
		font-size: var(--hwa-fs-small);
	}

	.hwa-search-grid {
		grid-template-columns: minmax(0, 1fr) 9.5rem 9.5rem;
		grid-template-areas:
			"where where vicinity"
			"what type btn";
		gap: 1rem 0.625rem;
	}

	.hwa-search-grid:has(#colAdType.hidden) {
		grid-template-areas:
			"where where vicinity"
			"what what btn";
	}
}

/* ---------- Folded corner opens a little further on pointer devices ---------- */

@media (hover: hover) {
	.hwa-hero:has(.hwa-hero-fold:hover) {
		--fold: var(--fold-open);
	}

	.hwa-hero:has(.hwa-hero-fold:hover) .hwa-hero-fold {
		transform: scale(1.227); /* 135 / 110 */
	}
}

@media (hover: hover) and (min-width: 992px) {
	.hwa-hero:has(.hwa-hero-fold:hover) {
		--fold: 282px;
	}

	.hwa-hero:has(.hwa-hero-fold:hover) .hwa-hero-fold {
		transform: scale(1.226);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hwa-hero-panel,
	.hwa-hero-fold {
		transition: clip-path 0.35s ease, transform 0.35s ease;
	}
}