/**
 * Extra, manually-included stylesheet — NOT loaded automatically by any
 * template/module override. Fixes the "thomasimmos" search widget
 * (mod_bsdimmo_search, .bsdm-search-grid) on phones for thomas-immobilien.com.
 *
 * Root cause: every field's grid column span is a fixed inline style
 * (grid-column: span 4|2) that doesn't change per breakpoint - only the grid's
 * total column count does (4 at <768px). A "span 2" field is therefore always
 * exactly half the row width, and Select2's own placeholder/selection text
 * ("Anzahl Schlafzimmer", "Bestandsimmobilien", ...) doesn't fit in that half,
 * so it gets ellipsis-truncated ("Anzahl Schla...").
 *
 * Fix: on phones, promote every "span 2" field to full width (span 4) via an
 * attribute selector that matches the inline style text directly - this
 * targets fields by their actual current span, not by DOM position/order, so
 * it keeps working if a field is added/removed/reordered later. Inline
 * styles can only be beaten by another inline style or !important, hence the
 * !important here (same pattern bsdimmo-modern.css already uses for the
 * jQuery UI slider overrides).
 *
 * Include this file AFTER bsdimmo-modern.css, e.g.:
 *   <link rel="stylesheet" href="/media/com_bsdimmo/css/bsdimmo-search-thomasimmos-mobile.css" media="(max-width: 767px)">
 */

@media (max-width: 767px) {
	/* Every half-width field becomes full-width - no more squeezing two
	   Select2 fields into one row on a phone-width screen. */
	.bsdm-search-grid-item[style*="span 2"] {
		grid-column: span 4 !important;
	}

	/* The Städte/Umkreis combo field packs its own 70%/30% sub-grid inside
	   one "span 4" item - at phone width 30% is too narrow for the Umkreis
	   dropdown ("Umkreis" truncates to "Umk..."), so stack the two instead
	   of splitting them side by side. */
	.bsdsearch-staedte {
		display: grid !important;
		grid-template-columns: 1fr !important;
		row-gap: 0.6rem;
	}

	/* Select2's own single-select box already truncates with an ellipsis by
	   design (it's a single-line control) - once the field itself is full
	   width this is rarely reached, but keep a floor so a very long option
	   label never forces the control wider than the (now full) column. */
	.bsdm-search .select2-selection--single .select2-selection__rendered {
		max-width: 100%;
	}

	/* Button-group pairs (Mieten/Kaufen, Neubau/Bestandsimmobilien) read
	   fine once their row has full width - just stop them from wrapping
	   awkwardly mid-label. */
	.bsdm-search .btn-group .btn {
		white-space: nowrap;
	}
}