/* ============================================================
   Telehealth Hub — page-specific styles
   Loaded only on template-telehealth.php (see functions.php).
   Design tokens live in :root inside global.css — don't hard-code hex.
   ============================================================ */

/* === BREADCRUMB === */
.breadcrumb{max-width:1440px;margin:0 auto;padding:24px 100px}
.breadcrumb-list{display:flex;align-items:center;gap:8px}
.breadcrumb-link{font-size:16px;line-height:22px;color:var(--color-grey-9);transition:color var(--transition-fast)}
.breadcrumb-link:hover{color:var(--color-primary-blue)}
.breadcrumb-sep{width:18px;height:18px;flex-shrink:0}
.breadcrumb-current{font-size:16px;line-height:22px;color:var(--color-blue-n4)}

/* === PAGE HERO === */
.page-hero-wrapper{max-width:1440px;margin:0 auto;padding:0 100px}
.page-hero{width:100%;height:580px;border-radius:var(--radius-xl);overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:60px 170px}
.page-hero-bg{position:absolute;inset:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.8))}
.page-hero-bg--placeholder{background:linear-gradient(135deg,var(--color-blue-1),var(--color-primary-blue))}
.page-hero-content{position:relative;z-index:1;text-align:center;width:862px;max-width:100%}
.page-hero-sub{font-size:18px;line-height:24px;color:var(--color-grey-0);text-shadow:0 4px 12px rgba(0,0,0,.12);margin-bottom:12px}
.page-hero-title{font-size:72px;line-height:80px;font-weight:var(--fw-semibold);color:var(--color-grey-0);text-shadow:0 4px 12px rgba(0,0,0,.12)}

/* === TELEHEALTH INTRO === */
.tele-intro{max-width:1440px;margin:160px auto 0;padding:0 100px}
.tele-intro-inner{display:flex;flex-direction:column;align-items:center;gap:32px;padding-top:20px;max-width:958px;margin:0 auto}
.tele-intro-line{width:3px;height:80px;background:var(--color-primary-green);border-radius:2px}
.tele-intro-text{font-size:20px;line-height:26px;color:var(--color-grey-9);text-align:center}

/* === WHAT IS TELEHEALTH === */
.tele-what{max-width:1440px;margin:80px auto 0;padding:0 100px}
.tele-what-card{background:var(--color-grey-2);border-radius:var(--radius-xl);overflow:hidden;padding:48px 40px;position:relative;min-height:536px}
.tele-what-text{width:400px;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;height:100%;min-height:440px}
.tele-what-title{font-size:32px;line-height:40px;font-weight:var(--fw-semibold);color:var(--color-blue-1)}
.tele-what-desc{font-size:18px;line-height:24px;color:var(--color-grey-9);margin-top:16px}
.tele-what-right{position:absolute;right:40px;top:48px;bottom:48px;display:flex;align-items:center;gap:0}
.tele-what-images{position:relative;width:332px;flex-shrink:0}
.tele-what-img-back{width:300px;height:380px;border-radius:var(--radius-lg);overflow:hidden;position:absolute;left:0;top:32px;opacity:.5}
.tele-what-img-back img{width:100%;height:100%;object-fit:cover}
.tele-what-img-back::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 35%,rgba(233,236,239,.98))}
.tele-what-img-front{width:300px;height:380px;border-radius:var(--radius-lg);overflow:hidden;position:relative;left:32px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:1}
.tele-what-img-front img{width:100%;height:100%;object-fit:cover}

