/*
 * Insights Übersicht — page-specific styles
 * Loaded only when page-insights-uebersicht.php is the active template.
 *
 * Sections live in: template-parts/sections/insights-uebersicht/
 *   - hero        (Frame 2461 — 71:3207)
 *   - filter      (Frame 1140 + Selected Tags) — AP-3 next compaction
 *   - grid        (3-column masonry — reuses .insight-card from main.css)
 *   - load-more   ("Mehr laden" button — Button Blue Outline variant)
 *
 * AP-3 populates this file section-by-section, with /compact between sections.
 */

/* =========================================================================
   Page wrapper — body is navy-900 globally; this page is white between the
   hero (own navy bg) and the footer (own navy bg).
   ========================================================================= */

.insights-uebersicht {
	background: var(--color-white);
	color: var(--color-navy-900);
}

/* =========================================================================
   Hero — Frame 2461 (71:3207, 1440×650)
   No auto-layout in Figma → children positioned absolutely.
   ========================================================================= */

.insights-hero {
	position: relative;
	width: 100%;
	height: 650px;
	background: var(--color-navy-900);
	overflow: hidden;
}

/* Inner stage at design width 1440 — children use absolute coords. */
.insights-hero__stage {
	position: relative;
	width: 100%;
	max-width: var(--design-width);
	height: 100%;
	margin: 0 auto;
}

/* Abstract circle composition — Frame 2462 (71:3209, 874×874 at left=283 top=-112).
   Wrapper is a clipped circle; inner ellipses are clipped to its bounds. */
.insights-hero-circle {
	position: absolute;
	left: 283px;
	top: -112px;
	width: 874px;
	height: 874px;
	border-radius: 500px;
	overflow: hidden;
}

.insights-hero-ellipse {
	position: absolute;
	display: block;
	border-radius: 50%;
}

/* Ellipse 71:3210 — 874×874 at (0,0), rgba(0,64,121,0.30) */
.insights-hero-ellipse--bg {
	left: 0;
	top: 0;
	width: 874px;
	height: 874px;
	background: rgba(0, 64, 121, 0.30);
}

/* Ellipse 71:3211 — 453×453 at (211,214), #006ed3 with opacity 0.10 */
.insights-hero-ellipse--mid {
	left: 211px;
	top: 214px;
	width: 453px;
	height: 453px;
	background: var(--color-blue-500);
	opacity: 0.10;
}

/* Ellipse 71:3212 — 835×835 at (389,345), rgba(255,255,255,0.07) */
.insights-hero-ellipse--glow {
	left: 389px;
	top: 345px;
	width: 835px;
	height: 835px;
	background: rgba(255, 255, 255, 0.07);
}

/* Headline "Projekte & Insights" — TEXT 71:3213 (1115×110 at left=60 top=220) */
.insights-hero-headline {
	position: absolute;
	left: 60px;
	top: 220px;
	width: 1115px;
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h1-insights);
	line-height: var(--lh-h1-insights);
	text-align: left;
}

/* Lede block — Frame 2480 (71:3214, 451×148 at left=60 top=442, vertical gap 36) */
.insights-hero-lede-block {
	position: absolute;
	left: 60px;
	top: 442px;
	width: 451px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* Accent line — LINE 71:3215 (100×0, 1px white border) */
.insights-hero-line {
	display: block;
	width: 100px;
	height: 1px;
	background: var(--color-white);
}

/* Lede text — TEXT 71:3216 (451×112, 20/28 white) */
.insights-hero-lede {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-l);
	line-height: var(--lh-body-l);
	text-align: left;
}

/* =========================================================================
   Filter — Filter row (71:3265) + Selected Tags row (71:3278)
   Wrapper sits below the hero with 80px top spacing. 150px side gutters.
   Filter row: 3 dropdowns @ 360×48, gap 30. Tags row: variable-width tags, gap 8.
   ========================================================================= */

.insights-filter-wrap {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 150px 0 150px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px; /* hero-end y=650 + 80 = 730 (filter top); 730+48 + 20 = 798 (tags top) */
}

/* --- Dropdown row --- */

.insights-filter {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
}

/* Wrapper owns the layout width (360 at desktop) so the panel can be
   absolutely positioned beneath the dropdown button. AP-5: dropdown
   becomes width:100% of the wrap. */
.insights-filter-dropdown-wrap {
	position: relative;
	width: 360px;
}

/* Dropdown — INSTANCE 71:3266 / 71:3267 / 71:3268 (360×48 each). */
.insights-filter-dropdown {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 48px;
	padding: 11px 12px 11px 16px;
	gap: 16px;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--color-navy-900);
	color: var(--color-navy-900);
	font: inherit;
	cursor: pointer;
	transition: var(--transition-default);
}

.insights-filter-dropdown:hover {
	/* Default 1px outline + emphasized 1px underline at the bottom edge */
	box-shadow:
		inset 0 0 0 1px var(--color-navy-900),
		inset 0 -2px 0 var(--color-navy-900);
}

