/* =====================================================================
 * VizagMap — company profile page
 * A self-contained blue "product directory" look, matching the approved
 * mockup. Scoped under .cx- so it never collides with the site's teal
 * theme tokens. Loaded only on single + archive company pages.
 * =================================================================== */

.cx {
	--cx-bg:      #F5F8FE;
	--cx-card:    #FFFFFF;
	--cx-navy:    #0F1E3D;   /* headings / primary text */
	--cx-ink:     #1E2A44;   /* body text */
	--cx-slate:   #64748B;   /* secondary text */
	--cx-slate2:  #94A3B8;   /* tertiary / captions */
	--cx-blue:    #2563EB;   /* links, tags, verified check */
	--cx-btn:     #14235B;   /* deep navy button */
	--cx-btn-h:   #0E1B49;
	--cx-line:    #E7EDF7;   /* card borders */
	--cx-soft:    #EEF3FE;   /* icon squares */
	--cx-purple:  #7C3AED;   /* open-role accent */
	--cx-purple-b:#F3EBFE;
	--cx-r:       16px;
	--cx-r-lg:    22px;
	--cx-r-sm:    12px;
	--cx-shadow:  0 1px 2px rgba(15,30,61,.04), 0 10px 30px rgba(15,30,61,.06);
	--cx-shadow-s:0 1px 2px rgba(15,30,61,.05);
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	color:var(--cx-ink);
}

/* Page background wash sits behind everything on company pages. */
body.cx-page{ background:var(--cx-bg); }

.cx-wrap{ max-width:1200px; margin:0 auto; padding:28px 24px 72px; }

/* Back link + admin edit button */
.cx-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.cx-back{ display:inline-flex; align-items:center; gap:8px; color:var(--cx-slate);
	text-decoration:none; font-size:14px; font-weight:500; }
.cx-back:hover{ color:var(--cx-navy); }
.cx-back svg{ width:18px; height:18px; }
.cx-edit{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
	background:var(--cx-btn); color:#fff; font-size:14px; font-weight:600;
	padding:9px 16px; border-radius:999px; box-shadow:var(--cx-shadow-s); transition:background .15s; }
.cx-edit:hover{ background:var(--cx-btn-h); }
.cx-edit svg{ width:16px; height:16px; }

/* ---------- HERO ---------- */
.cx-hero{
	display:grid; grid-template-columns:1fr minmax(300px,440px);
	background:var(--cx-card); border:1px solid var(--cx-line);
	border-radius:var(--cx-r-lg); box-shadow:var(--cx-shadow);
	overflow:hidden; margin-bottom:24px;
}
.cx-hero-l{ padding:32px; display:flex; gap:24px; align-items:flex-start; }

