/* IADVL Kerala - Portal selection (landing) page  (prefix: lp-) */
:root { --lp-navy: #003854; --lp-navy-2: #021f30; --lp-teal: #0b7a86; --lp-ink: #142433; --lp-muted: #5e6e7b; --lp-line: #e3e9ee; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.lp { min-height: 100vh; display: flex; flex-direction: column; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; color: var(--lp-ink); background: #f3f7f9; -webkit-font-smoothing: antialiased; }
.lp-foot a { color: inherit; }
a.lp-card { color: inherit; }
a.lp-public { color: var(--lp-ink); }
a.lp-doctors { color: #fff; }
.lp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(18px, 4vw, 48px); }
.lp-head img { width: clamp(220px, 26vw, 320px); height: auto; display: block; }
.lp-head p { margin: 0; font-size: 14px; color: var(--lp-muted); text-align: right; }
.lp-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(18px, 4vw, 48px) 32px; }
.lp-intro { text-align: center; max-width: 760px; margin: 4px auto 28px; }
.lp-intro h1 { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 10px; color: var(--lp-ink); }
.lp-intro p { margin: 0; color: var(--lp-muted); font-size: clamp(15px, 1.4vw, 17px); }
.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); max-width: 1240px; width: 100%; margin: 0 auto; }
.lp-card { position: relative; display: flex; flex-direction: column; min-height: clamp(420px, 58vh, 560px); border-radius: 28px; overflow: hidden; text-decoration: none; isolation: isolate; box-shadow: 0 2px 4px rgba(10, 30, 45, .04), 0 18px 50px rgba(10, 30, 45, .12); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; animation: lpIn .7s cubic-bezier(.2, .7, .2, 1) both; }
.lp-card:nth-child(2) { animation-delay: .08s; }
.lp-card:hover, .lp-card:focus-visible { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(10, 30, 45, .05), 0 28px 70px rgba(10, 30, 45, .2); }
.lp-card:focus-visible { outline: 4px solid rgba(11, 122, 134, .45); outline-offset: 4px; }
.lp-public { background: linear-gradient(160deg, #ffffff 0%, #e4f3f4 100%); color: var(--lp-ink); border: 1px solid #d6eaec; }
.lp-public .lp-art { position: absolute; right: -3%; bottom: -4%; width: 46%; max-width: 360px; z-index: -1; transition: transform .5s; }
.lp-public:hover .lp-art { transform: translateY(-6px) scale(1.02); }
.lp-doctors { color: #fff; background: var(--lp-navy-2); }
.lp-doctors .lp-photo { position: absolute; inset: 0; z-index: -2; background: url('doctors.jpg') center / cover no-repeat; transform: scale(1.02); transition: transform .8s; }
.lp-doctors:hover .lp-photo { transform: scale(1.07); }
.lp-doctors::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 56, 84, .82) 0%, rgba(2, 31, 48, .94) 60%, rgba(2, 31, 48, .98) 100%); }
.lp-body { position: relative; padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; height: 100%; flex: 1; }
.lp-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-public .lp-tag { background: #fff; color: var(--lp-teal); border: 1px solid #cfe7e9; }
.lp-doctors .lp-tag { background: rgba(255, 255, 255, .12); color: #cfe6ef; border: 1px solid rgba(255, 255, 255, .2); }
.lp-card h2 { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.02em; line-height: 1.08; margin: 22px 0 10px; }
.lp-sub { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; font-weight: 600; font-size: clamp(16px, 1.5vw, 19px); margin: 0 0 14px; }
.lp-public .lp-sub { color: var(--lp-teal); max-width: 70%; }
.lp-doctors .lp-sub { color: #9fd3dc; }
.lp-desc { font-size: 15.5px; line-height: 1.65; max-width: 430px; margin: 0; }
.lp-public .lp-desc { color: #3f505d; max-width: 56%; }
.lp-doctors .lp-desc { color: #c9d8e1; }
.lp-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14.5px; }
.lp-list li { display: flex; gap: 10px; align-items: center; }
.lp-list svg { flex: 0 0 18px; }
.lp-public .lp-list { color: #2c3d4a; max-width: 56%; }
.lp-doctors .lp-list { color: #dce8ee; }
.lp-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; transition: gap .25s, background .25s; }
.lp-btn svg { transition: transform .25s; }
.lp-card:hover .lp-btn svg { transform: translateX(4px); }
.lp-public .lp-btn { background: var(--lp-teal); color: #fff; box-shadow: 0 10px 24px rgba(11, 122, 134, .3); }
.lp-doctors .lp-btn { background: #fff; color: var(--lp-navy); }
.lp-spacer { height: 26px; }
.lp-foot { padding: 18px clamp(18px, 4vw, 48px) 22px; display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font-size: 13.5px; color: var(--lp-muted); border-top: 1px solid var(--lp-line); background: #fff; }
.lp-foot a { color: var(--lp-navy); text-decoration: none; }
.lp-foot a:hover { text-decoration: underline; }
.lp-foot span { display: inline-flex; gap: 6px; align-items: center; }
@keyframes lpIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
	.lp-cards { grid-template-columns: 1fr; }
	.lp-card { min-height: 0; }
	.lp-public .lp-art { width: 46%; right: -4%; bottom: -6%; opacity: .95; }
	.lp-public .lp-desc, .lp-public .lp-list { max-width: 64%; }
	.lp-head p { display: none; }
	.lp-head { justify-content: center; }
}
@media (max-width: 560px) {
	.lp-public .lp-art, .lp-list { display: none; }
	.lp-intro { margin-bottom: 18px; }
	.lp-card h2 { margin-top: 14px; }
	.lp-desc { font-size: 14.5px; }
	.lp-body { padding: 24px 22px; }
	.lp-public .lp-desc, .lp-public .lp-list { max-width: none; }
	.lp-btn { align-self: stretch; justify-content: center; }
	.lp-spacer { height: 18px; }
	.lp-foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .lp-card, .lp-card:hover, .lp-photo, .lp-art { animation: none !important; transition: none !important; transform: none !important; } }
