/* ============================================================
   Hospito — responsive
   ------------------------------------------------------------
   Type and section rhythm are fluid (clamp) in variables.css, so
   this file never restates a font size. It only does the things
   a media query is actually for: changing how a layout is built.

   The header drawer lives in header.css, the grid and split
   collapses in base.css, and the doctor components in
   doctors.css — each beside the code it belongs to.
   ============================================================ */

/* ============================================================
   TABLET (<= 1024px)
   ============================================================ */

@media (max-width: 1024px) {

	/* ---------- Component grids ---------- */

	.hos-grid--features,
	.hos-grid--imgcards,
	.hos-grid--numcards,
	.hos-grid--services,
	.hos-grid--posts,
	.hos-grid--locations,
	.hos-grid--branches,
	.hos-grid--related,
	.hos-grid--doctors {
		--hos-cols: 2;
	}

	.hos-grid--reviews {
		--hos-cols: 1;
	}

	.hos-grid--doctors-compact {
		--hos-cols: 4;
	}

	.hos-stats {
		--hos-cols: 3;
	}

	.hos-tech__cards {
		--hos-cols: 2;
	}

	/* ---------- Two-column blocks become one ---------- */

	.hos-textimage,
	.hos-appointment--split,
	.hos-faq--split,
	.hos-cost--split,
	.hos-tech__grid,
	.hos-branch-layout,
	.hos-archive__layout,
	.hos-doctor__hero-inner {
		grid-template-columns: 1fr;
		gap: var(--hos-space-8);
	}

	.hos-textimage--left .hos-textimage__body,
	.hos-textimage--left .hos-textimage__media {
		order: 0;
	}

	.hos-textimage__media {
		height: 280px;
	}

	.hos-doctor__photo {
		max-width: 320px;
	}

	/* Nothing stays pinned once the layout is a single column. */
	.hos-sidebar,
	.hos-branchbar--sticky,
	.hos-chairman__card {
		position: static;
	}

	/* ---------- Why choose us ---------- */

	.hos-why {
		grid-template-columns: 1fr;
		gap: var(--hos-space-6);
	}

	.hos-why__img {
		max-width: 560px;
		width: 100%;
		margin-inline: auto;
		min-height: 240px;
	}

	.hos-why__img--last {
		order: 3;
	}

	.hos-why__content {
		text-align: center;
		max-width: 620px;
		margin-inline: auto;
	}

	.hos-why__title br {
		display: none;
	}

	.hos-why .hos-checklist {
		display: inline-block;
		text-align: left;
	}

	/* ---------- Results ---------- */

	.hos-results {
		grid-template-columns: 1fr 1fr;
	}

	.hos-results__testi {
		grid-column: 1 / -1;
		order: -1;
	}

	/* ---------- Lists and other ---------- */

	.hos-checkcols {
		columns: 2;
	}

	.hos-chairman {
		grid-template-columns: 1fr !important;
		gap: var(--hos-space-8);
	}

	.hos-chairman__card {
		max-width: 320px;
		margin-inline: auto;
	}

	.hos-subnav--sticky {
		top: 0;
	}
}

/* ============================================================
   SMALL TABLET (<= 900px)
   ============================================================ */

@media (max-width: 900px) {
	.hos-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hos-footer__brand {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   LARGE PHONE (<= 860px)
   ============================================================ */

@media (max-width: 860px) {
	.hos-grid--doctors-compact {
		--hos-cols: 3;
		gap: var(--hos-space-3);
	}

	.hos-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--hos-space-3);
	}

	.hos-section__head .hos-btn {
		align-self: stretch;
	}
}

/* ============================================================
   PHONE (<= 640px)
   ============================================================ */

