/* PHILOSOPHY — .db-philosophy   (index, about, jobs = 3)
   Head band with a bottom rule, then 3 columns divided by vertical rules. */
.db-philosophy__head { padding: 16px; border-bottom: 1px solid var(--line2); }
.db-philosophy__head h2 { font-size: clamp(1.75rem, 6vw, 5rem); text-align: center; line-height: 1.1; }
.db-philosophy .db-philosophy__grid { display: flex; flex-direction: column; gap: 20px; padding: 20px 0 40px; }
.db-philosophy__item { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.db-philosophy__item:last-child { border-bottom: none; padding-bottom: 0; }
.db-philosophy__item h3 { font-size: clamp(1.125rem, 3.5vw, 1.5rem); }
.db-philosophy__item p { font-size: 16px; line-height: 1.75; color: var(--muted); }
@media (min-width: 861px) {
	.db-philosophy__head { padding: 60px 0; }
	.db-philosophy__head h2 { font-size: 5rem; }
	.db-philosophy .db-philosophy__grid { flex-direction: row; gap: 0; padding: 60px 0 120px; }
	.db-philosophy__item { flex: 1; padding: 0 48px; border-bottom: none; border-left: 1px solid var(--line); justify-content: space-between; }
	.db-philosophy__item:first-child { padding-left: 0; border-left: none; }
	.db-philosophy__item:last-child { padding-right: 0; }
	.db-philosophy__item h3 { font-size: 1.5rem; }
}

/* --- variant: jobs  (.db-philosophy--jobs) --------------------------------
   Three prototype instances, three treatments. The base above is the homepage
   `.philosophy`; this is `.jb-philo`, which differs in five ways:

     head rule      kept at desktop        -> removed
     title          centred at all widths  -> left from 861px
     title clamp    1.75rem, 6vw, 5rem     -> 1.5rem, 8vw, 5rem
     item gap       12px, none at desktop  -> 8px -> 32px
     item rules     --line                 -> --line2
     name           natural height         -> min-height 2.6em at desktop

   `.ab-phil` (ueber-uns) is a third treatment again — sand background, a
   discrete divider element, 48px grid gap and an 861-1099.98 re-stack. It still
   needs its own variant; see the cross-page audit notes. */
.db-philosophy--jobs .db-philosophy__head { padding: 40px 0; }
.db-philosophy--jobs .db-philosophy__head h2 { font-size: clamp(1.5rem, 8vw, 5rem); }
.db-philosophy--jobs .db-philosophy__grid { gap: 24px; padding: 40px 0; }
/* Mobile draws a rule BETWEEN the three, not under the last one (368:5549 /
   368:5551 are separators between the instances, and there is none after the
   third). The base has that :last-child reset; the variant lost it by restating
   `border-bottom` at higher specificity. */
.db-philosophy--jobs .db-philosophy__item {
	gap: 8px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line2);
}
.db-philosophy--jobs .db-philosophy__item:last-child { border-bottom: none; padding-bottom: 0; }
.db-philosophy--jobs .db-philosophy__item h3 { line-height: 1.3; }

@media (min-width: 861px) {
	/* 368:3137: the section runs 120 above and 60 below, with 48 between the
	   heading and the columns, and the heading is centred like the page's other
	   80/88 headings — not left, which was carried over from the prototype. */
	.db-philosophy--jobs .db-philosophy__head { padding: 120px 0 0; border-bottom: none; }
	.db-philosophy--jobs .db-philosophy__head h2 { text-align: center; line-height: 88px; }
	/* 96, not 48: the frame's row has 48px gaps AND a 1px divider element
	   between the columns, so the rule sits in the middle of 96px of air. */
	.db-philosophy--jobs .db-philosophy__grid { gap: 96px; padding: 48px 0 60px; }
	.db-philosophy--jobs .db-philosophy__item {
		position: relative;
		gap: 32px;
		padding-bottom: 0;
		/* ⚠️ Desktop has NO horizontal rule — only the vertical ones between the
		   columns (368:3139). The base clears `border-bottom` at this width, but
		   the variant re-set it above at higher specificity, so it survived into
		   the desktop layout and drew a line under all three columns. */
		border-bottom: none;
		border-left: none;
		justify-content: flex-start;
	}
	/* The rule is centred in the 96px gap rather than drawn on the column's own
	   edge, so the air either side of it is equal — the frame draws it as a
	   separate element between the columns. */
	.db-philosophy--jobs .db-philosophy__item + .db-philosophy__item::before {
		content: "";
		position: absolute;
		left: -48px;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--line2);
	}
	/* reserve two lines so every description starts on the same baseline */
	.db-philosophy--jobs .db-philosophy__item h3 { min-height: 2.6em; line-height: 32px; }
}

/* --- variant: about  (.db-philosophy--about) ------------------------------
   `.ab-phil`, the third of the three treatments. Unlike the base and --jobs it
   separates the columns with a DISCRETE divider element rather than a
   border-left, so the 48px gap falls on both sides of the rule instead of
   hugging one column — the same approach as .db-about-pair__divider.

   It is also the only philosophy that re-stacks between 861 and 1100, where
   three 40px-gapped columns plus two rules leave the copy unreadably narrow. */
.db-philosophy--about { background: var(--sand); }
.db-philosophy--about .db-philosophy__head { padding: 40px 0; }
.db-philosophy--about .db-philosophy__grid { gap: 24px; padding: 40px 0; }
.db-philosophy--about .db-philosophy__item {
	gap: 24px;
	padding-bottom: 0;
	border-bottom: none;
}
.db-philosophy--about .db-philosophy__item h3 { font-size: clamp(1.125rem, 4vw, 1.5rem); line-height: 1.25; }
.db-philosophy--about .db-philosophy__divider { height: 1px; width: 100%; background: var(--line); }

@media (min-width: 861px) {
	.db-philosophy--about .db-philosophy__head { padding: 60px 0; }
	.db-philosophy--about .db-philosophy__head h2 { text-align: left; }
	.db-philosophy--about .db-philosophy__grid { align-items: stretch; gap: 48px; padding: 60px 0 120px; }
	.db-philosophy--about .db-philosophy__item {
		gap: 40px;
		padding: 0;
		border-left: none;
		min-width: 0;
		justify-content: flex-start;
	}
	.db-philosophy--about .db-philosophy__divider {
		width: 1px;
		height: auto;
		background: var(--line2);
		align-self: stretch;
		flex: 0 0 1px;
	}
}

@media (min-width: 861px) and (max-width: 1099.98px) {
	.db-philosophy--about .db-philosophy__grid { flex-direction: column; gap: 24px; }
	.db-philosophy--about .db-philosophy__divider { width: 100%; height: 1px; align-self: stretch; flex: 0 0 1px; }
}

/* The divider is a bare core/group: no aria-hidden. core/group's save() does not
   emit arbitrary attributes, so `aria-hidden="true"` in the saved markup fails
   block validation ("Expected attributes … instead saw …"). An empty div with no
   text content is already ignored by assistive tech. Same for every other
   __divider in this theme. */