/**
 * SanorixCare Departments
 *
 * This file owns the ARRANGEMENT; Elementor owns the LOOK.
 *
 * Colours, typography and borders are Elementor settings on ordinary widgets,
 * and Elementor's generated CSS is more specific than anything here, so
 * changing them in the editor always wins.
 *
 * Layout is different: Elementor silently drops container settings written
 * from PHP, so every structural rule is pinned with !important. Each container
 * is paired with `> .e-con-inner`, given `display: contents` — a container set
 * to "boxed" wraps its children in one and they would otherwise sit a level
 * deeper than the selectors reach. With the wrapper out of the layout, one set
 * of rules works whether a container ends up boxed or full.
 *
 * Nothing here touches the theme's test directory block. That renders itself.
 */

/**
 * How wide the content runs.
 *
 * Giving `.e-con-inner` `display: contents` is what makes one set of layout
 * rules work whether a container comes out boxed or full — but it also throws
 * away the max-width Elementor puts on that wrapper, which is where the site's
 * content width normally comes from. So the width is restated here instead.
 *
 * 1320px is the theme's own boxed width, so these pages line up with the test
 * directory and everything else. Change this one value to move them together.
 */
.sdt-banner,
.sdt-body {
	--sdt-width: 1320px;

	/**
	 * The theme's own blocks sit inside a Bootstrap gutter, so their left edge
	 * is 15px in from the container. Our blocks are flush with it, which leaves
	 * a description sitting slightly further left than the search panel beneath
	 * it — close enough to look like a mistake rather than a choice. Everything
	 * we add takes the same inset so the two line up.
	 */
	--sdt-inset: 15px;
}

.sdt-hero > .e-con-inner,
.sdt-banner > .e-con-inner,
.sdt-body > .e-con-inner,
.sdt-intro-block > .e-con-inner,
.sdt-cards > .e-con-inner,
.sdt-card > .e-con-inner,
.sdt-section-head > .e-con-inner,
.sdt-gallery > .e-con-inner,
.sdt-rule > .e-con-inner {
	display: contents !important;
}

/* =========================================================================
 * The theme's page header
 * ====================================================================== */

/**
 * Elementor will not let a widget sit at the top of a page on its own, so the
 * theme's header widget has to be wrapped in a container. That wrapper must
 * contribute nothing: the header already carries its own height and spacing,
 * and a container's default padding lands on top of it, leaving a band of
 * empty blue below the breadcrumb that the site's own pages do not have.
 */
.sdt-hero {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
}

/* =========================================================================
 * Banner — picture with the title laid over it
 * ====================================================================== */

.sdt-banner {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-end !important;
	gap: 14px !important;
	min-height: 320px !important;
	overflow: hidden !important;
	padding: 64px max(24px, calc((100% - var(--sdt-width)) / 2)) 48px !important;
	margin: 0 !important;
	background: #0C2450 !important;
	isolation: isolate;
}

.sdt-banner-bg {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none;
}

.sdt-banner-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A dark wash so white type stays readable over any uploaded photograph. */
.sdt-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(8, 26, 58, 0.92) 0%, rgba(10, 34, 72, 0.78) 46%, rgba(16, 52, 104, 0.44) 100%);
	pointer-events: none;
}

.sdt-banner-title,
.sdt-banner-sub {
	position: relative;
	z-index: 2;
	margin: 0 !important;
	max-width: 60ch;
}

.sdt-banner-title {
	text-wrap: balance;
}

/* The three brand colours, stated once. */
.sdt-rule {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr !important;
	height: 5px !important;
	min-height: 5px !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
}