.insights-filter-dropdown-label {
	flex: 1;
	margin: 0;
	text-align: left;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-filter-label);
	line-height: var(--lh-filter-label);
	color: var(--color-navy-900);
}

.insights-filter-dropdown-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	transition: transform 300ms ease-out;
}

/* Chevron rotates 180° while the panel is open — mirrors the nav-chevron
   pattern in main.css lines 365–379. */
.insights-filter-dropdown[aria-expanded="true"] .insights-filter-dropdown-icon {
	transform: rotate(180deg);
}

/* Open-state outline override: keep the bottom edge thickened while the
   panel is showing, so the chip + panel read as one continuous frame. */
.insights-filter-dropdown[aria-expanded="true"] {
	box-shadow:
		inset 0 0 0 1px var(--color-navy-900),
		inset 0 -2px 0 var(--color-navy-900);
}

.insights-filter-dropdown-panel {
	position: absolute;
	top: calc(100% - 1px); /* overlap the chip's bottom border by 1px */
	left: 0;
	width: 100%;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--color-white);
	border: 1px solid var(--color-navy-900);
	box-sizing: border-box;
	z-index: 10;
}

.insights-filter-dropdown-panel[hidden] {
	display: none;
}

.insights-filter-dropdown-option {
	padding: 12px 16px;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-filter-label);
	line-height: var(--lh-filter-label);
	color: var(--color-navy-900);
	cursor: pointer;
	transition: background-color 150ms ease-out;
}

.insights-filter-dropdown-option:hover,
.insights-filter-dropdown-option:focus,
.insights-filter-dropdown-option.is-selected {
	background: var(--color-gray-50);
	outline: none;
}

/* --- Selected tags row --- */

.insights-filter-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: fit-content; /* Frame 2506 in Figma is fit-content (532 wide); default <ul> would stretch */
}

.insights-filter-tags-item {
	display: flex;
}

/* Filter Tag — INSTANCE 71:3279 / 71:3280 / 71:3281. fit-content width, 42 tall. */
.insights-filter-tag {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 12px;
	gap: 8px;
	background: var(--color-gray-50);
	border: 0;
	color: var(--color-navy-900);
	font: inherit;
	cursor: pointer;
	transition: var(--transition-default);
}

.insights-filter-tag:hover {
	box-shadow: inset 0 -1px 0 var(--color-navy-900);
}

.insights-filter-tag-label {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-filter-tag);
	line-height: var(--lh-filter-tag);
	color: var(--color-navy-900);
}

.insights-filter-tag-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* =========================================================================
   Cards grid — 3 explicit columns of `.insight-card` instances.
   Cards: 360 wide, 5 variants (heights 399 case-study / 399 navy / 370 navy
   short / 428 blue / 221 teaser) — all reused from main.css lines 765–865.
   Wrapper sits 32px below the tags row (page-y=872), 150px side gutters.
   ========================================================================= */

.insights-grid-wrap {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px 150px 0 150px; /* tags-row bottom 840 + 32 = 872 (first card top) */
	box-sizing: border-box;
}

.insights-grid {
	display: flex;
	flex-direction: row;
	gap: 30px; /* column gap — matches home Projekte & Insights grid */
}

/* --- Insight Card Color Sequence (moved to main.css) --- */

.insights-col {
	display: flex;
	flex-direction: column;
	gap: 32px; /* row gap — matches home convention */
	width: 360px;
}

/* =========================================================================
   Mehr-laden button — INSTANCE 71:3262 (componentId 39:2288 = Button Blue Outline).
   Wrapper centers the 129×48 button horizontally below the grid with a 48px
   top gap (grid bottom 2415 + 48 = 2463 = button top in page coords).
   ========================================================================= */

.insights-load-more {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 48px 150px 100px 150px; /* Figma: button bottom y=2511, footer top y=2611 → 100px gap */
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

/* Button Blue Outline — NEW variant on top of `.btn` base in main.css.
   Default: white bg, navy text, navy 1px outline.
   Hover:   solid navy fill, white text. Transition is inherited from `.btn`. */
.btn-blue-outline {
	height: 48px;
	padding: 12px 24px;
	gap: 8px;
	color: var(--color-navy-900);
	background: var(--color-white);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--color-navy-900);
}

.btn-blue-outline:hover,
.btn-blue-outline:focus-visible {
	background: var(--color-navy-900);
	color: var(--color-white);
}

/* ==========================================================================
   PHASE AP-4 — RESPONSIVE
   Design source 1440. Mirrors the breakpoint set used by main.css for the
   home page, so this page collapses with the same rhythm as the rest of
   the site. Each step progressively restructures absolute layouts to flex.
     ≥ 1440  pixel-perfect (no overrides)
     1280–1439  shrink side gutters 150 → 60; absolute layouts retained
     1024–1279  hero → flex column; filter dropdowns flex; grid 3 → 2 cols
      768–1023  filter stacks vertically; grid 2 → 1 col; tighter gutters
       ≤ 767   mobile compact sizes; tags wrap
       ≤ 479   small mobile padding pass
   ========================================================================= */

