/* Company pages (company.php) and the /companies directory (companies.php). */
.co-body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8fafc; overflow-x: clip; }
.co-body *, .co-body *::before, .co-body *::after { box-sizing: border-box; }

.co-breadcrumb { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0.75rem 1rem; font-size: 0.82rem; color: #6b7280; }
.co-breadcrumb .inner { max-width: 1100px; margin: 0 auto; }
.co-breadcrumb a { color: #3b5cf5; text-decoration: none; }
.co-breadcrumb a:hover { text-decoration: underline; }
.co-breadcrumb .sep { margin: 0 0.4rem; }

/* ---- Company header ---- */
.co-head { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 2rem 1rem 1.5rem; }
.co-head-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 1.25rem; align-items: flex-start; }
.co-head-logo { width: 84px; height: 84px; border-radius: 18px; object-fit: contain; border: 1px solid #eef0f3; background: #fafafa; flex-shrink: 0; }
.co-initials { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b5cf5, #6366f1); color: #fff; font-weight: 800; border: 0; }
.co-head-logo.co-initials { font-size: 1.6rem; }
.co-head-text { min-width: 0; }
.co-head h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin: 0.2rem 0 0.5rem; }
.co-head p { color: #4b5563; font-size: 0.98rem; line-height: 1.6; margin: 0; max-width: 720px; }
.co-stats { max-width: 1100px; margin: 1.5rem auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.co-stat { background: #f8fafc; border: 1px solid #eef0f3; border-radius: 12px; padding: 0.8rem 1rem; display: flex; flex-direction: column; }
.co-stat .n { font-size: 1.35rem; font-weight: 800; color: #1e3a8a; line-height: 1.2; }
.co-stat .n.co-stat-text { font-size: 1.05rem; }
.co-stat .l { font-size: 0.78rem; color: #6b7280; margin-top: 0.15rem; }

/* ---- Layout ---- */
.co-layout { max-width: 1100px; margin: 1.5rem auto 3rem; padding: 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; }
.co-layout main { min-width: 0; }
.co-h2 { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 0 0 0.85rem; }
main .co-h2:not(:first-child) { margin-top: 2rem; }

/* ---- Job rows ---- */
.co-jobs { display: flex; flex-direction: column; gap: 0.6rem; }
.co-job { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.9rem; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; }
.co-job:hover { border-color: #3b5cf5; box-shadow: 0 4px 18px rgba(59,92,245,0.1); transform: translateY(-1px); color: inherit; text-decoration: none; }
.co-job-info { flex: 1; min-width: 0; }
.co-job-role { font-weight: 700; color: #1f2937; font-size: 0.96rem; margin-bottom: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.co-tag { background: #f3f4f6; border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.72rem; color: #374151; font-weight: 500; }
.co-tag.remote { background: #ede9fe; color: #6d28d9; }
.co-tag.salary { background: #d1fae5; color: #065f46; }
.co-tag i { font-size: 0.68rem; margin-right: 2px; }
.co-age { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; }

.co-empty { background: #fff; border: 1px dashed #d1d5db; border-radius: 14px; text-align: center; padding: 2.5rem 1rem; color: #6b7280; }
.co-empty i { font-size: 2rem; color: #d1d5db; display: block; margin-bottom: 0.75rem; }

.co-past { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.9rem 1.1rem 0.9rem 2.2rem; margin: 0; color: #4b5563; font-size: 0.9rem; columns: 2; column-gap: 2rem; }
.co-past li { margin: 0.2rem 0; break-inside: avoid; }

/* ---- Company cards (similar companies + directory) ---- */
.co-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.co-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1rem; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 0.25rem; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; min-width: 0; }
.co-card:hover { border-color: #3b5cf5; box-shadow: 0 4px 18px rgba(59,92,245,0.1); transform: translateY(-1px); color: inherit; text-decoration: none; }
.co-card-logo { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; border: 1px solid #eef0f3; background: #fafafa; margin-bottom: 0.4rem; }
.co-card-logo.co-initials { font-size: 1rem; }
.co-card-name { font-weight: 700; color: #0f172a; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-card-count { font-size: 0.82rem; color: #3b5cf5; font-weight: 600; }
.co-card-meta { font-size: 0.78rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Sidebar ---- */
.co-side { min-width: 0; }
.co-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.co-box h3 { font-size: 0.95rem; font-weight: 800; color: #0f172a; margin: 0 0 0.45rem; }
.co-box h3 i { color: #3b5cf5; margin-right: 0.3rem; }
.co-box p { font-size: 0.86rem; color: #4b5563; line-height: 1.55; margin: 0 0 0.85rem; }
.co-claim { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border-color: #c7d2fe; }
.co-btn { display: inline-block; background: #3b5cf5; color: #fff; border-radius: 10px; padding: 0.55rem 1rem; font-weight: 700; font-size: 0.88rem; text-decoration: none; border: 1.5px solid #3b5cf5; }
.co-btn:hover { background: #2f4bd8; color: #fff; text-decoration: none; }
.co-btn-ghost { background: #fff; color: #3b5cf5; }
.co-btn-ghost:hover { background: #eef2ff; color: #3b5cf5; }
.co-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.co-chip { background: #f3f4f6; border-radius: 999px; padding: 0.25rem 0.65rem; font-size: 0.78rem; color: #374151; }
.co-chip b { color: #1e3a8a; margin-left: 0.15rem; }
.co-side-link { display: block; padding: 0.4rem 0; font-size: 0.88rem; color: #374151; text-decoration: none; border-bottom: 1px solid #f3f4f6; }
.co-side-link:last-child { border-bottom: 0; }
.co-side-link:hover { color: #3b5cf5; text-decoration: none; }

/* ---- Directory ---- */
.cd-hero { background: linear-gradient(135deg, #1e3a8a 0%, #3b5cf5 50%, #6366f1 100%); color: #fff; padding: 3rem 1rem 2.5rem; text-align: center; }
.cd-hero h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.cd-hero p { opacity: 0.88; max-width: 640px; margin: 0 auto 1.4rem; line-height: 1.6; }
.cd-search { max-width: 560px; margin: 0 auto; display: flex; gap: 0.5rem; }
.cd-search input { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.95rem; font-family: inherit; }
.cd-search button { border: 0; border-radius: 12px; padding: 0 1.2rem; background: #0f172a; color: #fff; font-weight: 700; font-family: inherit; cursor: pointer; }
.cd-wrap { max-width: 1100px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.cd-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cd-chip { border: 1.5px solid #e5e7eb; background: #fff; color: #374151; border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.83rem; font-weight: 600; text-decoration: none; }
.cd-chip:hover { border-color: #3b5cf5; color: #3b5cf5; text-decoration: none; }
.cd-chip.active { background: #0f172a; border-color: #0f172a; color: #fff; }
.cd-sort { font-size: 0.85rem; color: #6b7280; }
.cd-sort a { color: #374151; text-decoration: none; margin-left: 0.6rem; font-weight: 600; }
.cd-sort a.active { color: #3b5cf5; text-decoration: underline; }
.cd-count { font-size: 0.88rem; color: #6b7280; margin-bottom: 0.9rem; }
.cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cd-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 2rem; }
.cd-pager a, .cd-pager span { min-width: 2.4rem; padding: 0.45rem 0.8rem; border-radius: 8px; text-align: center; font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.cd-pager a { background: #fff; border: 1px solid #e5e7eb; color: #1e3a8a; }
.cd-pager .cur { background: #3b5cf5; color: #fff; }
.cd-pager .gap { color: #9ca3af; min-width: auto; padding: 0.45rem 0.2rem; }
.cd-cta { margin-top: 2.5rem; background: #fff; border: 1px solid #c7d2fe; border-radius: 14px; padding: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cd-cta h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.25rem; color: #0f172a; }
.cd-cta p { margin: 0; color: #4b5563; font-size: 0.9rem; }

@media (max-width: 960px) {
    .cd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .co-layout { grid-template-columns: 1fr; }
    .co-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-grid, .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .co-head-inner { flex-direction: column; gap: 0.75rem; }
    .co-head-logo { width: 64px; height: 64px; }
    .co-past { columns: 1; }
    .co-age { display: none; }
    .co-job { padding: 0.8rem 0.9rem; }
}