/**
 * Perfil da Empresa pública (single-company.php, CPT "company" do addon
 * MAS Company) do tema Cais. Réplica do mockup aprovado — usa exclusivamente
 * os tokens de variables.css (mapeamento 1:1: --font-display -> --font-heading,
 * --font-body -> --font-body, --color-*, --space-* e --radius-* diretos,
 * 1240px -> var(--container-max-width), já usada por single-job.css,
 * jobs-listing.css e employer-dashboard.css — não inventa um novo valor).
 * .site-header/.primary-nav do mockup ficam de fora de propósito — são só o
 * cabeçalho de demonstração do ficheiro HTML isolado; o cabeçalho real do
 * site já vem de header.php/header.css (fora da lista de ficheiros a tocar).
 */

.breadcrumb {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--space-md) var(--space-lg) 0;
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

.breadcrumb a:hover {
	color: var(--color-primary);
}

.company-cover {
	height: 160px;
	background: linear-gradient(120deg, var(--color-primary-light), #D8ECE8);
	position: relative;
}

.company-header-wrap {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--space-lg);
}

.company-header {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	margin-top: -64px;
	padding: var(--space-lg) var(--space-xl) var(--space-xl);
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.company-header-left {
	display: flex;
	align-items: flex-end;
	gap: var(--space-md);
	min-width: 0;
	flex: 1 1 auto;
}

/* min-width:0 explícito em .company-header-left (acima) e aqui: sem isto,
   o valor automático (min-width:auto) de um item flex nunca encolhe abaixo
   da largura do seu próprio conteúdo, forçando .company-meta a ultrapassar
   a viewport em ecrãs estreitos em vez de quebrar linha corretamente —
   confirmado ao vivo via CDP (getBoundingClientRect antes/depois da
   correção), não só por leitura de código. */
.company-title-block {
	min-width: 0;
}

.company-logo {
	width: 96px;
	height: 96px;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	border: 4px solid var(--color-background);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 2rem;
	color: var(--color-primary-contrast, #ffffff) !important;
	margin-top: -48px;
	flex-shrink: 0;
}

.company-logo-img {
	object-fit: cover;
}

.company-title-block h1 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-2xl);
	letter-spacing: -0.01em;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.verified-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-primary);
	flex-shrink: 0;
}

.verified-badge svg {
	width: 11px;
	height: 11px;
	stroke: #fff;
	stroke-width: 3;
}

.company-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-size: 0.88rem;
	color: var(--color-text-secondary);
	margin-top: 0.4rem;
}

.company-meta span {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.company-meta svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.company-header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.btn-follow {
	padding: 0.65rem 1.3rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
}

.btn-follow:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Estado "A seguir" — preenchido, para se distinguir claramente de "+ Seguir"
   (contorno), mesma lógica de estado dinâmico do resto do painel (ex:
   .dash-nav-item.is-active). */
.btn-follow.is-following {
	background: var(--color-primary-light);
	border-color: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.btn-follow.is-following:hover {
	background: #FDEEEE;
	border-color: #FDEEEE;
	color: #C0594A;
}

.btn-follow:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.social-row {
	display: flex;
	gap: 0.4rem;
}

.social-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F3F6F5;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.social-icon svg {
	width: 15px;
	height: 15px;
	stroke: var(--color-text-secondary);
}

.social-icon:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.social-icon:hover svg {
	stroke: #fff;
}

.company-layout {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--space-xl);
	align-items: start;
}

.about-card,
.jobs-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	margin-bottom: var(--space-lg);
}

.card-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}

.about-card p {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}

.about-card p:last-child {
	margin-bottom: 0;
}

.jobs-card {
	padding: 0;
	overflow: hidden;
}

.jobs-card .card-title {
	padding: var(--space-lg) var(--space-xl) 0;
	margin-bottom: 0;
}

.jobs-count {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	padding: 0 var(--space-xl) var(--space-md);
}

.company-empty-state {
	padding: 0 var(--space-xl) var(--space-lg);
	font-size: 0.88rem;
	color: var(--color-text-secondary);
}

/* Prefixo "company-job-*" propositado: jobs-listing.css (carregado em todo
   o site) já usa .job-item/.job-title/.job-badge/.job-meta/.job-time para a
   listagem de vagas, incluindo uma regra @media (max-width: 640px) que
   força flex-direction:column nesse contexto — sem este prefixo, essa regra
   invadia silenciosamente esta lista de "Vagas Ativas" do perfil da
   empresa (mesma especificidade, `.job-item` desta folha vencia o empate só
   em parte, misturando column + align-items:center e partindo o layout
   abaixo de 640px). Confirmado ao vivo com outlines de depuração antes de
   corrigir — nunca assumido. */
.company-job-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.company-job-item:hover {
	background: #FAFCFB;
}

.company-job-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-text);
	margin-bottom: 0.3rem;
}

.company-job-badge {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.company-job-meta {
	font-size: 0.82rem;
	color: var(--color-text-secondary);
	margin-left: 0.5rem;
}

.company-job-time {
	font-size: 0.78rem;
	color: var(--color-text-muted);
	flex-shrink: 0;
}

/* Modo Escuro (v1.93.0) — mesmo bug/correção de blog.css/jobs-listing.css. */
.sidebar-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

.sidebar-card .card-title {
	margin-bottom: 0.8rem;
}

.stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--color-border);
}

.stat-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.stat-row:first-child {
	padding-top: 0;
}

.stat-row-label {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

.stat-row-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-text);
}

@media (max-width: 980px) {
	.company-layout {
		grid-template-columns: 1fr;
	}

	.company-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.company-header {
		padding: var(--space-md) var(--space-lg) var(--space-lg);
		margin-top: -48px;
	}

	.company-logo {
		width: 76px;
		height: 76px;
		margin-top: -38px;
		font-size: 1.5rem;
	}
}

/* Modo Escuro (v1.93.1) — mesma família de bug já corrigida na v1.93.0
   (single-job.css): #F3F6F5 sem token equivalente. */
html[data-theme="dark"] .social-icon {
	background: var(--color-border);
}

/* Modo Escuro (v1.93.2) — mesma família (#FAFCFB, hover de linha de
   vaga), encontrada por varredura mais alargada (Deep Sweep). */
html[data-theme="dark"] .company-job-item:hover {
	background: var(--color-border);
}

/*
 * Modo Escuro (v1.94.0) — "Fantasma Branco" do topo do Perfil da Empresa.
 * .company-cover usava var(--color-primary-light) (deliberadamente claro
 * no Modo Escuro, decisão da v1.93.0) + #D8ECE8 (hardcoded, nunca tocado)
 * — reversão da decisão original, mesmo padrão já aplicado ao
 * .alert-banner clássico na v1.93.2. Só reatribuição de cor (nunca
 * layout/geometria), usando variáveis já redefinidas neste bloco em
 * variables.css — nenhum hex novo introduzido.
 */
html[data-theme="dark"] .company-cover {
	background: linear-gradient(120deg, var(--color-primary-dark), var(--color-border));
}