/* WorkScout Platform — company directory and company profiles, mobile first.
   The directory header comes from jobs.css, the profile layout from job.css. */

/* ---------- Directory ---------- */
.wsp-csearch {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	max-width: 560px;
	padding: 6px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(9, 29, 46, 0.08);
}

.wsp-csearch .wsp-search__field { border: 0; min-height: 44px; }
.wsp-csearch .wsp-search__btn { border-radius: 999px; min-height: 44px; }

.wsp-cdir__in { max-width: 1232px; margin: 0 auto; padding: 24px 16px 48px; }
.wsp-cdir__in > .wsp-list__count { margin-bottom: 16px; }
.wsp-cdir__in > .wsp-list__count a { color: var(--wsp-action); margin-left: 8px; }

.wsp-cdir__group + .wsp-cdir__group { margin-top: 40px; }

.wsp-cdir .wsp-cdir__title {
	margin: 0 0 6px;
	color: var(--wsp-ink);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.wsp-cdir__lead { margin: 0 0 16px; color: var(--wsp-muted); font-size: 14px; }
.wsp-cdir__group > .wsp-cdir__title + .wsp-cgrid { margin-top: 16px; }

.wsp-cgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) { .wsp-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
	.wsp-cdir__in { padding: 48px 16px 72px; }
	.wsp-cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.wsp-cdir .wsp-cdir__title { font-size: 28px; }
}

.wsp-ccard { margin: 0; padding: 0; list-style: none; }

.wsp-ccard a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	border: 1px solid var(--wsp-line);
	border-radius: var(--wsp-radius);
	background: #fff;
	text-decoration: none;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.wsp-ccard a:hover { border-color: #cfe6f8; box-shadow: 0 8px 24px rgba(9, 29, 46, 0.08); }
.wsp-ccard a:focus-visible { outline: 3px solid var(--wsp-action); outline-offset: 2px; }

.wsp-ccard__text { display: grid; gap: 2px; min-width: 0; }
.wsp-ccard__name { color: var(--wsp-ink); font-weight: 600; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.wsp-ccard__place { color: var(--wsp-muted); font-size: 13px; }
.wsp-ccard__jobs { margin-top: 4px; color: var(--wsp-action); font-weight: 600; font-size: 13px; }
.wsp-ccard.is-quiet .wsp-ccard__jobs { color: var(--wsp-muted); font-weight: 400; }

/* ---------- Profile ---------- */
.wsp-chero__org { display: flex; align-items: center; gap: 16px; }
.wsp-jlogo--xl { width: 72px; height: 72px; border-radius: 16px; padding: 8px; }
.wsp-chero__tag { margin: 8px 0 0; max-width: 680px; color: var(--wsp-text); font-size: 15px; line-height: 1.5; }
.wsp-chero .wsp-jhero__loc { margin: 8px 0 0; }

.wsp-chero__count { margin: 0; color: var(--wsp-text); font-size: 14px; text-align: center; }
.wsp-chero__count strong { color: var(--wsp-ink); font-size: 22px; }

@media (min-width: 1025px) {
	.wsp-jlogo--xl { width: 96px; height: 96px; }
	.wsp-chero .wsp-jhero__in { padding-top: 28px; }
	.wsp-chero__org { margin-top: 20px; }
}

.wsp-cjobs { margin-bottom: 40px; }
.wsp-cjobs__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .wsp-cjobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wsp-note--calm { background: var(--wsp-sky); color: var(--wsp-ink); font-weight: 400; }
.wsp-note--calm a { color: var(--wsp-action); font-weight: 600; }

.wsp-cvideo { margin-top: 32px; }
.wsp-cvideo__link {
	position: relative;
	display: block;
	max-width: 560px;
	overflow: hidden;
	border-radius: var(--wsp-radius);
	background: var(--wsp-ink);
	color: #fff;
	text-decoration: none;
}

.wsp-cvideo__link img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.85; }

.wsp-cvideo__play {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--wsp-ink);
	font-weight: 600;
	font-size: 14px;
}

.wsp-cvideo__play::before { content: ""; width: 0; height: 0; border-left: 10px solid #c4302b; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.wsp-cvideo__link:not(:has(img)) { padding: 24px 16px 72px; }
.wsp-cvideo__link:focus-visible { outline: 3px solid var(--wsp-action); outline-offset: 3px; }

/* Reviews (MAS Company Reviews markup, restyled lightly) */
.wsp-creviews { background: var(--wsp-sky); }
.wsp-creviews__in { max-width: 1232px; margin: 0 auto; padding: 40px 16px 56px; }
.wsp-creviews__in > * { max-width: 760px; }
.wsp-creviews h3 { color: var(--wsp-ink); font-weight: 700; font-size: 22px; text-transform: none; letter-spacing: normal; }
.wsp-creviews textarea,
.wsp-creviews input[type="text"],
.wsp-creviews input[type="email"] { border: 1px solid var(--wsp-line); border-radius: 10px; background: #fff; }
.wsp-creviews input[type="submit"] { border: 0; border-radius: 999px; background: var(--wsp-action); color: #fff; font-weight: 600; }
.wsp-creviews input[type="submit"]:hover { background: var(--wsp-action-dark); }

/* Employer call to action under the directory header */
.wsp-cdir__cta {
	display: grid;
	gap: 12px;
	margin-bottom: 32px;
	padding: 16px 18px;
	border: 1px solid #cfe6f8;
	border-radius: var(--wsp-radius);
	background: var(--wsp-sky);
}
.wsp-cdir__cta p { margin: 0; color: var(--wsp-ink); font-size: 15px; line-height: 1.5; }
.wsp-cdir__cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.wsp-cdir__cta-link { color: var(--wsp-action); font-weight: 600; font-size: 14px; }
@media (min-width: 900px) {
	.wsp-cdir__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 18px 24px; }
}

/* Paid "Featured employer" card and profile label */
.wsp-ccard.is-featured a { border-color: var(--wsp-brand); }
.wsp-ccard .wsp-chip { justify-self: start; margin-bottom: 4px; }
.wsp-chero__flag { margin-bottom: 8px; }

/* "Is this your company?" card */
.wsp-owner p { margin: 0 0 10px; color: var(--wsp-text); font-size: 14px; line-height: 1.5; }
.wsp-owner__links { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.wsp-owner__links li { margin: 0; padding: 0; list-style: none; }
.wsp-owner__links a { color: var(--wsp-action); font-weight: 600; text-decoration: none; }
.wsp-owner__links a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.wsp-ccard a { transition: none; }
}