/*
 * Photo Gallery (Figma D-EN 5:8855, M-EN 6:9217, D-AR 7:11650, M-AR 5:9047).
 * Base = 390 frame; @media (min-width: 1024px) = 1440 frame.
 */

/* ---------- Hero (5:8882 / 6:9228 / 7:11677 / 5:9058) ---------- */
.tec-gallery__hero { padding-top: 4px; }
.tec-gallery__hero-top { display: flex; flex-direction: column; }
.tec-gallery__h1 {
	font-size: 32px;
	font-weight: 800;
	line-height: 43.2px;
	color: var(--tec-navy);
}
.tec-gallery__intro {
	padding-top: 12px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 23.63px;
	color: var(--tec-grey);
}

.tec-gallery__hero-media { padding-top: 18px; }
.tec-gallery__media-a { position: relative; padding-top: 36px; }
.tec-gallery__img-a { height: 250px; border-radius: 16px; }
/* Arrow EN/Mobile @(234,-5.99) of the 350 column = 32px from its right edge; AR/Mobile @(28,-5.99). */
.tec-gallery__badge-m { position: absolute; top: -5.99px; right: 32px; }
[dir="rtl"] .tec-gallery__badge-m { right: auto; left: 28px; }

/* ---------- Photo album (5:8913 / 6:9254 / 7:11708 / 5:9084) + spacer 60 / 110 ---------- */
.tec-gallery__album { padding-top: 60px; padding-bottom: 60px; }
.tec-gallery__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-bottom: 22px;
}
.tec-gallery__h2 {
	font-size: 28px;
	font-weight: 800;
	line-height: 37.8px;
	color: var(--tec-navy);
	text-align: center;
}

/* Grid 170px x2, rows 165px, gap 10; tiles radius 12 on the #A7A9AB backing. */
.tec-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
/* The AR frames keep tile 1 at the left (same physical order as EN), so the grid is not mirrored. */
[dir="rtl"] .tec-gallery__grid { direction: ltr; }
.tec-gallery__tile { aspect-ratio: 170 / 165; border-radius: 12px; }

/* ================= Desktop (1440 frame) ================= */
@media (min-width: 1024px) {
	.tec-gallery__hero { padding-top: 10px; }
	.tec-gallery__hero-top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.tec-gallery__title-col { flex: 0 0 486px; }
	[dir="rtl"] .tec-gallery__title-col { flex: 0 0 auto; }
	/* Figma 487x76 single line; the local font renders slightly wider, so the title must not wrap. */
	.tec-gallery__h1 { font-size: 56px; line-height: 75.6px; white-space: nowrap; }
	/* D-AR H1 400 wide, LEFT-aligned; D-AR intro LEFT-aligned (spec as designed, C20). */
	[dir="rtl"] .tec-gallery__h1 { width: 400px; text-align: left; }
	.tec-gallery__intro { flex: 0 1 280px; padding-top: 18px; }
	[dir="rtl"] .tec-gallery__intro { text-align: left; }

	.tec-gallery__hero-media {
		display: flex;
		align-items: flex-end;
		gap: 34px;
		height: 436px;
		padding-top: 36px;
	}
	/* D-AR keeps Image A on the left (not mirrored in the AR frame). */
	[dir="rtl"] .tec-gallery__hero-media { flex-direction: row-reverse; }
	.tec-gallery__media-a { flex: 0 1 480px; min-width: 0; padding-top: 0; }
	.tec-gallery__img-a { height: 400px; border-radius: 18px; }
	.tec-gallery__media-b { position: relative; flex: 0 1 686px; min-width: 0; padding-top: 44px; }
	.tec-gallery__img-b { height: 356px; border-radius: 18px; }
	/* Arrow EN/Desk @(543,-6.09) of the 686 column = 43px from its right; AR/Desk @(70,0). */
	.tec-gallery__badge-d { position: absolute; top: -6.09px; right: 43px; }
	[dir="rtl"] .tec-gallery__badge-d { top: 0; right: auto; left: 70px; }

	.tec-gallery__album { padding-top: 110px; padding-bottom: 110px; }
	.tec-gallery__head { gap: 14px; padding-bottom: 40px; }
	.tec-gallery__h2 { font-size: 42px; line-height: 56.7px; }

	/* Grid 288px x4, rows 280px, gap 16 (1200 wide at 1440; fractions below). */
	.tec-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.tec-gallery__tile { aspect-ratio: 288 / 280; border-radius: 18px; }
}