/* ==========================================================================
   Cardiology specialty page — scoped under .page-cardio so nothing leaks.
   Builds on the design tokens in main.css (--blue, --serif, --maxw, etc.).
   Mirrors the Home/About-Us spacing, typography and component styling.
   ========================================================================== */

/* ---------- Banner ----------
   Reuses .ihero ihero--media navy banner for parity with Home/About Us.
   Locks min-height to the About Us reference (~519px @ 1366). */
.page-cardio .cardio-banner{min-height:519px;display:flex;align-items:center}
.page-cardio .cardio-banner > .container{width:100%}
.page-cardio .cardio-banner h1{
	max-width:none;
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.page-cardio .cardio-banner p{max-width:54ch}

/* ---------- Overview ----------
   Left: marketing content + 2-column quick-check grid.
   Right: an elegant booking form card.
   Pattern inspired by best-in-class healthcare landing pages; refined
   spacing, custom inputs, and brand-tinted accents make it feel premium. */
.page-cardio .cardio-overview{align-items:start;gap:56px}
.page-cardio .cardio-overview h2{margin-top:0;margin-bottom:18px}
.page-cardio .cardio-h2__hl{color:var(--blue)}
.page-cardio .cardio-overview > div > p{max-width:54ch}

/* Quick-check 2-column grid */
.page-cardio .cardio-checks{
	list-style:none;margin:26px 0 0;padding:0;
	display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;
}
.page-cardio .cardio-checks li{
	display:flex;align-items:center;gap:12px;
	color:var(--ink);font-weight:500;font-size:.97rem;line-height:1.35;
}
.page-cardio .cardio-checks__ic{
	flex:0 0 22px;width:22px;height:22px;border-radius:999px;
	display:inline-flex;align-items:center;justify-content:center;
	color:#fff;background:var(--blue);
	box-shadow:0 0 0 4px rgba(4,100,203,.10);
}
.page-cardio .cardio-checks__ic svg{width:11px;height:11px;display:block}

/* ---------- Booking Form Card ---------- */
.page-cardio .cardio-book{
	background:#fff;border:1px solid var(--cyan-200);border-radius:24px;
	padding:34px 32px 30px;
	box-shadow:0 30px 70px -30px rgba(16,40,80,.22);
	display:grid;gap:18px;
}
.page-cardio .cardio-book__head{display:grid;gap:6px;margin-bottom:6px}
.page-cardio .cardio-book__head h3{
	font-family:var(--serif);color:var(--ink);font-size:1.55rem;
	font-weight:600;margin:0;line-height:1.2;
}
.page-cardio .cardio-book__hl{color:var(--blue)}
.page-cardio .cardio-book__head p{
	margin:0;color:var(--body);font-size:.92rem;line-height:1.5;
}

.page-cardio .cardio-book__row{
	display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.page-cardio .cardio-book__field{display:grid;gap:6px}
.page-cardio .cardio-book__field > span{
	font-size:.78rem;font-weight:600;color:var(--ink);
	letter-spacing:.04em;text-transform:uppercase;
}
.page-cardio .cardio-book__field input,
.page-cardio .cardio-book__field select{
	font-family:var(--sans);font-size:.95rem;color:var(--ink);
	background:#fff;border:1.5px solid var(--cyan-200);border-radius:12px;
	padding:12px 14px;width:100%;
	transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
	appearance:none;-webkit-appearance:none;-moz-appearance:none;
}
.page-cardio .cardio-book__field input::placeholder{color:#9aa6b6}
.page-cardio .cardio-book__field input:hover,
.page-cardio .cardio-book__field select:hover{border-color:#a8c8e6}
.page-cardio .cardio-book__field input:focus,
.page-cardio .cardio-book__field select:focus{
	outline:0;border-color:var(--blue);
	box-shadow:0 0 0 4px rgba(4,100,203,.14);
}
/* Custom select caret */
.page-cardio .cardio-book__field select{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2351607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
	background-repeat:no-repeat;background-position:right 14px center;
	padding-right:36px;cursor:pointer;
}

.page-cardio .cardio-book__submit{
	font-family:var(--sans);font-weight:600;font-size:1rem;color:#fff;
	background:var(--blue);border:0;border-radius:999px;
	padding:14px 24px;margin-top:8px;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;gap:.5em;
	transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
	box-shadow:0 12px 24px -10px rgba(4,100,203,.5);
}
.page-cardio .cardio-book__submit:hover{
	background:var(--blue-dark);transform:translateY(-1px);
	box-shadow:0 16px 28px -10px rgba(4,100,203,.55);
}

.page-cardio .cardio-book__meta{
	margin:6px 0 0;font-size:.85rem;color:var(--body);text-align:center;
}
.page-cardio .cardio-book__meta a{color:var(--blue);font-weight:600}
.page-cardio .cardio-book__meta a:hover{text-decoration:underline}

/* ---------- 3 Featured Services (the page's headline section) ---------- */
.page-cardio .cardio-feat{
	display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
}
.page-cardio .cardio-feat__card{
	background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	padding:34px 32px 30px;display:flex;flex-direction:column;gap:14px;
	transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
	box-shadow:0 18px 40px -22px rgba(16,40,80,.15);
}
.page-cardio .cardio-feat__card:hover{
	transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(16,40,80,.25);
	border-color:var(--blue);
}
.page-cardio .cardio-feat__ic{
	display:inline-flex;align-items:center;justify-content:center;
	width:64px;height:64px;border-radius:18px;
	background:linear-gradient(135deg,var(--cyan-50) 0%,var(--cyan-100) 100%);
	color:var(--blue);
}
.page-cardio .cardio-feat__ic svg{width:34px;height:34px;display:block}
.page-cardio .cardio-feat__card h3{
	font-family:var(--serif);font-size:1.25rem;color:var(--ink);
	margin:8px 0 0;line-height:1.25;font-weight:600;
}
.page-cardio .cardio-feat__card p{
	margin:0;color:var(--body);font-size:.95rem;line-height:1.55;
}
.page-cardio .cardio-feat__list{
	list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;
}
.page-cardio .cardio-feat__list li{
	position:relative;padding-left:24px;color:var(--ink);font-size:.92rem;line-height:1.45;
}
.page-cardio .cardio-feat__list li::before{
	content:"";position:absolute;left:0;top:.4em;width:14px;height:14px;border-radius:999px;
	background:var(--blue);
}
.page-cardio .cardio-feat__list li::after{
	content:"";position:absolute;left:3px;top:calc(.4em + 3px);width:8px;height:8px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5 6.5 12 13 5'/></svg>") center/contain no-repeat;
}

/* ---------- Cardiac Tests grid (redesigned: icon + duration badge) ---------- */
.page-cardio .cardio-tests{
	display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;
}
.page-cardio .cardio-test{
	position:relative;background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;
	transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
	overflow:hidden;
}
.page-cardio .cardio-test::before{
	content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);
	transform:scaleY(0);transform-origin:top;transition:transform .25s ease;
}
.page-cardio .cardio-test:hover{
	transform:translateY(-4px);border-color:var(--blue);
	box-shadow:0 22px 40px -22px rgba(16,40,80,.22);
}
.page-cardio .cardio-test:hover::before{transform:scaleY(1)}

.page-cardio .cardio-test__top{
	display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;
}
.page-cardio .cardio-test__ic{
	display:inline-flex;align-items:center;justify-content:center;
	width:48px;height:48px;border-radius:14px;color:var(--blue);
	background:linear-gradient(135deg,var(--cyan-50) 0%,var(--cyan-100) 100%);
}
.page-cardio .cardio-test__ic svg{width:26px;height:26px;display:block}
.page-cardio .cardio-test__time{
	font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;color:var(--blue);background:var(--cyan-50);
	padding:6px 12px;border-radius:999px;line-height:1;white-space:nowrap;
}
.page-cardio .cardio-test__title{
	font-family:var(--serif);color:var(--ink);font-size:1.15rem;font-weight:600;
	line-height:1.25;margin:6px 0 0;
}
.page-cardio .cardio-test p{margin:0;color:var(--body);font-size:.93rem;line-height:1.55}

/* ---------- Heart Conditions Managed grid ---------- */
.page-cardio .cardio-conds{
	display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;
}
.page-cardio .cardio-cond{
	display:flex;align-items:center;gap:12px;
	background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius-sm);
	padding:18px 20px;min-height:64px;
	transition:transform .15s ease,box-shadow .15s ease;
}
.page-cardio .cardio-cond:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,40,80,.08)}
.page-cardio .cardio-cond__ic{
	flex:0 0 24px;width:24px;height:24px;border-radius:999px;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--blue);color:#fff;
}
.page-cardio .cardio-cond__ic svg{width:13px;height:13px;display:block}
.page-cardio .cardio-cond b{color:var(--ink);font-size:.95rem;font-weight:500;font-family:var(--sans);line-height:1.3}