@media (max-width: 640px) {

	/* ---------- Hero ---------- */

	.hos-hero__slide {
		min-height: 460px;
	}

	.hos-hero__inner {
		padding-block: var(--hos-space-12);
	}

	.hos-hero__buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.hos-hero__buttons .hos-btn {
		width: 100%;
	}

	/* ---------- Stats ---------- */

	.hos-stats-wrap--overlap {
		margin-top: calc(var(--hos-space-8) * -1);
	}

	.hos-stats {
		--hos-cols: 2;
		gap: var(--hos-space-5) var(--hos-space-2);
		padding: var(--hos-space-5) var(--hos-space-4);
	}

	.hos-stat {
		flex-direction: column;
		text-align: center;
		gap: var(--hos-space-2);
	}

	.hos-stat + .hos-stat::before {
		display: none;
	}

	/* ---------- Grids ---------- */

	.hos-grid--features,
	.hos-grid--numcards,
	.hos-grid--services,
	.hos-grid--posts,
	.hos-grid--locations,
	.hos-grid--branches,
	.hos-grid--related,
	.hos-grid--doctors,
	.hos-tech__cards {
		--hos-cols: 1;
	}

	.hos-grid--imgcards {
		--hos-cols: 2;
	}

	.hos-results {
		grid-template-columns: 1fr;
	}

	.hos-results__tile {
		min-height: 200px;
	}

	/* ---------- Doctors: a swipeable row beats a tall stack ---------- */

	.hos-grid--swipe {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--hospito-gutter);
		gap: var(--hos-space-3);
		padding: var(--hos-space-1) var(--hospito-gutter) var(--hos-space-3);
		margin-inline: calc(var(--hospito-gutter) * -1);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hos-grid--swipe::-webkit-scrollbar {
		display: none;
	}

	.hos-grid--swipe .hos-doc,
	.hos-grid--swipe .hos-dcard {
		flex: 0 0 calc(100% - 56px);
		scroll-snap-align: center;
		height: auto;
	}

	.hos-swipe-hint {
		display: block;
	}

	/* ---------- Process steps ---------- */

	.hos-steps {
		flex-direction: column;
	}

	.hos-steps::before {
		display: none;
	}

	.hos-step {
		padding: 0 var(--hos-space-6) var(--hos-space-6);
	}

	/* ---------- Blog ---------- */

	.hos-post-row {
		flex-direction: column;
	}

	.hos-post-row__img {
		flex: 0 0 auto;
		width: 100%;
		height: 170px;
	}

	.hos-post-row__body {
		padding: var(--hos-space-4);
	}

	/* ---------- CTA ---------- */

	.hos-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		text-align: center;
		padding: var(--hos-space-8) var(--hos-space-6);
	}

	.hos-cta__copy {
		text-align: center;
		width: 100%;
	}

	.hos-cta__buttons {
		flex-direction: column;
		width: 100%;
	}

	.hos-cta__buttons .hos-btn {
		width: 100%;
	}

	/* ---------- Footer ---------- */

	.hos-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--hos-space-6);
	}

	.hos-footer__brand {
		grid-column: 1 / -1;
	}

	.hos-footer__strip-inner,
	.hos-footer__bottom-inner {
		justify-content: center;
		text-align: center;
		flex-direction: column;
		align-items: center;
	}

	/* ---------- Misc ---------- */

	.hos-checkcols {
		columns: 1;
	}

	.hos-buttons--stack {
		flex-direction: column;
		align-items: stretch;
	}

	.hos-buttons--stack .hos-btn {
		width: 100%;
	}

	.hos-costtable th,
	.hos-costtable td {
		padding: var(--hos-space-3);
	}

	.hos-chairman__stats,
	.hos-doctor__facts {
		grid-template-columns: 1fr;
	}

	.hos-note--panel {
		padding: var(--hos-space-8) var(--hos-space-6);
	}

	.hos-note__pills {
		flex-direction: column;
		align-items: center;
	}

	.hos-gallery__item {
		height: 200px;
	}

	.hos-ordered {
		padding: var(--hos-space-6) var(--hos-space-5);
	}

	.hos-phero__form,
	.hos-formcard,
	.hos-cost__form {
		padding: var(--hos-space-5);
	}
}

/* ============================================================
   PHONE SAFETY NET (<= 640px)
   ------------------------------------------------------------
   Blanket rules that stop the common phone failures — overlap
   from pulled-up or pinned elements, and anything that can push
   the page wider than the screen.
   ============================================================ */

@media (max-width: 640px) {

	/* Nothing stays pinned or pulled up on a phone: a sticky or
	   negatively-offset block is what slides over the content below it. */
	.hospito [style*="position:sticky"],
	.hos-split__aside,
	.hos-section--sticky,
	.hos-sidebar,
	.hos-branchbar--sticky,
	.hos-profile__aside,
	.hos-chairman__card {
		position: static !important;
		top: auto !important;
	}

	/* The stats card lifts over the hero on desktop; on a phone that overlap
	   lands on top of the headline. */
	.hos-statsbar {
		margin-top: 0;
		padding-top: var(--hos-section-y-sm);
	}

	/* Long unbroken strings — emails, URLs, registration numbers — are a
	   classic source of horizontal scroll. */
	.hospito p,
	.hospito li,
	.hospito dd,
	.hospito td,
	.hospito h1,
	.hospito h2,
	.hospito h3,
	.hospito h4 {
		overflow-wrap: anywhere;
	}

	/* Any table gets its own scroller rather than widening the page. */
	.hospito table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	/* Embeds and media never exceed their column. */
	.hospito iframe,
	.hospito video,
	.hospito embed,
	.hospito object {
		max-width: 100%;
	}

	/* Absolutely-placed badges sit inside the card on a phone. */
	.hos-doc__exp,
	.hos-dcard__exp,
	.hos-branch__badge {
		top: var(--hos-space-2);
		right: var(--hos-space-2);
		left: auto;
		font-size: 0.625rem;
		padding: 0.25rem 0.5rem;
	}

	.hos-branch__badge {
		left: var(--hos-space-2);
		right: auto;
	}

	/* Floating buttons must not cover the last CTA. */
	.hos-float-wa {
		width: 46px;
		height: 46px;
		font-size: 20px;
		right: 12px;
		bottom: 12px;
	}

	.hos-to-top {
		width: 38px;
		height: 38px;
		right: 12px;
		bottom: 68px;
	}

	/* Buttons wrap instead of squeezing their labels off the edge. */
	.hos-buttons,
	.hos-phero__buttons,
	.hos-cta__buttons {
		width: 100%;
	}

	/* Section headings keep breathing room from the content under them. */
	.hos-heading {
		margin-bottom: var(--hos-space-8);
	}
}

/* ============================================================
   SMALL PHONE (<= 480px)
   ============================================================ */

@media (max-width: 480px) {
	.hos-topbar__links {
		gap: var(--hos-space-5);
	}

	.hos-logo {
		max-width: 150px;
	}

	.hos-logo__desktop {
		display: block;
	}
}

/* ============================================================
   VERY SMALL PHONE (<= 380px)
   ============================================================ */

@media (max-width: 380px) {
	.hos-stats,
	.hos-grid--imgcards {
		--hos-cols: 1;
	}

	.hos-footer__grid {
		grid-template-columns: 1fr;
	}

	.hos-topbar__links {
		gap: var(--hos-space-3);
	}

	.hos-404__code {
		font-size: 4.5rem;
	}
}