/* SpeakBrit Faculty — front end */

:root { --sbf-navy: #0B2545; --sbf-accent: #C9A227; --sbf-cream: #F9F9F7; --sbf-muted: #6B7A8F; }

.sbf-grid { display: grid; gap: 32px; margin: 32px 0; }
.sbf-cols-1 { grid-template-columns: repeat(1, 1fr); }
.sbf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sbf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sbf-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sbf-cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px) { .sbf-cols-4, .sbf-cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .sbf-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; } }
@media (max-width: 480px)  { .sbf-grid { grid-template-columns: 1fr !important; } }

.sbf-card { text-align: center; }
.sbf-card-link { display: block; text-decoration: none; color: inherit; }
.sbf-card-link:hover .sbf-photo { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(11,37,69,.18); }
.sbf-card-link:hover .sbf-name { color: var(--sbf-accent); }

.sbf-photo {
	position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: 50%; background: var(--sbf-cream);
	border: 3px solid var(--sbf-navy);
	transition: transform .25s ease, box-shadow .25s ease;
	display: flex; align-items: center; justify-content: center;
	max-width: 260px; margin: 0 auto 18px;
}
.sbf-photo .sbf-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbf-placeholder { font-size: 46px; color: #C9D2DD; }

.sbf-name { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.3; color: var(--sbf-navy); transition: color .2s ease; }
.sbf-role { margin: 0 0 6px; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sbf-accent); font-weight: 600; }
.sbf-tag  { margin: 0; font-size: .92rem; color: var(--sbf-muted); line-height: 1.45; }
.sbf-soon { margin: 8px 0 0; font-size: .82rem; font-style: italic; color: var(--sbf-muted); }

.sbf-card-coming .sbf-photo { border-style: dashed; opacity: .65; }
.sbf-empty { text-align: center; color: var(--sbf-muted); font-style: italic; padding: 40px 0; }

/* ---- profile page ---- */
.sbf-profile-wrap { padding: 48px 20px 72px; }
.sbf-profile { max-width: 860px; margin: 0 auto; }

.sbf-profile-head { display: flex; gap: 36px; align-items: flex-start; margin-bottom: 40px; flex-wrap: wrap; }
.sbf-profile-photo {
	flex: 0 0 220px; width: 220px; height: 220px; border-radius: 50%; overflow: hidden;
	border: 4px solid var(--sbf-navy); background: var(--sbf-cream);
	display: flex; align-items: center; justify-content: center;
}
.sbf-profile-photo .sbf-img { width: 100%; height: 100%; object-fit: cover; }
.sbf-profile-intro { flex: 1 1 340px; min-width: 280px; }
.sbf-profile-name { margin: 0 0 6px; color: var(--sbf-navy); font-size: 2.1rem; line-height: 1.15; }
.sbf-profile-role { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; font-size: .88rem; font-weight: 700; color: var(--sbf-accent); }
.sbf-profile-tag  { margin: 0 0 16px; color: var(--sbf-muted); font-size: 1.02rem; }

.sbf-badge {
	display: inline-block; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px;
	background: rgba(11,37,69,.06); color: var(--sbf-navy);
	font-size: .84rem; font-weight: 600;
}
.sbf-badge span { color: #1F8A4C; margin-right: 6px; font-weight: 700; }

.sbf-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sbf-specs li {
	background: var(--sbf-cream); border: 1px solid rgba(11,37,69,.14);
	color: var(--sbf-navy); border-radius: 999px; padding: 5px 13px; font-size: .82rem;
}

.sbf-video { margin: 0 0 40px; }
.sbf-video iframe, .sbf-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; background: #000; }

.sbf-bio { font-size: 1.05rem; line-height: 1.75; color: #23303f; margin-bottom: 36px; }
.sbf-bio p { margin: 0 0 1.1em; }

.sbf-quals { margin-bottom: 40px; }
.sbf-quals h2, .sbf-cta h2 { color: var(--sbf-navy); font-size: 1.3rem; margin: 0 0 14px; }
.sbf-quals ul { margin: 0; padding-left: 20px; line-height: 1.85; color: #23303f; }

.sbf-cta {
	background: var(--sbf-navy); color: #fff; border-radius: 12px;
	padding: 34px 30px; text-align: center; margin-bottom: 28px;
}
.sbf-cta h2 { color: #fff; }
.sbf-cta p { margin: 0 0 20px; opacity: .88; }
.sbf-btn {
	display: inline-block; background: var(--sbf-accent); color: var(--sbf-navy);
	padding: 13px 30px; border-radius: 8px; font-weight: 700; text-decoration: none;
	transition: transform .2s ease, filter .2s ease;
}
.sbf-btn:hover { transform: translateY(-2px); filter: brightness(1.07); color: var(--sbf-navy); }

.sbf-back { text-align: center; }
.sbf-back a { color: var(--sbf-muted); text-decoration: none; font-size: .92rem; }
.sbf-back a:hover { color: var(--sbf-navy); }

@media (max-width: 640px) {
	.sbf-profile-head { flex-direction: column; align-items: center; text-align: center; }
	.sbf-specs { justify-content: center; }
	.sbf-profile-name { font-size: 1.7rem; }
}