.tele-slide-card{width:440px;height:440px;background:var(--color-grey-0);border-radius:var(--radius-xl);box-shadow:0 4px 12px rgba(0,0,0,.02);display:flex;align-items:center;justify-content:flex-end;padding:32px;margin-left:-30px;position:relative;z-index:2}
.tele-slide-inner{width:336px;display:flex;flex-direction:column;gap:24px}
.tele-slide-content{overflow:hidden;position:relative}
.tele-slide-item{display:none;flex-direction:column;gap:16px}
.tele-slide-item.is-active{display:flex}
.tele-slide-title{font-size:24px;line-height:30px;font-weight:var(--fw-medium);color:var(--color-blue-1)}
.tele-slide-text{font-size:18px;line-height:24px;color:var(--color-grey-9)}
.tele-slide-nav{display:flex;align-items:center;gap:32px}
.tele-nav-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:var(--radius-full);border:none;cursor:pointer;flex-shrink:0;transition:background var(--transition-fast)}
.tele-nav-btn--prev{background:var(--color-grey-5)}.tele-nav-btn--prev:hover{background:var(--color-grey-6)}
.tele-nav-btn--next{background:var(--color-primary-blue)}.tele-nav-btn--next:hover{background:var(--color-blue-n3)}
.tele-nav-btn svg{width:20px;height:20px}
.tele-nav-btn:focus-visible{outline:2px solid var(--color-blue-n3);outline-offset:2px}
.tele-nav-dots{display:flex;gap:8px;align-items:center}
.tele-nav-dot{width:10px;height:10px;border-radius:50%;background:var(--color-grey-5);border:none;cursor:pointer;padding:0;transition:background var(--transition-fast)}
.tele-nav-dot.active{background:var(--color-primary-blue)}
.tele-nav-dot:focus-visible{outline:2px solid var(--color-blue-n3);outline-offset:2px}