.cx-logo{
	flex:0 0 auto; width:124px; height:124px; border-radius:24px;
	background:#fff; border:1px solid var(--cx-line); box-shadow:var(--cx-shadow-s);
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cx-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.cx-logo .cx-ini{ font-size:40px; font-weight:800; color:#fff; letter-spacing:-.02em; }

.cx-head{ min-width:0; padding-top:2px; }
.cx-tags{ color:var(--cx-blue); font-size:14px; font-weight:600; margin-bottom:8px;
	display:flex; flex-wrap:wrap; gap:6px 4px; align-items:center; }
.cx-tags .dot{ color:var(--cx-slate2); }
.cx-name{ font-size:34px; line-height:1.12; font-weight:800; color:var(--cx-navy);
	letter-spacing:-.02em; margin:0 0 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cx-verified{ width:22px; height:22px; flex:0 0 auto; }
.cx-addr{ display:flex; align-items:flex-start; gap:8px; color:var(--cx-slate);
	font-size:15px; line-height:1.5; max-width:34em; }
.cx-addr svg{ width:17px; height:17px; margin-top:2px; flex:0 0 auto; color:var(--cx-slate2); }
.cx-openpill{ display:inline-flex; align-items:center; gap:7px; margin-top:16px;
	background:var(--cx-purple-b); color:var(--cx-purple); font-size:13px; font-weight:600;
	padding:6px 12px; border-radius:999px; }
.cx-openpill svg{ width:15px; height:15px; }

/* Hero map panel */
.cx-hero-map{ position:relative; min-height:300px; background:linear-gradient(160deg,#EAF1FE,#DCE7FB); }
.cx-hero-map .cx-map{ position:absolute; inset:0; }
.cx-hero-map.is-empty::after{
	content:""; position:absolute; inset:0;
	background:
		radial-gradient(circle at 70% 45%, rgba(37,99,235,.10), transparent 40%),
		repeating-linear-gradient(90deg, rgba(37,99,235,.06) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(0deg, rgba(37,99,235,.06) 0 1px, transparent 1px 46px);
}
.cx-pin{ position:absolute; left:50%; top:46%; transform:translate(-50%,-100%); z-index:2; }
.cx-pin svg{ width:34px; height:34px; filter:drop-shadow(0 6px 8px rgba(15,30,61,.25)); }
/* Keep leaflet controls unobtrusive on this decorative map */
.cx-hero-map .leaflet-control-container{ display:none; }
.cx-hero-map .leaflet-container{ background:#EAF1FE; }
/* Mute OpenStreetMap's colours into a calm, light base (matches the main map) */
.cx-hero-map .leaflet-tile-pane{ filter:saturate(.6) brightness(1.06) contrast(.96); }

/* ---------- BODY GRID ---------- */
.cx-grid{ display:grid; grid-template-columns:1fr 372px; gap:24px; align-items:start; }

.cx-card{ background:var(--cx-card); border:1px solid var(--cx-line);
	border-radius:var(--cx-r); box-shadow:var(--cx-shadow); padding:26px; }
.cx-card + .cx-card{ margin-top:24px; }
.cx-card-h{ display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.cx-card-h svg{ width:20px; height:20px; color:var(--cx-blue); }
.cx-card-h h2{ font-size:19px; font-weight:700; color:var(--cx-navy); margin:0; letter-spacing:-.01em; }
.cx-card-h .cx-count{ background:var(--cx-soft); color:var(--cx-blue); font-size:12px;
	font-weight:700; min-width:22px; height:22px; padding:0 7px; border-radius:999px;
	display:inline-flex; align-items:center; justify-content:center; }

.cx-about{ color:var(--cx-ink); font-size:15.5px; line-height:1.75; }
.cx-about p{ margin:0 0 12px; }
.cx-about p:last-child{ margin-bottom:0; }
.cx-divider{ height:1px; background:var(--cx-line); margin:20px 0; border:0; }

/* Role rows */
.cx-role{ display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:16px 18px; border:1px solid var(--cx-line); border-radius:var(--cx-r-sm);
	text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s, transform .05s; }
.cx-role + .cx-role{ margin-top:10px; }
.cx-role:hover{ border-color:#CBD9F5; box-shadow:0 6px 16px rgba(37,99,235,.08); }
.cx-role-t{ font-size:15.5px; font-weight:600; color:var(--cx-navy); }
.cx-role-m{ display:flex; align-items:center; gap:12px; color:var(--cx-slate); font-size:13.5px; white-space:nowrap; }
.cx-role-m .chev{ width:18px; height:18px; color:var(--cx-slate2); }
.cx-viewall{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; white-space:nowrap;
	color:var(--cx-blue); font-weight:600; font-size:14.5px; text-decoration:none; }
.cx-viewall svg{ width:17px; height:17px; flex:0 0 auto; }
.cx-viewall:hover{ gap:10px; }
.cx-empty{ color:var(--cx-slate); font-size:15px; }

/* ---------- SIDEBAR ---------- */
.cx-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cx-stat{ background:var(--cx-card); border:1px solid var(--cx-line); border-radius:14px;
	box-shadow:var(--cx-shadow-s); padding:16px; display:flex; gap:12px; align-items:center; }
.cx-stat-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--cx-soft);
	display:flex; align-items:center; justify-content:center; }
.cx-stat-ic svg{ width:20px; height:20px; color:var(--cx-blue); }
.cx-stat-l{ font-size:12px; color:var(--cx-slate); margin-bottom:3px; }
.cx-stat-v{ font-size:15px; font-weight:700; color:var(--cx-navy); line-height:1.2; }

.cx-actions{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.cx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
	height:52px; border-radius:var(--cx-r-sm); font-size:15.5px; font-weight:600;
	text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .15s, border-color .15s; }
.cx-btn svg{ width:18px; height:18px; }
.cx-btn-primary{ background:var(--cx-btn); color:#fff; }
.cx-btn-primary:hover{ background:var(--cx-btn-h); }
.cx-btn-ghost{ background:#fff; color:var(--cx-navy); border-color:var(--cx-line); }
.cx-btn-ghost:hover{ border-color:#CBD9F5; }
.cx-btn-ghost.is-saved{ color:var(--cx-blue); border-color:#CBD9F5; background:var(--cx-soft); }

/* ---------- TRUST BAR ---------- */
.cx-trust{ margin-top:24px; background:var(--cx-card); border:1px solid var(--cx-line);
	border-radius:var(--cx-r); box-shadow:var(--cx-shadow);
	display:grid; grid-template-columns:repeat(4,1fr); }
.cx-trust-i{ display:flex; align-items:center; gap:12px; padding:22px 24px; }
.cx-trust-i + .cx-trust-i{ border-left:1px solid var(--cx-line); }
.cx-trust-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--cx-soft);
	display:flex; align-items:center; justify-content:center; }
.cx-trust-ic svg{ width:19px; height:19px; color:var(--cx-blue); }
.cx-trust-t{ font-size:14px; font-weight:700; color:var(--cx-navy); }
.cx-trust-s{ font-size:12.5px; color:var(--cx-slate); margin-top:2px; }

/* =========================== RESPONSIVE =========================== */
@media (max-width:980px){
	.cx-grid{ grid-template-columns:1fr; }
	.cx-hero{ grid-template-columns:1fr; }
	.cx-hero-map{ order:-1; min-height:150px; }
	.cx-hero-l{ padding:0 22px 24px; margin-top:-52px; }
	.cx-logo{ width:96px; height:96px; border-radius:20px; }
	.cx-trust{ grid-template-columns:1fr; }
	.cx-trust-i + .cx-trust-i{ border-left:0; border-top:1px solid var(--cx-line); }
}
@media (max-width:560px){
	.cx-wrap{ padding:20px 16px 56px; }
	.cx-hero-l{ flex-direction:column; gap:14px; }
	.cx-name{ font-size:27px; }
	.cx-tags{ font-size:13px; }
	.cx-card{ padding:20px; }
	.cx-role{ padding:14px; }
	.cx-role-m span.exp{ display:none; }   /* keep the row tidy on tiny screens */
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
	.cx-role, .cx-viewall, .cx-btn{ transition:none; }
}

/* ---------- ARCHIVE (companies listing) ---------- */
.cx-arc-head{ margin-bottom:22px; }
.cx-arc-head h1{ font-size:30px; font-weight:800; color:var(--cx-navy); letter-spacing:-.02em; margin:0 0 6px; }
.cx-arc-head p{ color:var(--cx-slate); font-size:15px; margin:0; }
.cx-arc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cx-tile{ background:var(--cx-card); border:1px solid var(--cx-line); border-radius:var(--cx-r);
	box-shadow:var(--cx-shadow-s); padding:20px; text-decoration:none; color:inherit;
	display:block; transition:border-color .15s, box-shadow .15s, transform .06s; }
.cx-tile:hover{ border-color:#CBD9F5; box-shadow:0 10px 26px rgba(37,99,235,.10); transform:translateY(-2px); }
.cx-tile-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.cx-tile-logo{ width:52px; height:52px; border-radius:13px; background:#fff; border:1px solid var(--cx-line);
	display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; }
.cx-tile-logo img{ width:100%; height:100%; object-fit:cover; }
.cx-tile-logo .cx-ini{ font-size:20px; font-weight:800; color:#fff; }
.cx-tile-name{ font-size:17px; font-weight:700; color:var(--cx-navy); display:flex; align-items:center; gap:6px; }
.cx-tile-name svg{ width:16px; height:16px; flex:0 0 auto; }
.cx-tile-tags{ color:var(--cx-blue); font-size:13px; font-weight:600; margin-top:3px; }
.cx-tile-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px;
	color:var(--cx-slate); font-size:13.5px; padding-top:14px; border-top:1px solid var(--cx-line); }
.cx-tile-open{ color:var(--cx-purple); font-weight:600; }
.cx-arc-empty{ background:var(--cx-card); border:1px solid var(--cx-line); border-radius:var(--cx-r);
	padding:48px; text-align:center; color:var(--cx-slate); }
@media (max-width:900px){ .cx-arc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cx-arc-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   v0.5 fixes
   ========================================================================== */

/* ---------- Logo cropping ----------
   object-fit:cover fills the square by cutting the image, which is right for a
   photo and wrong for a logo — a wide wordmark loses its ends and a round mark
   loses its top and bottom. Logos are letterboxed instead, with padding so the
   mark is never flush against the tile edge. */
.cx-logo img{ object-fit:contain; padding:10px; background:#fff; }

/* ---------- Logo hidden behind the map on phones ----------
   Below 980px the map is pulled above the details (order:-1) and the details
   are pulled back up over it (margin-top:-52px) so the logo overlaps the map
   edge. But .cx-hero-map is positioned and .cx-hero-l is not, so the map paints
   over the logo and cuts it in half.

   The details column gets its own stacking position so it lands on top, and the
   logo gets a white ring so the overlap reads as deliberate rather than as
   something clipping. */
@media (max-width:980px){
	.cx-hero-l{ position:relative; z-index:2; }
	.cx-hero-map{ z-index:1; }
	.cx-logo{
		box-shadow:0 0 0 4px #fff, 0 10px 24px -12px rgba(15,30,61,.35);
		border-color:transparent;
	}
}

/* Small phones: the hero stacks, so the logo sits alone above the name and a
   smaller overlap keeps the whole mark clear of the map. */
@media (max-width:560px){
	.cx-hero-l{ margin-top:-44px; }
	.cx-logo{ width:84px; height:84px; border-radius:18px; }
	.cx-logo img{ padding:8px; }
	.cx-logo .cx-ini{ font-size:30px; }
}