/* --- ≤ 1439 — Small laptop ----------------------------------------------- */
/* Side gutters shrink so 1140-content (filter row) still fits with margin. */
@media (max-width: 1439px) {
	.insights-filter-wrap { padding: 80px 60px 0 60px; }
	.insights-grid-wrap   { padding: 32px 60px 0 60px; }
	.insights-load-more   { padding: 48px 60px 100px 60px; }
}

/* --- ≤ 1279 — Laptop / tablet landscape ---------------------------------- */
/* Hero loses its absolute positioning; circle becomes a faded backdrop.
   Filter dropdowns share row width via flex. Grid drops to 2 columns. */
@media (max-width: 1279px) {
	/* --- Hero — switch to flex flow --- */
	.insights-hero {
		height: auto;
		min-height: 480px;
		padding: 120px 60px 80px;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}
	.insights-hero-circle {
		left: auto;
		right: -200px;
		top: -160px;
		width: clamp(560px, 70vw, 874px);
		height: clamp(560px, 70vw, 874px);
		opacity: 0.7;
		z-index: 0;
	}
	.insights-hero-headline,
	.insights-hero-lede-block {
		position: relative;
		left: auto;
		top: auto;
		z-index: 1;
	}
	.insights-hero-headline {
		width: 100%;
		max-width: 1115px;
		font-size: clamp(72px, 9vw, 110px);
		line-height: 1.05;
	}
	.insights-hero-lede-block {
		width: 100%;
		max-width: 451px;
	}

	/* --- Filter — dropdowns flex to share the row --- */
	.insights-filter-dropdown-wrap {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	/* --- Grid — 3 cols → 2 cols --- */
	.insights-grid {
		flex-wrap: wrap;
	}
	.insights-col {
		flex: 0 1 calc(50% - 15px);
		min-width: 0;
		width: auto;
	}
	.insight-card { width: 100%; }
}

/* --- ≤ 1023 — Tablet portrait -------------------------------------------- */
/* Filter row stacks vertically. Grid drops to a single column.
   Side gutters drop to 40px to match the home build. */
@media (max-width: 1023px) {
	.insights-hero {
		padding: 100px 40px 64px;
	}
	.insights-hero-headline {
		font-size: clamp(56px, 8vw, 90px);
	}
	.insights-hero-circle {
		right: -240px;
		top: -200px;
		opacity: 0.55;
	}

	.insights-filter-wrap { padding: 64px 40px 0 40px; }
	.insights-grid-wrap   { padding: 32px 40px 0 40px; }
	.insights-load-more   { padding: 48px 40px 80px 40px; }

	.insights-filter {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.insights-filter-dropdown-wrap {
		width: 100%;
	}

	.insights-col {
		flex: 1 1 100%;
	}
}

/* --- ≤ 767 — Mobile ------------------------------------------------------ */
/* Hero compacts; tags wrap onto multiple lines if narrow.
   Filter side gutters tighten further; grid row gap reduces. */
@media (max-width: 767px) {
	.insights-hero {
		padding: 100px 24px 80px;     /* more breathing room above headline + below lede */
		gap: 36px;
		min-height: 480px;            /* keep hero substantial — was collapsing to ~335 */
	}
	/* Circle backdrop pulled in closer to viewport so it reads as a deliberate
	   accent rather than a barely-visible sliver. */
	.insights-hero-circle {
		right: -200px;
		top: -160px;
		width: clamp(420px, 90vw, 560px);
		height: clamp(420px, 90vw, 560px);
		opacity: 0.55;
	}
	.insights-hero-headline {
		font-size: clamp(44px, 12vw, 72px);
		line-height: 1.1;
	}
	.insights-hero-lede {
		font-size: 18px;
		line-height: 1.4;
	}
	.insights-hero-lede-block {
		gap: 24px;
	}

	.insights-filter-wrap { padding: 48px 24px 0 24px; gap: 16px; }
	.insights-filter-tags {
		flex-wrap: wrap;
		width: auto;
	}

	.insights-grid-wrap   { padding: 32px 24px 0 24px; }
	.insights-grid        { gap: 24px; }
	.insights-col         { gap: 24px; }

	.insights-load-more   { padding: 40px 24px 64px 24px; }
}

/* --- ≤ 479 — Small mobile ------------------------------------------------ */
@media (max-width: 479px) {
	.insights-hero {
		padding: 88px 20px 64px;
		gap: 32px;
		min-height: 440px;
	}
	.insights-hero-headline { font-size: 40px; line-height: 1.1; }
	.insights-hero-circle {
		right: -160px;
		top: -120px;
		width: 420px;
		height: 420px;
		opacity: 0.5;
	}

	.insights-filter-wrap { padding: 40px 20px 0 20px; }
	.insights-grid-wrap   { padding: 32px 20px 0 20px; }
	.insights-load-more   { padding: 32px 20px 48px 20px; }

	/* Dropdown padding shrinks slightly so the chevron doesn't crowd label. */
	.insights-filter-dropdown {
		padding: 11px 12px;
		gap: 12px;
	}
}