/* === HOW TO SCHEDULE === */
.tele-schedule{max-width:1440px;margin:160px auto 0;padding:0 100px}
.tele-schedule-header{text-align:center;margin-bottom:36px}
.tele-schedule-title{font-size:32px;line-height:40px;font-weight:var(--fw-semibold);color:var(--color-blue-1);max-width:720px;margin:0 auto}
.tele-schedule-sub{font-size:18px;line-height:24px;color:var(--color-grey-9);margin-top:16px}
.tele-schedule-cards{display:flex;gap:20px;justify-content:center}
.tele-step-card{width:400px;min-height:220px;background:var(--color-grey-0);border-radius:var(--radius-lg);padding:24px;box-shadow:0 4px 12px rgba(0,0,0,.02);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.tele-step-icon{width:54px;height:54px;border-radius:var(--radius-full);border:1px solid var(--color-grey-5);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tele-step-icon svg{width:20px;height:20px}
.tele-step-text{font-size:18px;line-height:24px;color:var(--color-grey-9)}

/* === TELEHEALTH DETAILS === */
.tele-details{max-width:1440px;margin:96px auto 0;padding:0 100px}
.tele-details-inner{background:var(--color-grey-0);border:1px solid var(--color-grey-3);border-radius:var(--radius-xl);padding:48px;box-shadow:0 4px 12px rgba(0,0,0,.02)}
.tele-details-header{max-width:820px;margin:0 auto 36px;text-align:center}
.tele-details-kicker{font-size:14px;line-height:20px;font-weight:var(--fw-semibold);color:var(--color-primary-green);text-transform:uppercase;letter-spacing:0}
.tele-details-title{font-size:32px;line-height:40px;font-weight:var(--fw-semibold);color:var(--color-blue-1);margin-top:8px}
.tele-details-sub{font-size:18px;line-height:26px;color:var(--color-grey-9);margin-top:14px}
.tele-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tele-detail-card{background:var(--color-grey-2);border-radius:var(--radius-lg);padding:28px}
.tele-detail-card h3,
.tele-safety-note h3,
.tele-info-row h3{font-size:22px;line-height:28px;font-weight:var(--fw-semibold);color:var(--color-blue-1)}
.tele-detail-card ul{display:grid;gap:12px;margin-top:18px;padding-left:20px}
.tele-detail-card li{font-size:16px;line-height:24px;color:var(--color-grey-9)}
.tele-safety-note{margin-top:20px;background:rgba(11,69,128,.08);border-left:4px solid var(--color-primary-blue);border-radius:var(--radius-lg);padding:24px 28px}
.tele-safety-note p,
.tele-info-row p{font-size:16px;line-height:24px;color:var(--color-grey-9);margin-top:10px}
.tele-info-row{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;margin-top:20px;background:var(--color-grey-2);border-radius:var(--radius-lg);padding:28px}
.tele-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tele-related a{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--color-grey-5);border-radius:var(--radius-md);font-size:14px;line-height:20px;font-weight:var(--fw-semibold);color:var(--color-blue-1);background:var(--color-grey-0);text-align:center;transition:border-color var(--transition-fast),color var(--transition-fast)}
.tele-related a:hover,
.tele-related a:focus{border-color:var(--color-primary-blue);color:var(--color-primary-blue)}
.tele-faq{margin-top:44px}
.tele-faq h2{font-size:28px;line-height:36px;font-weight:var(--fw-semibold);color:var(--color-blue-1);text-align:center}
.tele-faq-list{display:grid;gap:12px;margin-top:24px}
.tele-faq details{background:var(--color-grey-2);border-radius:var(--radius-md);padding:18px 20px}
.tele-faq summary{cursor:pointer;font-size:17px;line-height:24px;font-weight:var(--fw-semibold);color:var(--color-blue-1)}
.tele-faq details p{font-size:16px;line-height:24px;color:var(--color-grey-9);margin-top:10px}

/* === CTA SECTION (homepage partial reused here) === */
/* Spacing only — CTA card styles come from global. */
.cta-section{max-width:1440px;margin:160px auto 0;padding:0 100px}

/* === RESPONSIVE === */
@media(max-width:1279px){
	.breadcrumb{padding:24px 32px}
	.page-hero-wrapper{padding:0 32px}
	.page-hero{padding:60px 80px}
	.tele-intro{padding:0 32px}
	.tele-what{padding:0 32px}
	.tele-what-text{width:340px}
	.tele-slide-card{width:380px}
	.tele-slide-inner{width:300px}
	.tele-schedule{padding:0 32px}
	.tele-details{padding:0 32px}
	.tele-info-row{grid-template-columns:1fr}
	.cta-section{padding:0 32px}
}

@media(max-width:991px){
	.breadcrumb{padding:16px 16px}
	.page-hero-wrapper{padding:0 16px}
	.page-hero{height:580px;padding:32px 24px;border-radius:var(--radius-lg);align-items:flex-start;justify-content:flex-end}
	.page-hero-content{width:100%;text-align:center}
	.page-hero-sub{font-size:16px;line-height:22px}
	.page-hero-title{font-size:40px;line-height:46px}

	.tele-intro{padding:0 16px;margin-top:116px}
	.tele-intro-text{font-size:18px;line-height:24px}

	.tele-what{padding:0 16px;margin-top:72px}
	.tele-what-card{padding:32px 20px;min-height:auto;border-radius:var(--radius-lg)}
	.tele-what-text{width:100%;min-height:auto;margin-bottom:24px}
	.tele-what-title{font-size:24px;line-height:30px}
	.tele-what-desc{font-size:16px;line-height:22px}
	.tele-what-right{position:relative;right:auto;top:auto;bottom:auto;flex-direction:column;align-items:center;width:100%}
	.tele-what-images{width:100%;height:300px;margin-bottom:24px}
	.tele-what-img-back{display:none}
	.tele-what-img-front{width:100%;height:300px;left:0;border-radius:var(--radius-lg)}

	.tele-slide-card{width:100%;height:auto;margin-left:0;padding:24px;border-radius:var(--radius-lg)}
	.tele-slide-inner{width:100%}
	.tele-slide-title{font-size:20px;line-height:26px}
	.tele-slide-text{font-size:16px;line-height:22px}
	.tele-nav-btn{width:48px;height:48px}
	.tele-nav-btn svg{width:18px;height:18px}

	.tele-schedule{padding:0 16px;margin-top:116px}
	.tele-schedule-title{font-size:24px;line-height:30px}
	.tele-schedule-sub{font-size:16px;line-height:22px}
	.tele-schedule-cards{flex-direction:column;gap:16px}
	.tele-step-card{width:100%;min-height:200px}
	.tele-step-text{font-size:16px;line-height:22px}

	.tele-details{padding:0 16px;margin-top:72px}
	.tele-details-inner{padding:32px 20px;border-radius:var(--radius-lg)}
	.tele-details-title{font-size:24px;line-height:30px}
	.tele-details-sub{font-size:16px;line-height:24px}
	.tele-details-grid{grid-template-columns:1fr}
	.tele-detail-card{padding:22px}
	.tele-info-row{padding:22px}
	.tele-related{grid-template-columns:1fr}
	.tele-faq h2{font-size:24px;line-height:30px}

	.cta-section{padding:0 16px;margin-top:116px}
}

@media(max-width:575px){
	.breadcrumb{padding:12px 12px}
	.page-hero-wrapper{padding:0 12px}
	.tele-intro{padding:0 12px}
	.tele-what{padding:0 12px}
	.tele-schedule{padding:0 12px}
	.tele-details{padding:0 12px}
	.cta-section{padding:0 12px}
}