/* ==========================================================================
   Careers (/careers/)
   ========================================================================== */

/* ---------- Page rhythm: section padding and tablet inset ---------- */
.od-page-careers .od-section, .od-page-job .od-section { padding-block: clamp(100px, 1.9vw + 92.6px, 120px); }
.od-page-careers .od-section.od-careers-how, .od-page-job .od-job ~ .od-section.od-careers-roles { padding-bottom: 200px; }

/* ---------- Hero: framed photo under the fixed bar ---------- */
.od-careers-hero { padding: var(--od-header-h) var(--od-gutter) 0; background: var(--od-white); }
.od-careers-hero__frame {
	position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	max-width: calc(var(--od-max) - 2 * var(--od-gutter)); margin-inline: auto;
	height: clamp(436px, calc(241px + 50vw), 952px);
	padding: var(--od-gutter);
	background: var(--od-grey-900); color: var(--od-white);
}
.od-careers-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.od-careers-hero__frame::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.od-careers-hero__info {
	position: relative; z-index: 1; width: 100%;
	display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 1.33vw + 18px, 32px);
	text-align: center;
}
.od-careers-hero__label { color: var(--od-grey-50); }
.od-careers-hero__text { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.od-careers-hero__title { max-width: 12em; text-wrap: balance; }
.od-careers-hero__lead { max-width: 640px; color: var(--od-grey-50); }

/* ---------- Section header: label left, title and text right ---------- */
.od-careers-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--od-gap); }
.od-careers-head > .od-label { flex: 1 1 0; min-width: 0; padding-top: clamp(4px, 0.63vw - 1px, 8px); white-space: nowrap; }
.od-careers-head__body { flex: 0 0 66.667%; max-width: 800px; display: flex; flex-direction: column; gap: 12px; color: var(--od-grey-900); }
.od-careers-head__body > h2 { text-wrap: balance; }

/* ---------- Principles (icon points) ---------- */
.od-careers-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 40px; list-style: none; margin: 0; padding: 0; }
.od-careers-point { display: flex; flex-direction: column; align-items: flex-start; }
.od-careers-point__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: var(--od-brand);
}
.od-careers-point__title { margin-bottom: 4px; color: var(--od-grey-900); }

/* ---------- Roles list ---------- */
.od-roles__head {
	display: flex; align-items: center; gap: 20px; padding-bottom: var(--od-role-gap);
	font-size: var(--od-fs-b3); line-height: 1.6; color: var(--od-grey-500);
	border-bottom: 1px solid var(--od-line);
}
.od-roles { --od-role-gap: clamp(24px, 0.76vw + 21px, 32px); }
.od-roles__head > span { flex: 1 1 0; min-width: 0; }
.od-roles__head > span:last-child { max-width: 110px; }
.od-roles__list { list-style: none; margin: 0; padding: 0; }
.od-role {
	position: relative;
	display: flex; align-items: flex-start; gap: 20px;
	padding-block: var(--od-role-gap); border-bottom: 1px solid var(--od-line);
}
.od-role__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.od-role__title, .od-role__type { font-size: var(--od-fs-b1); font-weight: 500; line-height: 1.6; }
.od-role__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--od-black); }
.od-role__title a { color: inherit; transition: color 0.2s; }
.od-role__title a::after { content: ""; position: absolute; inset: 0; }
.od-role:hover .od-role__title a { color: var(--od-brand); }
.od-role:hover .od-btn::before { margin-right: 8px; }
.od-role__type { color: var(--od-grey-800); }
.od-role__sub { font-size: var(--od-fs-b3); font-weight: 500; line-height: 1.6; color: var(--od-grey-400); }
.od-role__link { flex: none; }
.od-roles__more { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 56px; }
.od-roles__more-text { display: flex; flex-direction: column; gap: 8px; max-width: 500px; color: var(--od-grey-900); }

/* ---------- How we work (statement columns) ---------- */
.od-careers-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(40px, 3.33vw + 16px, 64px); list-style: none; margin: 0; padding: 0; }
.od-careers-note { display: flex; flex-direction: column; gap: 20px; }
.od-careers-note__text { color: var(--od-grey-900); }
.od-careers-note__meta { display: flex; flex-direction: column; color: var(--od-grey-800); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.od-page-careers .od-container, .od-page-job .od-container { padding-inline: clamp(20px, 2.857vw + 8.86px, 40px); }
	.od-careers-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 32px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.od-careers-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 28px; }
	.od-careers-head { flex-direction: column; gap: 32px; }
	.od-careers-head > .od-label { flex: none; padding-top: 0; }
	.od-careers-head__body { flex: none; width: 100%; }
	.od-roles__head { gap: 0; }
	.od-roles__head > span { flex: none; }
	.od-roles__head > span:nth-child(2) { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--od-grey-300); line-height: 1.2; }
	.od-roles__head > span:last-child { display: none; }
	.od-role__title { flex-direction: column; align-items: flex-start; }
	.od-role { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
	.od-role__col { grid-column: 1; }
	.od-role__link { grid-column: 2; grid-row: 1; }
	.od-roles__more { flex-direction: column; gap: 24px; margin-top: 48px; }
	.od-careers-notes { grid-template-columns: minmax(0, 1fr); gap: 60px; }
}