/* ---------- Services by Cardiologist (6 procedure cards, 3-col grid) ---------- */
.page-cardio .cardio-svc{
	display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;
}
.page-cardio .cardio-svc__card{
	background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	padding:30px 28px;display:flex;flex-direction:column;gap:12px;
	transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.page-cardio .cardio-svc__card:hover{
	transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue);
}
.page-cardio .cardio-svc__ic{
	display:inline-flex;align-items:center;justify-content:center;
	width:56px;height:56px;border-radius:14px;
	background:linear-gradient(135deg,var(--cyan-50) 0%,var(--cyan-100) 100%);
	color:var(--blue);
}
.page-cardio .cardio-svc__ic svg{width:30px;height:30px;display:block}
.page-cardio .cardio-svc__card h3{
	font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);
	margin:4px 0 0;line-height:1.25;
}
.page-cardio .cardio-svc__card p{
	margin:0;color:var(--body);font-size:.93rem;line-height:1.55;
}

/* ---------- Common Cardiology Symptoms (4-col chip grid) ---------- */
.page-cardio .cardio-symps{
	display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;
}
.page-cardio .cardio-symp{
	display:flex;gap:14px;align-items:flex-start;
	background:var(--cyan-50);border:1px solid var(--cyan-200);
	border-radius:var(--radius-sm);padding:18px 18px;
	transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.page-cardio .cardio-symp:hover{
	transform:translateY(-2px);border-color:var(--blue);box-shadow:0 10px 24px rgba(16,40,80,.08);
}
.page-cardio .cardio-symp__ic{
	flex:0 0 36px;width:36px;height:36px;border-radius:10px;
	display:inline-flex;align-items:center;justify-content:center;
	background:#fff;color:var(--blue);
}
.page-cardio .cardio-symp__ic svg{width:20px;height:20px;display:block}
.page-cardio .cardio-symp b{
	display:block;color:var(--ink);font-family:var(--sans);font-size:.95rem;font-weight:600;
	line-height:1.3;margin-bottom:4px;
}
.page-cardio .cardio-symp span{
	display:block;color:var(--body);font-size:.85rem;line-height:1.45;
}

/* ---------- FAQ (mirrors the design language of Home/About cards) ---------- */
.page-cardio .cardio-faqwrap{display:grid;grid-template-columns:.95fr 1.2fr;gap:48px;align-items:start}
.page-cardio .cardio-faqhead h2{margin-top:0}
.page-cardio .cardio-faqs{display:grid;gap:14px}
.page-cardio .cardio-faq{
	background:#fff;border:1px solid var(--cyan-200);border-radius:var(--radius);
	padding:0;overflow:hidden;transition:border-color .2s ease;
}
.page-cardio .cardio-faq[open]{border-color:var(--blue)}
.page-cardio .cardio-faq summary{
	list-style:none;cursor:pointer;padding:20px 22px;
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	font-family:var(--serif);color:var(--ink);font-size:1.05rem;font-weight:600;line-height:1.35;
}
.page-cardio .cardio-faq summary::-webkit-details-marker{display:none}
.page-cardio .cardio-faq__ic{
	flex:0 0 28px;width:28px;height:28px;border-radius:999px;background:var(--cyan-50);
	position:relative;transition:background .2s ease;
}
.page-cardio .cardio-faq__ic::before,
.page-cardio .cardio-faq__ic::after{
	content:"";position:absolute;background:var(--blue);left:50%;top:50%;transform:translate(-50%,-50%);
}
.page-cardio .cardio-faq__ic::before{width:12px;height:2px}
.page-cardio .cardio-faq__ic::after{width:2px;height:12px;transition:opacity .2s ease}
.page-cardio .cardio-faq[open] .cardio-faq__ic{background:var(--blue)}
.page-cardio .cardio-faq[open] .cardio-faq__ic::before{background:#fff}
.page-cardio .cardio-faq[open] .cardio-faq__ic::after{opacity:0}
.page-cardio .cardio-faq__body{padding:0 22px 22px;color:var(--body);line-height:1.6}
.page-cardio .cardio-faq__body p{margin:0}

/* ---------- CTA (boxed, matches About Us pattern) ---------- */
.page-cardio .cardio-cta-wrap{padding:60px 0 90px}
.page-cardio .cardio-cta{
	background:#0059A6;color:#fff;border-radius:24px;padding:60px 64px;text-align:center;
	box-shadow:0 30px 60px -30px rgba(6,46,90,.45);
}
.page-cardio .cardio-cta .pill{background:rgba(255,255,255,.14);color:#fff;border-color:transparent}
.page-cardio .cardio-cta h2{color:#fff;margin:0 0 14px;max-width:24ch;margin-inline:auto}
.page-cardio .cardio-cta .lead{color:rgba(255,255,255,.92);max-width:62ch;margin:0 auto 30px}
.page-cardio .cardio-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.page-cardio .cardio-cta__ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.page-cardio .cardio-cta__ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.page-cardio .cardio-cta__meta{margin:24px 0 0;font-size:.82rem;color:rgba(255,255,255,.75)}

/* ==========================================================================
   Responsive
     mobile : 360-540  → 1-col stacks
     tablet : 541-980  → 2-col grids
     desktop: 981+     → 3-col / 4-col defaults
   ========================================================================== */

@media (max-width: 1180px){
	.page-cardio .cardio-conds{grid-template-columns:repeat(3,1fr)}
	.page-cardio .cardio-symps{grid-template-columns:repeat(3,1fr)}
	.page-cardio .cardio-faqwrap{grid-template-columns:1fr;gap:30px}
}

@media (max-width: 980px){
	.page-cardio .cardio-feat{grid-template-columns:1fr;max-width:520px;margin:36px auto 0}
	.page-cardio .cardio-tests{grid-template-columns:repeat(2,1fr)}
	.page-cardio .cardio-svc{grid-template-columns:repeat(2,1fr)}
	.page-cardio .cardio-conds{grid-template-columns:repeat(2,1fr)}
	.page-cardio .cardio-symps{grid-template-columns:repeat(2,1fr)}
	.page-cardio .cardio-cta{padding:48px 32px}
}

@media (max-width: 720px){
	.page-cardio .cardio-checks{grid-template-columns:1fr;gap:12px}
	.page-cardio .cardio-book{padding:28px 24px 26px;border-radius:18px}
	.page-cardio .cardio-book__row{grid-template-columns:1fr;gap:14px}
	.page-cardio .cardio-book__head h3{font-size:1.35rem}
}

@media (max-width: 540px){
	.page-cardio .cardio-tests{grid-template-columns:1fr;max-width:480px;margin-inline:auto;margin-top:26px}
	.page-cardio .cardio-svc{grid-template-columns:1fr;max-width:480px;margin-inline:auto;margin-top:26px}
	.page-cardio .cardio-conds{grid-template-columns:1fr;max-width:480px;margin-inline:auto;margin-top:26px}
	.page-cardio .cardio-symps{grid-template-columns:1fr;max-width:480px;margin-inline:auto;margin-top:26px}
	.page-cardio .cardio-feat__card{padding:28px 24px 26px}
	.page-cardio .cardio-feat__ic{width:54px;height:54px;border-radius:14px}
	.page-cardio .cardio-feat__ic svg{width:28px;height:28px}
	.page-cardio .cardio-svc__card{padding:26px 22px}
	.page-cardio .cardio-faq summary{padding:18px;font-size:.98rem}
	.page-cardio .cardio-cta{padding:40px 24px;border-radius:18px}
	.page-cardio .cardio-cta h2{font-size:clamp(1.6rem,5vw,2rem)}
	.page-cardio .cardio-cta__btns .btn{width:100%;justify-content:center}
}