/*
 * 2026-07-23 v1.1
 * - Reset inherited first-card margins so desktop rows align evenly
 *
 * 2026-07-23 v1.0
 * - Added responsive styling for the Bureau Ro app overview
 */

.bureau-ro-apps {
	min-height: auto;
}

.bureau-ro-apps > article {
	box-sizing: border-box;
	max-width: none;
	width: 100%;
}

.bureau-ro-apps > article > .bureau-ro-apps-intro,
.bureau-ro-apps > article > .bureau-ro-apps-grid {
	box-sizing: border-box;
	max-width: none;
	min-width: 0;
	width: 100%;
}

.bureau-ro-apps-intro {
	max-width: 780px!important;
}

.bureau-ro-apps-intro h1 {
	font-size: clamp(44px, 6vw, 86px)!important;
	line-height: .95!important;
	max-width: none!important;
}

.bureau-ro-apps-intro p {
	font-size: clamp(18px, 1.65vw, 27px);
	line-height: 1.45;
	max-width: 900px;
	text-wrap: balance;
}

.bureau-ro-apps-grid {
	display: grid!important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(60px, 7vw, 120px)!important;
	padding-top: 30px!important;
}

.bureau-ro-app-card {
	border-top: 1px solid var(--bordercolor_dark,#c4c4be);
	display: grid;
	gap: 30px;
	grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
	max-width: none;
	padding-top: 30px;
}

.bureau-ro-apps-grid > .bureau-ro-app-card {
	margin: 0!important;
}

.bureau-ro-app-visual {
	align-items: flex-start;
	display: flex!important;
	min-width: 0!important;
}

.bureau-ro-app-visual img {
	aspect-ratio: 1;
	border-radius: 22.5%;
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

.bureau-ro-app-content {
	display: flex!important;
	gap: 20px!important;
	justify-content: flex-start!important;
	min-width: 0!important;
}

.bureau-ro-app-heading {
	display: flex!important;
	gap: 4px!important;
	min-width: 0!important;
}

.bureau-ro-app-heading h2,
.bureau-ro-app-heading p,
.bureau-ro-app-content > p {
	margin: 0;
}

.bureau-ro-app-heading h2 {
	font-size: clamp(30px, 2.4vw, 46px);
	line-height: 1;
}

.bureau-ro-app-platform,
.bureau-ro-app-status {
	color: var(--frontcolor_dark,#60a958);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.bureau-ro-app-status {
	margin-top: auto!important;
}

.bureau-ro-app-actions {
	display: flex!important;
	flex-direction: column!important;
	gap: 4px!important;
	margin-top: auto;
	min-width: 0!important;
}

.bureau-ro-app-actions .button {
	margin: 0 auto 0 0;
}

.bureau-ro-app-actions .button .fa {
	min-width: 16px;
}

@media only screen and (max-width: 1280px) {
	.bureau-ro-apps-grid {
		grid-template-columns: 1fr;
	}

	.bureau-ro-app-card {
		grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
	}

}

@media only screen and (max-width: 640px) {
	.bureau-ro-apps-intro p {
		font-size: 17px;
	}

	.bureau-ro-apps-grid {
		gap: 60px!important;
	}

	.bureau-ro-app-card {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 20px;
	}

	.bureau-ro-app-heading h2 {
		font-size: 29px;
	}
}

@media only screen and (max-width: 460px) {
	.bureau-ro-app-card {
		grid-template-columns: 1fr;
	}

	.bureau-ro-app-visual {
		max-width: 150px;
	}
}