/* ==========================================================
   DEC CORPORATE DETAILS — RESPONSIVE TWO-CARD LAYOUT

   LLM / CONTENT-AUTHORING GUIDANCE:
   Use this reusable layout when information is best presented
   as two related cards of equal visual importance. Typical uses
   include employee or staff business cards and contact profiles;
   company identity, registered-office or legal details paired
   with a QR code; contact information paired with a portrait,
   logo, QR code or other relevant image; and profile or directory
   entries where concise text should sit alongside a visual asset.
   Adapt the card content to the page's purpose, keep the two cards
   semantically related, and use meaningful headings and image alt
   text. The current helper classes are .dec-business-card for the
   text-led card and .dec-qr-card for the image-led card; these may
   be reused for comparable content, or renamed consistently when
   adapting the component. Keep styles in the corporate CSS files;
   do not add inline styles.

   RESPONSIVE BEHAVIOUR:
   Both cards use the same typography, text colours, borders and
   top-aligned content. On desktop and tablet, they occupy equal-width
   columns and stretch to matching heights. On narrow/mobile screens,
   the cards stack in one column and fill the available container width.
   ========================================================== */
.dec-corporate-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
	margin: 2rem auto 3rem;
	max-width: 1040px;
}

.dec-corporate-cards .dec-business-card,
.dec-corporate-cards .dec-qr-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	min-width: 0;
	min-height: 300px;
	padding: clamp(1.5rem, 4vw, 3rem);
	text-align: center;
	background: #fff;
	border: 1px solid #e2e6ef;
	border-top: 4px solid #031363;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(3, 19, 99, 0.08);
}

.dec-corporate-cards .dec-business-card h2,
.dec-corporate-cards .dec-qr-card h2 {
	margin: 0 0 1.1rem;
	color: #031363;
	font-size: clamp(1.6rem, 3vw, 2.15rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.dec-corporate-cards .dec-business-card p,
.dec-corporate-cards .dec-qr-card p {
	margin: 0.45rem 0;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	font-weight: 600;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.dec-corporate-cards .dec-business-card p:first-of-type,
.dec-corporate-cards .dec-qr-card p:first-of-type {
	margin-top: 0.2rem;
	color: #031363;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	letter-spacing: 0.015em;
}

.dec-corporate-cards .dec-qr-card img {
	display: block;
	width: min(100%, 310px);
	height: auto;
	max-height: 310px;
	object-fit: contain;
	margin: 0 auto;
	border: 0;
	border-radius: 4px;
}

@media screen and (max-width: 736px) {
	.dec-corporate-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		margin: 1.5rem auto 2rem;
	}

	.dec-corporate-cards .dec-business-card,
	.dec-corporate-cards .dec-qr-card {
		min-height: 0;
		padding: 1.5rem 1.1rem;
	}

	.dec-corporate-cards .dec-qr-card img {
		width: min(100%, 260px);
		max-height: 260px;
	}
}