/* BannerV10 - Landmark local subpage banner (Figma 18723:21847): a 197px band at 1920, the photo
   filling the left ~48% and the branch location card (#212121, 32px x 40px padding) the rest,
   32px apart. Stacks photo-over-card below 1280px. */

.bnr.v10 {
	--bnr-v10-ht: 197;          /* Figma band height at 1920 */
	--bnr-v10-img-w: 914;       /* Figma photo width at 1920 */
	--bnr-v10-gap: 2rem;

	.bnr-v10-row {
		align-items: stretch;
		gap: var(--bnr-v10-gap);
	}

	.bnr-v10-img {
		position: relative;
		overflow: hidden;
		min-height: 12rem;

		picture,
		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.bnr-v10-lcl {
		justify-content: center;
		row-gap: 1rem;
		height: 100%;
		padding: 2rem 2.5rem;
		border-radius: 0;

		ul {
			row-gap: 0.5rem;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			column-gap: 1rem;
			align-items: center;
			padding: 0;

			&::before {
				content: none;
			}

			> span a {
				margin-inline-start: 1rem;
			}
		}

		.icn,
		svg {
			flex: 0 0 auto;
			width: 1.5rem;
			height: 1.5rem;
		}

		.txt-und {
			text-decoration-line: underline;
			text-underline-position: from-font;
		}
	}

	@media screen and (width >= 1280px) {
		min-height: calc(var(--bnr-v10-ht) / 1920 * 100vw);

		.bnr-v10-row {
			min-height: inherit;
		}

		.bnr-v10-img {
			flex: 0 0 calc(var(--bnr-v10-img-w) / 1920 * 100%);
			min-height: 0;
		}

		.bnr-v10-acc {
			flex: 1 1 0;
			min-width: 0;
		}
	}
}