/*
 * mobile-layout-tweaks
 * Mobile-only refinements. Nothing here applies above the Divi tablet breakpoint.
 */

/* ------------------------------------------------------------------
 * 1. Heading scale on phones
 *    Divi renders H1 at 30px / H2 at 26px with a 1.0 line-height on
 *    phones, which is oversized and cramped for long German headlines.
 *    clamp() keeps it fluid and never larger than the previous value.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	#page-container .et_pb_module h1 {
		font-size: clamp(22px, 6.4vw, 26px) !important;
		line-height: 1.25 !important;
	}

	#page-container .et_pb_module h2 {
		font-size: clamp(19px, 5.4vw, 22px) !important;
		line-height: 1.3 !important;
	}

	#page-container .et_pb_module h3 {
		line-height: 1.35 !important;
	}
}

/* ------------------------------------------------------------------
 * 2. .mobile-btn-block
 *    Full-width, solid, thumb-sized call-to-action button.
 *    The default ghost style (dark green text/border on the green CTA
 *    panel) has far too little contrast on small screens.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {

	#page-container .et_pb_button_module_wrapper:has(> .mobile-btn-block) {
		width: 100%;
	}

	#page-container .et_pb_button.mobile-btn-block,
	#page-container .et_pb_button.mobile-btn-block:hover {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		font-size: 17px !important;
		line-height: 1.35 !important;
		padding: 14px 18px !important;
		background-color: #008250 !important;
		border-color: #008250 !important;
		color: #ffffff !important;
	}

	/* Divi injects an arrow pseudo-element on hover/tap which shifts the
	   label sideways on touch devices. */
	#page-container .et_pb_button.mobile-btn-block:before,
	#page-container .et_pb_button.mobile-btn-block:after {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
 * 3. .mobile-hscroll
 *    Row of columns -> horizontally swipeable card strip.
 *    Applied from the Divi tablet breakpoint down, where the columns
 *    would otherwise stack into a very long vertical list.
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {

	#page-container .et_pb_row.mobile-hscroll {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		/* the row keeps its own width/padding so the strip stays aligned
		   with the section heading above it */
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	#page-container .et_pb_row.mobile-hscroll::-webkit-scrollbar {
		display: none;
	}

	#page-container .et_pb_row.mobile-hscroll > .et_pb_column {
		/* two cards plus a peek of the next one, so the strip reads as
		   swipeable without an extra affordance */
		flex: 0 0 40% !important;
		width: 40% !important;
		max-width: 40% !important;
		margin: 0 12px 0 0 !important;
		scroll-snap-align: start;
	}

	#page-container .et_pb_row.mobile-hscroll > .et_pb_column:last-child {
		margin-right: 0 !important;
	}

	#page-container .et_pb_row.mobile-hscroll .et_pb_module {
		margin-bottom: 0 !important;
	}

	/* Card contents scaled to the narrower card width */
	#page-container .et_pb_row.mobile-hscroll .et_pb_blurb_description,
	#page-container .et_pb_row.mobile-hscroll .et_pb_blurb_description p {
		font-size: 15px !important;
		line-height: 1.35 !important;
		hyphens: auto;
	}

	#page-container .et_pb_row.mobile-hscroll .et_pb_main_blurb_image img {
		width: 48px !important;
		height: auto !important;
	}

	/* Cards outside the viewport never trigger Divi's scroll waypoints,
	   so their entrance animation would leave them invisible. */
	#page-container .et_pb_row.mobile-hscroll .et-waypoint:not(.et-animated) {
		opacity: 1 !important;
		animation: none !important;
	}

	/* Once the JS carousel is attached, arrow/dot jumps animate. */
	#page-container .et_pb_row.mobile-hscroll[data-mlt-carousel="1"] {
		scroll-behavior: smooth;
	}

	#page-container .et_pb_row.mobile-hscroll:focus {
		outline: none;
	}
}

/* ------------------------------------------------------------------
 * 4. Carousel controls (.mlt-carousel-nav)
 *    Injected by assets/mobile-layout-tweaks.js directly after each
 *    .mobile-hscroll row: thin chevrons + dot pagination so the strip
 *    is visibly swipeable instead of relying on the peeking card alone.
 * ------------------------------------------------------------------ */
.mlt-carousel-nav {
	display: none;
}

@media (max-width: 980px) {

	#page-container .mlt-carousel-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		/* matches the width of the card strip above it */
		margin: 14px auto 0;
		width: 100%;
		max-width: 1080px;
	}

	#page-container .mlt-carousel-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #006d40;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		transition: opacity 0.2s ease, background-color 0.2s ease;
	}

	#page-container .mlt-carousel-arrow:hover,
	#page-container .mlt-carousel-arrow:focus-visible {
		background: rgba(0, 109, 64, 0.08);
	}

	#page-container .mlt-carousel-arrow svg {
		display: block;
	}

	/* Soft cue at the strip boundaries — the arrow still works (it wraps
	   around), it just steps back visually. */
	#page-container .mlt-carousel-nav.is-start .mlt-carousel-arrow--prev,
	#page-container .mlt-carousel-nav.is-end .mlt-carousel-arrow--next {
		opacity: 0.35;
	}

	#page-container .mlt-carousel-dots {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 4px;
	}

	#page-container .mlt-carousel-dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(0, 109, 64, 0.25);
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	#page-container .mlt-carousel-dot.is-active {
		background: #006d40;
		transform: scale(1.35);
	}
}