.sdt-rule-a, .sdt-rule-b, .sdt-rule-c {
	min-height: 5px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.sdt-rule-a { background: #2E7D32 !important; }
.sdt-rule-b { background: #2F6DB5 !important; }
.sdt-rule-c { background: #D23B3B !important; }

/* =========================================================================
 * Body
 * ====================================================================== */

.sdt-body {
	display: block !important;
	padding: 54px max(24px, calc((100% - var(--sdt-width)) / 2)) 76px !important;
	margin: 0 !important;
}

.sdt-section-head {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 0 !important;
	margin: 0 var(--sdt-inset) 34px !important;
}

/* A short bar above the eyebrow — enough to mark the start of a section
   without another heading level. Red, to pair with the eyebrow it sits on. */
.sdt-head-rule {
	width: 52px !important;
	min-height: 4px !important;
	height: 4px !important;
	padding: 0 !important;
	margin: 0 0 6px !important;
	background: #D23B3B !important;
	border-radius: 2px;
}

.sdt-head-eyebrow,
.sdt-head-title {
	margin: 0 !important;
}

.sdt-head-lead {
	max-width: 62ch;
	margin: 2px 0 0 !important;
}

.sdt-head-lead p {
	margin: 0;
}

/* =========================================================================
 * Service cards
 * ====================================================================== */

.sdt-cards {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 22px !important;
	padding: 0 !important;
	margin: 0 var(--sdt-inset) !important;
}

/**
 * A tinted block. The background colour is an Elementor setting on each card,
 * not a rule here, so any single card can be recoloured in the editor.
 */
.sdt-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
	width: auto !important;
	min-height: 244px !important;
	padding: 28px 26px 24px !important;
	margin: 0 !important;
	overflow: hidden !important;
	border-radius: 4px;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.sdt-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(17, 49, 110, 0.13);
}

/**
 * The watermark sits behind the words at low contrast. Anything stronger and
 * it competes with the name, which is the one thing on the card that has to
 * be read.
 */
.sdt-card-art {
	position: absolute !important;
	inset-block-end: 12px !important;
	inset-inline-end: 12px !important;
	width: 96px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0.4;
	z-index: 0;
}

/* Deliberately no `pointer-events: none` here. It would stop the watermark
   swallowing clicks, which the card link does not need — the whole card is
   already the link — and it also made the widget unselectable on the Elementor
   canvas, so the picture could not be swapped by clicking it. */

.sdt-card-art img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
}

.sdt-card-name,
.sdt-card-desc,
.sdt-card-go {
	position: relative;
	z-index: 1;
	margin: 0 !important;
}

.sdt-card-desc {
	/* Keep clear of the watermark, which sits in the corner beneath. */
	max-width: 92%;
}

.sdt-card-desc p {
	margin: 0;
}

.sdt-card-go {
	margin-top: auto !important;
	padding-top: 20px !important;
}

.sdt-card-go .elementor-button {
	background: transparent;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: gap 0.2s ease;
}

/* The arrow is appended rather than typed into the label, so the button text
   stays a plain word someone can edit without losing it. */
.sdt-card-go .elementor-button::after {
	content: "\2192";
}

.sdt-card:hover .sdt-card-go .elementor-button {
	gap: 13px;
}

/* =========================================================================
 * Sub-department page
 * ====================================================================== */

/**
 * The service description, set as a standfirst.
 *
 * The rule down the side is what stops it reading as a stray sentence above
 * the search panel — it marks the text as the opening of the page rather than
 * a caption belonging to whatever sits below.
 */
.sdt-intro-block {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 8px !important;
	max-width: 82ch !important;
	width: auto !important;
	padding: 2px 0 2px 22px !important;
	margin: 0 var(--sdt-inset) 44px !important;
	border-inline-start: 4px solid #D23B3B;
}

.sdt-intro-eyebrow,
.sdt-intro {
	margin: 0 !important;
}

.sdt-intro p {
	margin: 0;
}

.sdt-gallery {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 16px !important;
	padding: 0 !important;
	margin: 0 var(--sdt-inset) 40px !important;
}

.sdt-shot {
	margin: 0 !important;
	padding: 0 !important;
}

.sdt-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

/* The theme's own block. Nothing here styles its insides — it renders itself. */
.sdt-tests {
	margin: 0 !important;
}

/**
 * One exception, on phones only.
 *
 * The theme keeps all three columns down to the narrowest screen and puts
 * 128px of left padding on the test name, which on a 250px-wide row leaves the
 * name a couple of characters at a time. The padding goes, and the code column
 * with it — of the three it is the one nobody reads, and dropping it gives the
 * name and the price room to be legible. The code is untouched on any screen
 * wide enough to hold it.
 *
 * A row is built like this:
 *
 *     <li class="test-row">
 *       <div class="d-flex align-items-center">
 *         <span class="code">T610</span>
 *         <p class="name">NT SCAN (TWIN)</p>
 *       </div>
 *       <span class="price">₹3,500/-</span>
 *     </li>
 *
 * Every selector repeats the class — `.browse-test-list.browse-test-list`.
 * The theme's own mobile rules use !important as well:
 *
 *     .browse-test-list li:first-child { display: inline-block !important; }
 *
 * With !important on both sides specificity decides, and a plain match ties
 * with the theme exactly — at which point whichever stylesheet loads last
 * wins, and the theme's does. Naming the class twice costs nothing and puts
 * these rules one point ahead, which is the entire margin needed.
 */
@media (max-width: 767px) {
	.browse-test-list.browse-test-list {
		margin-right: 0 !important;
		padding: 8px !important;
	}

	/**
	 * The theme turns the heading row into inline-block at this width, which is
	 * what runs "Test Code" and "Test Name" together. Back to a row.
	 *
	 * `:not(.d-none)` matters more than it looks. The theme keeps a hidden
	 * "No tests found." row in the list and shows it by removing that class —
	 * so a blanket `display: flex` on every row reveals a message that should
	 * only appear when a search comes back empty.
	 */
	.browse-test-list.browse-test-list li:not(.d-none),
	.browse-test-list.browse-test-list li.table-header {
		display: flex !important;
		align-items: baseline !important;
		justify-content: space-between !important;
		gap: 12px !important;
		width: auto !important;
		padding: 12px 14px !important;
	}

	/* Anything the theme has hidden stays hidden, at any nesting. */
	.browse-test-list.browse-test-list .d-none {
		display: none !important;
	}

	.browse-test-list.browse-test-list .code {
		display: none !important;
	}

	/**
	 * The heading's "Test Code" is loose text beside the label, with no element
	 * of its own to hide — so the wrapper's type is collapsed and the label
	 * that remains is given its size back.
	 */
	.browse-test-list.browse-test-list li.table-header > div {
		font-size: 0 !important;
	}

	.browse-test-list.browse-test-list li.table-header > div p {
		font-size: 1rem !important;
	}

	/* The name takes the room the code gave up, reads from the left, and wraps
	   whole words onto the next line. */
	.browse-test-list.browse-test-list li > div:not(.d-none) {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		gap: 0 !important;
	}

	.browse-test-list.browse-test-list li p,
	.browse-test-list.browse-test-list li .name {
		margin: 0 !important;
		padding-left: 0 !important;
		text-align: start !important;
	}

	.browse-test-list.browse-test-list .price {
		flex: none !important;
		text-align: end !important;
	}
}

/* =========================================================================
 * Responsive
 * ====================================================================== */

@media (max-width: 1024px) {
	.sdt-banner {
		min-height: 260px !important;
		padding: 52px 20px 40px !important;
	}

	.sdt-body {
		padding: 42px 20px 60px !important;
	}

	.sdt-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	/* The inset exists to line our blocks up with the Bootstrap gutter the
	   theme's block sits in. On a phone that gutter is gone and the inset only
	   eats width, so it goes to nothing. */
	.sdt-banner,
	.sdt-body {
		--sdt-inset: 0px;
	}

	.sdt-banner {
		min-height: 220px !important;
		padding: 42px 16px 32px !important;
	}

	.sdt-body {
		padding: 34px 16px 52px !important;
	}

	.sdt-cards {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px !important;
	}

	.sdt-card {
		min-height: 0 !important;
		padding: 24px 20px 20px !important;
	}

	.sdt-card-art,
	.sdt-card-art img {
		width: 76px !important;
		height: 76px;
	}

	.sdt-head-title {
		font-size: 26px !important;
	}

	.sdt-intro-block {
		padding-inline-start: 16px !important;
		margin-bottom: 32px !important;
	}

	.sdt-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sdt-card,
	.sdt-card-go .elementor-button {
		transition: none;
	}

	.sdt-card:hover {
		transform: none;
	}
}