/*!
 * Hospital Network page - responsive corrections
 *
 * Loaded only on templates/tpl-hospital-network-new.php, after all_1.min.css
 * and all_2.min.css, so these rules win on cascade order without touching the
 * minified bundles.
 *
 * Everything here is scoped under .personal-insurance or a page-specific class
 * so no other template can be affected.
 *
 * Background, measured against css/all_2.min.css as actually served:
 *
 *   @media(min-width:1300px) #banner-slider {height:70vh}
 *   @media(min-width:1024px) #banner-slider {height:57vh}
 *   @media(max-width:990px)  #banner-slider {height:37vh}
 *   @media(max-width:767px)  #banner-slider {height:auto;height:251px}
 *
 * Three problems. The 70vh rule is dead: the 1024 rule sits later in the same
 * file and also matches, so the banner has never been taller than 57vh. There
 * is no rule at all between 991px and 1023px and no base height, so in that
 * band the banner loses its height entirely and grows to the image's natural
 * height, measured at 536px on a 1000px viewport against 438px at 1024px.
 * And the 767px block sets height twice, so phones get a hard 251px.
 *
 * This file replaces the ladder with one non-overlapping min-width scale.
 */

/* ---------------------------------------------------------------------------
 * 1. Banner
 * ------------------------------------------------------------------------- */

/* On phones the image is genuinely distorted: measured at 375px it renders
 * 984x176 from a 984x527 source, squashed to 2.99x its natural aspect and
 * 984px wide inside a 375px viewport, saved only by overflow:hidden.
 *
 * On desktop it is not distorted. It scales to width, keeps its aspect and
 * overflows the bottom of the slider, which overflow:hidden crops. object-fit
 * reproduces that on purpose: cover with a top anchor crops from the bottom
 * exactly as before, so desktop is unchanged and only the phone case is fixed.
 *
 * header.php prints an inline min-width:100% after wp_head(), which therefore
 * wins on cascade order. It is left alone: width:100% makes it a no-op. */
.personal-insurance .banner #banner-slider .item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Phones: image keeps its natural aspect ratio, caption sits below it.
 * This matches what the bundles already do at <=767px, restated here so the
 * whole ladder reads in one place. */
.personal-insurance .banner #banner-slider {
	height: auto;
	overflow: hidden;
}

.personal-insurance .banner #banner-slider .item img {
	height: auto;
}

/* Tablets. Previously 37vh below 991px, then nothing at all from 991-1023px,
 * where the banner fell back to the image's natural height: 536px measured on
 * a 1000px viewport, against 379px at 990px and 438px at 1024px. One rule now
 * covers the whole band. min-height stops the banner collapsing in landscape
 * on short viewports. */
@media (min-width: 768px) {
	.personal-insurance .banner #banner-slider {
		height: 37vh;
		min-height: 260px;
	}

	.personal-insurance .banner #banner-slider .item,
	.personal-insurance .banner #banner-slider .item img {
		height: 100%;
	}
}

/* Desktop. 57vh is the height the site has actually been using, because the
 * 70vh rule never applied. Kept at 57vh so this stays a bug fix rather than a
 * redesign. max-height stops it running away on tall or ultrawide monitors,
 * where 57vh became 800px or more of photo above the fold. */
@media (min-width: 1024px) {
	.personal-insurance .banner #banner-slider {
		height: 57vh;
		min-height: 360px;
		max-height: 620px;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Banner caption
 * ------------------------------------------------------------------------- */

/* The bundles set three different vertical positions that fight each other:
 * top:20% base, top:15% from 768-1365px, and top:52%!important below 1199px.
 * One centred position is used at every size the caption overlays the image. */
@media (min-width: 768px) {
	.personal-insurance .banner #banner-slider .banner-caption {
		top: 50% !important;
		left: 8%;
		width: 46%;
		/* 720px, not 620px. The bundle gives the caption 45% above 1300px,
		 * which is 648px at a 1440 viewport, so a 620px cap was measurably
		 * narrower than production. 720px leaves 1440 at its natural 662px and
		 * still stops the caption sprawling on ultrawide monitors, where 46%
		 * would be 1178px at 2560. Narrower also means more wrapping, which
		 * matters most for the longer Thai and Vietnamese headings. */
		max-width: 720px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
}

@media (min-width: 1300px) {
	.personal-insurance .banner #banner-slider .banner-caption {
		left: 15%;
	}
}

/* Phone caption: put the heading and paragraph back into normal flow.
 *
 * header.php prints an inline <style> block (three near-identical media
 * queries at 767px, 480px and 320-480px device-width) that does this:
 *
 *   .banner #banner-slider .banner-caption h1 {position:absolute; top:10px}
 *   .banner #banner-slider .banner-caption p  {position:absolute; top:20px}
 *   .banner {height:200px}
 *
 * Both children are taken out of flow and pinned 10px apart, so on a phone the
 * heading is printed directly on top of the paragraph and the caption collapses
 * to its 32px of padding. Measured at 375px: caption 32px tall, h1 spanning
 * 241-269px and p spanning 251-301px, an 18px overlap.
 *
 * That inline block is not scoped to this template, it affects every banner on
 * the site, so it is overridden here rather than edited in header.php, which
 * would need its own pass across every page that has a banner. These selectors
 * carry .personal-insurance, giving them one more class than the inline rule,
 * which is what lets a stylesheet beat markup that appears later in the page.
 *
 * text-align is returned to center to match .banner-caption's own mobile rule
 * in the bundle, which the inline block was overriding to left. */
