/* ============================================================================
   BharatClinic Sprint 01 — Homepage concern-card layout repair
   Scope: front page / page-id-405 only.
   Locked plugin bharatclinic-homepage-v4 is NOT modified; these rules override.

   ROOT CAUSE (measured live, 2026-07-28 @1470px):
   .door--row is `display:flex; flex-direction:row`, but the markup contains
   FOUR children, not the three the rule was designed for:
       .door-ico    46px   (fine)
       .door-body    9px   <-- crushed to one-word-per-line strips
       .door-go     17px   <-- CTA arrow detached from its label
       .door-conds 407px   <-- condition list consuming the row
   .door-conds is a <ul> of condition chips that belongs BENEATH the content,
   but as a row sibling it starves .door-body, producing vertical text strips,
   collided CTA pills, detached arrows and large dead areas.

   FIX: rebuild .door--row as an explicit 2-column grid:
       [icon] [content: title / description / CTA row]
       [........ conditions span full width ........]
   No font-size reduction. No truncation. No copy or markup change.
   ========================================================================= */

/* ---------- 1. Row-variant cards: grid instead of a 4-item flex row ------- */

.home .doors .door--row,
.page-id-405 .doors .door--row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr); /* minmax(0,1fr) prevents min-content blowout */
	grid-template-areas:
		"icon body"
		"icon cta"
		"conds conds";
	align-items: start;
	column-gap: 16px;
	row-gap: 0;   /* explicit margins instead — .door-conds is a hover-reveal
	                 that collapses to max-height:0 on desktop, and a row-gap
	                 would leave a permanent empty strip while it is collapsed */
	padding: 18px 20px;
}

/* Spacing between the description and the CTA row. */
.home .doors .door--row > .door-go,
.page-id-405 .doors .door--row > .door-go {
	margin-top: 10px;
}

.home .doors .door--row > .door-ico,
.page-id-405 .doors .door--row > .door-ico {
	grid-area: icon;
	flex: 0 0 auto;
	align-self: start;
}

.home .doors .door--row > .door-body,
.page-id-405 .doors .door--row > .door-body {
	grid-area: body;
	min-width: 0;   /* allow the text column to wrap normally */
	width: auto;
}

/* CTA group sits BENEATH the description, per approved structure. */
.home .doors .door--row > .door-go,
.page-id-405 .doors .door--row > .door-go {
	grid-area: cta;
	justify-self: start;
	min-width: 0;
	flex: 0 0 auto;
	font-size: 14.5px;  /* restore label: the row variant had set font-size:0 */
	gap: 6px;
}

/* The row variant hid the CTA label (font-size:0) to save horizontal space.
   With a real content column there is room for it again — arrow stays attached. */
.home .doors .door--row > .door-go svg,
.page-id-405 .doors .door--row > .door-go svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* Condition chips: full width, below everything. */
.home .doors .door--row > .door-conds,
.page-id-405 .doors .door--row > .door-conds {
	grid-area: conds;
	min-width: 0;
	width: 100%;
	flex-wrap: wrap;
}

/* ---------- 2. All cards: prevent min-content blowout in the grid --------- */

.home .doors,
.page-id-405 .doors {
	grid-auto-rows: auto;
}

.home .doors > .door,
.page-id-405 .doors > .door {
	min-width: 0;      /* grid items default to min-width:auto — the classic cause
	                      of one card expanding and squeezing its siblings */
	max-width: 100%;
}

/* Track definitions restated with minmax(0,1fr) so no single card's
   min-content width can distort the row. Mirrors the plugin's breakpoints. */
@media (min-width: 640px) {
	.home .doors--main,
	.page-id-405 .doors--main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.home .doors--main,
	.page-id-405 .doors--main {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.home .doors--quiet,
	.page-id-405 .doors--quiet {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- 3. Text behaviour: wrap normally, never strip vertically ------ */

.home .doors .door h3,
.page-id-405 .doors .door h3,
.home .doors .door .door-copy,
.page-id-405 .doors .door .door-copy,
.home .doors .door .door-scent,
.page-id-405 .doors .door .door-scent {
	min-width: 0;
	overflow-wrap: break-word;   /* only breaks genuinely over-long strings */
	word-break: normal;          /* never mid-word for ordinary copy */
	hyphens: none;
	text-wrap: pretty;
}

/* Long unbroken tokens (phone numbers, URLs) must not widen a track. */
.home .doors .door a,
.page-id-405 .doors .door a {
	overflow-wrap: anywhere;
}

/* ---------- 4. CTA row: no collision with copy --------------------------- */

.home .doors .door .door-row,
.page-id-405 .doors .door .door-row {
	flex-wrap: wrap;          /* pills drop to a new line instead of colliding */
	row-gap: 8px;
	min-width: 0;
	align-items: center;
}

.home .doors .door .door-go,
.page-id-405 .doors .door .door-go,
.home .doors .door .door-wa,
.page-id-405 .doors .door .door-wa {
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;      /* keeps label + arrow together as one unit */
}

/* ---------- 5. Narrow viewports: stack the row variant ------------------- */

@media (max-width: 639px) {
	.home .doors .door--row,
	.page-id-405 .doors .door--row {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 12px;
		padding: 16px;
	}
	/* 44px minimum touch targets on small screens. */
	.home .doors .door .door-go,
	.page-id-405 .doors .door .door-go,
	.home .doors .door .door-wa,
	.page-id-405 .doors .door .door-wa {
		min-height: 44px;
	}
}

/* ---------- 6. Zoom resilience (125% / 200%) ----------------------------- */
/* At 200% zoom the effective viewport halves; the min-content guards above do
   the work. This only stops the 4-up track from surviving into a too-narrow box. */
@media (max-width: 900px) {
	.home .doors--main,
	.page-id-405 .doors--main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.home .doors--quiet,
	.page-id-405 .doors--quiet {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.home .doors--main,
	.page-id-405 .doors--main,
	.home .doors--quiet,
	.page-id-405 .doors--quiet {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 7. Reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.home .doors .door,
	.page-id-405 .doors .door,
	.home .doors .door *,
	.page-id-405 .doors .door * {
		transition: none !important;
		animation: none !important;
	}
}