/* About page (/about/) — extends the homepage design system (--jh-* tokens). */

/* Hero card */
.jss-about-hero-card {
	padding: 30px; background: #fff; border: 1px solid var(--jh-line);
	border-radius: 20px; box-shadow: var(--jh-shadow);
}
.jss-about-hero-card > strong { display: block; margin-bottom: 14px; color: var(--jh-navy); font-size: 17px; }
.jss-about-hero-steps { display: grid; gap: 12px; }
.jss-about-hero-steps span { display: flex; gap: 10px; align-items: center; color: var(--jh-muted); font-size: 14px; font-weight: 600; }
.jss-about-hero-steps i {
	display: grid; width: 34px; height: 34px; min-width: 34px; place-items: center;
	background: linear-gradient(135deg, var(--jh-blue), var(--jh-cyan));
	border-radius: 10px; color: #fff; font-style: normal; font-weight: 900;
}

/* Reveal on scroll */
.jss-about-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.jss-about-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .jss-about-reveal { opacity: 1; transform: none; transition: none; } }

/* Story section */
.jss-about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.jss-about-story h2 { margin: 6px 0 14px !important; color: var(--jh-navy) !important; font-size: clamp(26px, 3vw, 38px) !important; }
.jss-about-lead { color: var(--jh-muted); font-size: 17px; }
.jss-about-features { display: grid; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.jss-about-features li { position: relative; padding-left: 30px; color: var(--jh-muted); font-size: 15px; }
.jss-about-features li::before {
	content: "✓"; position: absolute; left: 0; top: 1px;
	display: grid; width: 21px; height: 21px; place-items: center;
	background: #e2f3ea; border-radius: 50%; color: #1d7a4c; font-size: 12px; font-weight: 900;
}
.jss-about-features strong { color: var(--jh-ink); }
.jss-about-flow { display: grid; gap: 14px; }
.jss-about-flow-step {
	display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 22px;
	background: #fff; border: 1px solid var(--jh-line); border-radius: 16px;
	box-shadow: 0 10px 28px rgba(17, 53, 82, .06);
}
.jss-about-flow-step i {
	display: grid; width: 48px; height: 48px; place-items: center;
	background: var(--jh-navy); border-radius: 13px; color: #fff; font-style: normal; font-weight: 900;
}
.jss-about-flow-step:nth-child(2) i { background: var(--jh-blue); }
.jss-about-flow-step:nth-child(3) i { background: var(--jh-cyan); }
.jss-about-flow-step h3 { margin: 2px 0 5px !important; color: var(--jh-navy) !important; font-size: 17px !important; }
.jss-about-flow-step p { margin: 0; color: var(--jh-muted); font-size: 13px; }

/* Timeline */
.jss-about-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.jss-about-timeline li {
	position: relative; padding: 22px; background: #fff; border: 1px solid var(--jh-line);
	border-radius: 16px; box-shadow: 0 10px 28px rgba(17, 53, 82, .05);
}
.jss-about-timeline li::before {
	content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 4px;
	background: linear-gradient(90deg, var(--jh-blue), var(--jh-cyan)); border-radius: 0 0 4px 4px;
}
.jss-about-tl-year {
	display: inline-block; margin-bottom: 8px; padding: 4px 10px;
	background: #edf5fd; border-radius: 999px; color: #356281; font-size: 11px; font-weight: 800;
}
.jss-about-timeline h3 { margin: 0 0 6px !important; color: var(--jh-navy) !important; font-size: 16px !important; }
.jss-about-timeline p { margin: 0; color: var(--jh-muted); font-size: 13px; }

/* Program filters + cards */
.jss-about-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.jss-about-filters button {
	min-height: 40px; padding: 8px 16px; background: #fff; border: 1px solid var(--jh-line);
	border-radius: 999px; color: #294a67; font-size: 13px; font-weight: 700; cursor: pointer;
}
.jss-about-filters button:hover { border-color: var(--jh-blue); color: var(--jh-blue); }
.jss-about-filters button.is-active { background: var(--jh-navy); border-color: var(--jh-navy); color: #fff; }
.jss-about-prog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jss-about-prog {
	display: flex; min-width: 0; padding: 22px; flex-direction: column;
	background: #fff; border: 1px solid var(--jh-line); border-radius: 17px;
	box-shadow: 0 10px 28px rgba(17, 53, 82, .06); transition: .2s ease;
}
.jss-about-prog:hover { transform: translateY(-3px); border-color: #a9c8e2; box-shadow: 0 16px 36px rgba(17, 53, 82, .1); }
.jss-about-prog.is-hidden { display: none; }
.jss-about-prog-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jss-about-prog-icon {
	display: grid; width: 46px; height: 46px; min-width: 46px; place-items: center;
	background: linear-gradient(135deg, #e0edff, #dff8fb); border-radius: 13px; font-size: 22px;
}
.jss-about-badge { padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 850; line-height: 1.4; text-align: center; }
.jss-about-badge.is-inter { background: #edf5fd; color: #1c5c96; }
.jss-about-badge.is-adv { background: #f3f0ff; color: #563cab; }
.jss-about-badge.is-free { background: #e2f3ea; color: #1d7a4c; }
.jss-about-badge.is-dev { background: #fff0cf; color: #815708; }
.jss-about-prog h3 { margin: 0 0 8px !important; color: var(--jh-navy) !important; font-size: 18px !important; }
.jss-about-who { margin: 0 0 10px; color: var(--jh-muted); font-size: 13px; }
.jss-about-who strong { color: var(--jh-ink); }
.jss-about-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.jss-about-tags span { padding: 3px 9px; background: var(--jh-soft); border: 1px solid #e0e9f0; border-radius: 999px; color: #3d5a74; font-size: 11px; font-weight: 700; }
.jss-about-prog-meta { display: flex; gap: 12px; margin-top: auto; color: var(--jh-muted); font-size: 12px; font-weight: 700; }
.jss-about-prog-link { margin-top: 12px; color: var(--jh-blue) !important; font-size: 14px; font-weight: 850; text-decoration: none !important; }
.jss-about-prog-link:hover { text-decoration: underline !important; }
.jss-about-prog-cta {
	align-items: center; justify-content: center; text-align: center;
	background: linear-gradient(150deg, #eef6ff, #e9fbf4); border-color: #cfe1ed;
}
.jss-about-prog-cta p { color: var(--jh-muted); font-size: 14px; }

/* Member map */
.jss-about-map {
	position: relative; height: 420px; margin-bottom: 40px;
	background-color: #f4f8fc; background-repeat: no-repeat; background-position: center; background-size: contain;
	border: 1px solid var(--jh-line); border-radius: 20px; box-shadow: var(--jh-shadow);
}
.jss-about-pin { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; cursor: pointer; }
.jss-about-pin img { width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(10, 40, 65, .25); object-fit: cover; }
.jss-about-hub {
	display: grid; width: 44px; height: 44px; place-items: center;
	background: var(--jh-blue); border: 2px solid #fff; border-radius: 50%;
	color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 6px 16px rgba(10, 40, 65, .25);
}
.jss-about-hub.is-alt { background: #c32e8f; }
.jss-about-tip {
	position: absolute; z-index: 5; bottom: 52px; left: 50%; width: 230px; padding: 12px 14px;
	background: #fff; border: 1px solid var(--jh-line); border-radius: 12px;
	box-shadow: 0 16px 36px rgba(10, 40, 65, .18); transform: translateX(-50%);
	opacity: 0; pointer-events: none; transition: .18s ease; text-align: left;
}
.jss-about-pin:hover .jss-about-tip, .jss-about-pin:focus .jss-about-tip, .jss-about-pin:focus-within .jss-about-tip { opacity: 1; pointer-events: auto; }
.jss-about-tip strong { display: block; color: var(--jh-navy); font-size: 13px; }
.jss-about-tip span { display: block; margin: 3px 0 6px; color: var(--jh-muted); font-size: 12px; line-height: 1.45; }
.jss-about-tip a { color: var(--jh-blue) !important; font-size: 12px; font-weight: 750; text-decoration: none !important; }

/* Employers */
.jss-about-employers { margin-bottom: 44px; text-align: center; }
.jss-about-emp-label { display: block; margin-bottom: 16px; color: var(--jh-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jss-about-emp-row { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: center; }
.jss-about-emp-row img { max-height: 34px; width: auto; opacity: .8; filter: grayscale(20%); transition: .2s; }
.jss-about-emp-row img:hover { opacity: 1; filter: none; }

/* LinkedIn member cards */
.jss-about-li-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 44px; }
.jss-about-li-card {
	display: grid; padding: 20px 16px; justify-items: center; gap: 6px;
	background: #fff; border: 1px solid var(--jh-line); border-radius: 16px;
	box-shadow: 0 10px 28px rgba(17, 53, 82, .05); text-align: center;
}
.jss-about-li-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.jss-about-li-card strong { color: var(--jh-navy); font-size: 14px; }
.jss-about-li-card span { color: var(--jh-muted); font-size: 12px; line-height: 1.45; }
.jss-about-li-card a { color: var(--jh-blue) !important; font-size: 12px; font-weight: 800; text-decoration: none !important; }
.jss-about-li-card a:hover { text-decoration: underline !important; }

/* Carousel tweaks (reuses homepage review-stage) */
.jss-about-carousel .jss-home-review[hidden] { display: none; }
.jss-about-story-note { margin-top: 14px; color: var(--jh-muted); font-size: 12px; text-align: center; }

/* Videos */
.jss-about-vid-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.jss-about-vid-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jss-about-vid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.jss-about-yt {
	position: relative; display: block; width: 100%; padding: 0; overflow: hidden;
	background: var(--jh-navy); border: 1px solid var(--jh-line); border-radius: 16px; cursor: pointer;
	aspect-ratio: 16 / 9; text-align: left;
}
.jss-about-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: .25s ease; }
.jss-about-yt:hover img { opacity: 1; transform: scale(1.02); }
.jss-about-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jss-about-play {
	position: absolute; inset: 0; display: grid; place-items: center;
}
.jss-about-play svg {
	width: 64px; height: 64px; padding: 18px; box-sizing: border-box;
	background: rgba(9, 47, 82, .85); border-radius: 50%; fill: #fff;
	transition: .2s ease;
}
.jss-about-yt:hover .jss-about-play svg { background: var(--jh-blue); transform: scale(1.08); }
.jss-about-yt-title {
	position: absolute; right: 0; bottom: 0; left: 0; padding: 24px 14px 10px;
	background: linear-gradient(transparent, rgba(6, 24, 40, .85));
	color: #fff; font-size: 13px; font-weight: 750;
}
.jss-about-channel {
	display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
	margin-top: 20px; padding: 22px 26px; background: #fff;
	border: 1px solid var(--jh-line); border-radius: 16px; box-shadow: var(--jh-shadow);
}
.jss-about-channel-stats { display: flex; gap: 30px; }
.jss-about-channel-stats div { display: grid; }
.jss-about-channel-stats b { color: var(--jh-navy); font-size: 22px; }
.jss-about-channel-stats small { color: var(--jh-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }

/* Final CTA inherits .jss-home-final */
.jss-about-page .jss-home-final h2 { color: var(--jh-navy) !important; }
.jss-about-page .jss-home-final p { color: var(--jh-muted); }

/* Responsive */
@media (max-width: 1060px) {
	.jss-about-timeline { grid-template-columns: repeat(2, 1fr); }
	.jss-about-prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jss-about-li-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.jss-about-grid { grid-template-columns: 1fr; }
	.jss-about-vid-grid { grid-template-columns: 1fr; }
	.jss-about-map { height: 340px; }
}
@media (max-width: 700px) {
	.jss-about-timeline { grid-template-columns: 1fr; }
	.jss-about-prog-grid { grid-template-columns: 1fr; }
	.jss-about-li-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jss-about-vid-row { grid-template-columns: 1fr; }
	.jss-about-channel { justify-content: center; text-align: center; }
	.jss-about-channel-stats { gap: 20px; }
	.jss-about-map { height: 280px; }
	.jss-about-pin, .jss-about-pin img, .jss-about-hub { width: 34px; height: 34px; }
	.jss-about-pin { margin: -17px 0 0 -17px; }
	.jss-about-hub { font-size: 9px; }
}