/* ==========================================================================
   Travel Times
   Mobile-first + CSS Nesting
   Replaces GenerateBlocks .gb-container-630f0fa5 on Setoda EN/JA pages.
   ========================================================================== */

.as-travel-times {
	background-color: var(--contrast-3);
	color: var(--as-color-navy-deep);

	/*
	 * Map illustration.
	 *
	 * PHP passes the map SVG via the --as-travel-times-map custom property
	 * on the <section> element. Mobile/tablet render the map as a ::before
	 * pseudo element above the content; desktop renders it as a full-bleed
	 * section background (preserving the original gb-container-630f0fa5
	 * min-height: 900px layout where the 3 routes hang off the bottom).
	 */
	&::before {
		content: "";
		display: block;
		width: 100%;
		min-height: 400px;
		background-image: var(--as-travel-times-map);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		margin-bottom: 40px;

		@media (min-width: 769px) {
			min-height: 600px;
		}

		@media (min-width: 1025px) {
			display: none;
		}
	}

	@media (min-width: 1025px) {
		min-height: 900px;
		background-image: var(--as-travel-times-map);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		padding: 40px var(--as-gutter) 80px;
	}

	.as-travel-times__inner {
		max-width: 1300px;
		margin: 0 auto;
		padding: 0 var(--as-gutter) 80px;

		@media (min-width: 769px) {
			padding: 0 var(--as-gutter) 120px;
		}

		@media (min-width: 1025px) {
			width: 60%;
			margin: 0;
			padding: 0;
		}
	}

	.as-travel-times__heading {
		margin: 0 0 40px;

		@media (min-width: 769px) {
			margin: 0 0 20px;
		}
	}

	.as-travel-times__routes {
		display: grid;
		grid-template-columns: 1fr;
		gap: 40px;
		margin: 0 0 40px;
		padding: 0;
		list-style: none;

		@media (min-width: 769px) {
			grid-template-columns: repeat(3, 1fr);
			gap: 40px;
			margin: 0 0 60px;
		}
	}

	.as-travel-times__route {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
	}

	.as-travel-times__endpoint {
		display: flex;
		align-items: center;
		column-gap: 0.5em;
	}

	.as-travel-times__icon {
		width: 40px;
		height: 40px;
		display: block;
	}

	.as-travel-times__endpoint-name {
		font-size: var(--as-font-size-md);
		line-height: var(--as-line-height-snug);
	}

	.as-travel-times__duration {
		display: flex;
		flex-direction: column;
		padding-left: 26px;
		margin-left: 20px;
		border-left: 1px solid var(--contrast);
	}

	.as-travel-times__duration-time {
		display: block;
		font-style: italic;
		font-size: var(--as-font-size-md);
		line-height: var(--as-line-height-snug);
	}

	.as-travel-times__duration-distance {
		display: block;
		font-style: italic;
		font-size: var(--as-font-size-md);
		line-height: var(--as-line-height-snug);
	}

	.as-travel-times__map-button-wrap {
		margin: 0;
		text-align: center;
	}

	.as-travel-times__map-button {
		display: inline-block;
		font-size: var(--as-font-size-md);
		line-height: var(--as-line-height-snug);
		letter-spacing: var(--as-letter-spacing-lg);
		text-transform: uppercase;
		color: var(--as-color-navy-deep);
		text-decoration: none;
		border: 1px solid var(--as-color-navy-deep);
		padding: 14px 32px;
		transition: opacity 0.2s ease;
	}
}

@media (hover: hover) {
	.as-travel-times__map-button:hover {
		opacity: var(--as-hover-opacity);
	}
}