/**
 * Spiro mobile pass — Wave 1 + Wave 2 (Sep 2026)
 *
 * All rules are scoped to html.spiro-mobile-pass so this is easy to undo:
 *   1. Remove the class "spiro-mobile-pass" from <html> in header.php
 *      (stylesheet can stay; it will do nothing), OR
 *   2. Comment out the spiro-mobile-pass.css <link> in header.php
 *
 * Do not edit existing page CSS for this pass. Delete/disable this file instead.
 */

/* ==========================================================================
   Wave 1 — site-wide safety
   ========================================================================== */

/* Generic page-builder columns: stack at 767 (was 480 in templates.css).
   Blue-boxes / cols_40_60 keep their own min-width !important and stay on grid. */
@media (max-width: 767px) {
	html.spiro-mobile-pass .flex_container > [class^="cell_"]:not(.cell_1_1):not(.cell_2_2) {
		min-width: 100%;
		max-width: 100%;
	}
}

/* Form field pairs (care / warranty / spare-parts / book-demo / apply): stack earlier. */
@media (max-width: 900px) {
	html.spiro-mobile-pass form .cell_1_2,
	html.spiro-mobile-pass form .cell_1_2_1,
	html.spiro-mobile-pass .booking_form .cell_1_2,
	html.spiro-mobile-pass .spiro-helpline__fields,
	html.spiro-mobile-pass .spiro-warranty__fields {
		min-width: 100%;
		max-width: 100%;
		grid-template-columns: 1fr;
	}

	html.spiro-mobile-pass form .cell_1_2,
	html.spiro-mobile-pass form .cell_1_2_1,
	html.spiro-mobile-pass .booking_form .cell_1_2 {
		float: none;
	}

	html.spiro-mobile-pass .spiro-hf--full,
	html.spiro-mobile-pass .spiro-wf--full {
		grid-column: auto;
	}
}

/* Footer phone / email: allow wrap before 640. */
@media (max-width: 767px) {
	html.spiro-mobile-pass .spiro-footer__contact-item a {
		white-space: normal;
		flex-wrap: wrap;
	}
}

/* Swiss Quality line: wrap instead of overflowing the hero / item bar. */
@media (max-width: 640px) {
	html.spiro-mobile-pass span.swiss_quality,
	html.spiro-mobile-pass .spiro-hero-swiper__swiss-quality {
		white-space: normal;
		max-width: min(78vw, 280px);
		justify-content: flex-end;
		text-align: right;
		line-height: 1.2;
	}
}

/* Pill CTAs: drop the 259px floor so DE labels fit. */
@media (max-width: 767px) {
	html.spiro-mobile-pass .spiro-care__btn--download,
	html.spiro-mobile-pass #leasing .options a,
	html.spiro-mobile-pass #marketplace .item .btn.btn-custom,
	html.spiro-mobile-pass #marketplace a.btn.btn-custom,
	html.spiro-mobile-pass #spare_parts .download-section .technical_data,
	html.spiro-mobile-pass #spare_parts .download-section .technical_data.row {
		min-width: 0;
		width: 100%;
		max-width: min(100%, 360px);
	}

	html.spiro-mobile-pass #spare_parts .download-section .file_name {
		white-space: normal;
	}
}

/* ==========================================================================
   Wave 2 — pages that still squeeze
   ========================================================================== */

/* Contact office cards: full-width from 767 (45% wrap lives in spiro-contact.css). */
@media (max-width: 767px) {
	html.spiro-mobile-pass #contact .spiro-contact__region-boxes .spiro-blue-box--contact {
		min-height: 0;
	}
}

/* Footer address + office hours: 1 column from 700 (was 640). */
@media (max-width: 700px) {
	html.spiro-mobile-pass .spiro-footer__grid,
	html.spiro-mobile-pass .spiro-footer__meta {
		grid-template-columns: 1fr;
	}

	html.spiro-mobile-pass .spiro-footer__col--contact,
	html.spiro-mobile-pass .spiro-footer__col--legal,
	html.spiro-mobile-pass .spiro-footer__col--social,
	html.spiro-mobile-pass .spiro-footer__col--newsletter {
		grid-column: auto;
	}
}

/* Home hero captions: keep type off the pagination / Swiss badge. */
@media (max-width: 992px) {
	html.spiro-mobile-pass .spiro-hero-swiper__hold-caption,
	html.spiro-mobile-pass .spiro-hero-swiper__reveal-caption {
		padding-bottom: 112px;
	}
}

@media (max-width: 640px) {
	html.spiro-mobile-pass .spiro-hero-swiper__hold-caption,
	html.spiro-mobile-pass .spiro-hero-swiper__reveal-caption {
		padding-bottom: 124px;
	}

	html.spiro-mobile-pass .spiro-hero-swiper__swiss-quality {
		top: clamp(16px, 2.2vw, 24px);
		bottom: auto;
	}
}

/* Product option labels: wrap instead of clipping in the 2-col grid. */
@media (max-width: 700px) {
	html.spiro-mobile-pass .spiro-item-options__name {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}