@media (max-width: 767px) {
	.personal-insurance .banner #banner-slider .banner-caption h1,
	.personal-insurance .banner #banner-slider .banner-caption p {
		position: static;
		top: auto;
		text-align: center;
	}

	/* The same inline block caps .banner at 200px while the slider needs more,
	 * so the caption spilled past its own section. */
	.personal-insurance .banner {
		height: auto;
	}
}

/* No font sizes are set here.
 *
 * An earlier revision replaced the theme's 60/50/30/22px steps with clamp().
 * Rendering it showed that made tablets worse, dropping the 768px heading from
 * 50px to 32px, so the theme's existing scale is left in place. The phone
 * problem was the absolute positioning above, not the type size.
 *
 * Only wrapping is added, as a safety net for the Thai and Vietnamese
 * headings, which are longer than the English and have no room to spare in a
 * caption that is 46% of the viewport. */
.personal-insurance .banner #banner-slider .banner-caption h1,
.personal-insurance .banner #banner-slider .banner-caption p {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * 3. Search form
 * ------------------------------------------------------------------------- */

/* The two selects are laid out with flexbox rather than the Bootstrap grid.
 * The markup wrapped each .col-md-6 in a bare <div>, which gave each float its
 * own containing block, so the country and city selects stacked at every width
 * instead of sitting side by side on desktop. The template now emits a plain
 * flex row and this rule owns the layout. */
.find_hospitals .find_form {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 25px;
	margin-left: 0;
	margin-right: 0;
}

.find_hospitals .find_form > .find_form_field {
	flex: 1 1 100%;
	min-width: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.find_hospitals .find_form > .find_form_field {
		flex: 1 1 calc(50% - 15px);
	}
}

/* 16px minimum stops iOS Safari zooming the page when a select is focused. */
.find_hospitals .find_form select {
	width: 100%;
	height: 52px;
	max-width: 100%;
	font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * 4. Section spacing and headings
 * ------------------------------------------------------------------------- */

/* 86px and 77px of fixed padding cost roughly a quarter of a phone screen
 * before any content appeared. */
.find_hospitals {
	padding-top: clamp(32px, 7vw, 86px);
	padding-bottom: clamp(24px, 4vw, 40px);
}

.matching_results {
	padding-top: clamp(32px, 6vw, 77px);
	padding-bottom: clamp(20px, 3vw, 30px);
}

/* No heading sizes are set here, on purpose.
 *
 * .find_hospitals contains the_content(), so Elementor owns its typography.
 * Measuring showed that heading already renders at 30px from the Elementor
 * kit, and a .find_hospitals h2 rule here would have silently pushed it to
 * 40px.
 *
 * .matching_results h2 looks like a flat 40px in the bundle, but something
 * later already overrides it: measured, it is 24px on a phone and 30px on
 * desktop, which is a sane scale. An earlier revision of this file clamped it
 * and pushed desktop to 40px, so the rule was removed rather than kept. */

/* ---------------------------------------------------------------------------
 * 5. Map
 * ------------------------------------------------------------------------- */

/* Replaces the inline height:695px!important that the template used to print.
 * 695px was taller than the entire viewport on most phones, so the map filled
 * the screen and trapped the scroll. */
.map_sec_box #map_network {
	width: 100%;
	height: 60vh;
	min-height: 320px;
	max-height: 695px;
}

@media (min-width: 768px) {
	.map_sec_box #map_network {
		height: 65vh;
		min-height: 420px;
	}
}

/* Google Maps moves #legend into its RIGHT_TOP control slot at runtime, so it
 * overlays the map. At its fixed size it covered a large share of a phone
 * screen. */
.map_sec_box #legend {
	max-width: 45vw;
	box-sizing: border-box;
	font-size: 13px;
}

.map_sec_box #legend h3,
.map_sec_box #legend > div {
	font-size: 13px;
	margin-bottom: 6px;
}

@media (min-width: 768px) {
	.map_sec_box #legend {
		max-width: none;
		font-size: 15px;
	}

	.map_sec_box #legend h3,
	.map_sec_box #legend > div {
		font-size: 15px;
		margin-bottom: 10px;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Results
 * ------------------------------------------------------------------------- */

/* The API returns both a desktop table (.table_content) and a phone card list
 * (.formobile_table > .table_for_mobile). The bundles swap them at 767px and
 * that part works. What was missing: between 768px and roughly 990px the
 * three column table has no room, so it is allowed to scroll horizontally
 * inside its own box rather than pushing the page sideways. */
.matching_results .table_content {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.matching_results .table_content table {
	width: 100%;
	min-width: 560px;
}

.matching_results .table_content table th,
.matching_results .table_content table td {
	word-break: break-word;
}

/* font-weight:600px in the bundle is invalid, so these labels were never
 * actually bold on any device. */
.matching_results .table_for_mobile table td span,
.formobile_table .table_for_mobile table td span {
	font-weight: 600;
}

/* The card list was pinned to a 600px table, which overflowed every phone
 * narrower than that. */
.formobile_table .table_for_mobile table {
	width: 100%;
	margin: 0 auto;
}

.formobile_table .table_for_mobile table td {
	word-break: break-word;
}

/* Long unbroken URLs in the contact column are the main source of sideways
 * scroll on phones. */
.matching_results a {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * 7. Page level
 * ------------------------------------------------------------------------- */

/* Guards against any single wide child forcing the whole page sideways. */
.personal-insurance {
	overflow-x: hidden;
}

.personal-insurance img {
	max-width: 100%;
}