/* Companies archive + single company. Loaded on directory pages and archives. */

/* --- Archive layout ------------------------------------------------------- */
.hh-directory__layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* --- Filters sidebar ------------------------------------------------------ */
.hh-filters {
	position: sticky;
	top: calc(var(--hh-header-h) + 16px);
}

.hh-filters__heading {
	font-size: 1.375rem;
	color: var(--hh-navy);
	margin: 0 0 12px;
}
.hh-filters__heading + .hh-filters__input { margin-top: 0; }
.hh-filters__heading:not(:first-child) { margin-top: 26px; }

.hh-filters__input,
.hh-filters__select {
	width: 100%;
	font-family: var(--hh-font);
	font-size: 0.875rem;
	color: var(--hh-ink-strong);
	background: #fff;
	border: 1px solid var(--hh-border);
	border-radius: 3px;
	padding: 9px 12px;
	margin-bottom: 10px;
}
.hh-filters__input:focus,
.hh-filters__select:focus { outline: 2px solid var(--hh-navy); outline-offset: 1px; }

.hh-filters__select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23718096'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px 18px;
	padding-right: 32px;
}

.hh-filters__submit { width: 100%; margin-bottom: 4px; }

.hh-filters__reset {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.8125rem;
	color: var(--hh-navy);
	text-decoration: underline;
}

/* --- Results -------------------------------------------------------------- */
.hh-directory__count {
	font-size: 0.875rem;
	color: var(--hh-subtle);
	margin: 0 0 14px;
}

.hh-directory__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.hh-company-card {
	background: #fff;
	border: 1px solid var(--hh-border);
	border-radius: var(--hh-radius);
	overflow: hidden;
}

.hh-company-card--row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 14px;
}
.hh-company-card--row .hh-company-card__media img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	border-radius: 3px;
}

.hh-company-card--stack { display: flex; flex-direction: column; height: 100%; }
.hh-company-card--stack .hh-company-card__media img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}
.hh-company-card--stack .hh-company-card__body { padding: 16px 18px 20px; }

.hh-company-card__title {
	font-size: 1.0625rem;
	margin: 0 0 6px;
	font-weight: 600;
}
.hh-company-card__title a { color: var(--hh-blue-link); }

.hh-company-card__excerpt {
	font-size: 0.875rem;
	color: var(--hh-text);
	margin: 0 0 8px;
}

.hh-company-card__more {
	font-size: 0.875rem;
	color: var(--hh-text);
}
.hh-company-card__more:hover { color: var(--hh-navy); }

.hh-directory__empty {
	background: var(--hh-bg-lighter);
	border: 1px solid var(--hh-border);
	border-radius: var(--hh-radius);
	padding: 40px 24px;
	text-align: center;
}

/* --- Pagination ----------------------------------------------------------- */
.hh-pagination {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}
.hh-pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	text-align: center;
	padding: 7px 10px;
	margin: 0 3px 6px;
	border: 1px solid var(--hh-border);
	border-radius: 3px;
	font-size: 0.875rem;
	color: var(--hh-navy);
	background: #fff;
}
.hh-pagination .page-numbers:hover { background: var(--hh-bg-subtle); text-decoration: none; }
.hh-pagination .page-numbers.current {
	background: var(--hh-navy);
	border-color: var(--hh-navy);
	color: #fff;
}

/* --- Single company ------------------------------------------------------- */
.hh-company__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
}

.hh-company__hero { margin: 0 0 22px; }
.hh-company__hero img { width: 100%; border-radius: var(--hh-radius); }

.hh-company__content { color: var(--hh-text); }

.hh-details {
	background: var(--hh-navy-24);
	border: 1px solid rgba(38, 55, 120, 0.18);
	border-radius: 8px;
	padding: 22px 24px 26px;
	position: sticky;
	top: calc(var(--hh-header-h) + 16px);
}

.hh-details__title {
	font-size: 1.375rem;
	color: var(--hh-navy);
	margin: 0 0 14px;
}

.hh-details__heading {
	font-size: 1.125rem;
	color: var(--hh-navy);
	margin: 18px 0 6px;
}
.hh-details__heading:first-of-type { margin-top: 0; }

.hh-details__areas {
	margin: 0 0 4px;
	padding-left: 1.15em;
	font-size: 0.875rem;
	color: var(--hh-ink-medium);
}
.hh-details__areas li { margin-bottom: 2px; }

.hh-details__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	color: var(--hh-ink-medium);
}
.hh-details__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 5px;
	word-break: break-word;
}
.hh-details__list svg {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	margin-top: 4px;
	color: var(--hh-navy);
}
.hh-details__list a { color: var(--hh-ink-medium); }
.hh-details__list a:hover { color: var(--hh-navy); }

.hh-details__back { margin-top: 22px; width: 100%; }

@media (max-width: 980px) {
	.hh-directory__layout,
	.hh-company__layout { grid-template-columns: 1fr; }

	/* A sticky offset meant for the two-column layout would push these down over
	   the content that follows once the grid collapses to one column. */
	.hh-filters,
	.hh-details { position: static; top: auto; }
}

@media (max-width: 560px) {
	.hh-company-card--row { grid-template-columns: 1fr; }
	.hh-company-card--row .hh-company-card__media img { height: 180px; }
}