.city-collections { --cc-blue:#087bbf; --cc-ink:#172d3e; --cc-muted:#617383; color:var(--cc-ink); }
.cc-page { max-width:1180px; margin:auto; padding:26px 0 64px; }
.city-collections a { text-decoration:none; }
.city-collections a:focus-visible,.city-collections button:focus-visible { outline:3px solid #0782ce; outline-offset:4px; }
.cc-breadcrumbs { display:flex; flex-wrap:wrap; gap:9px; align-items:center; color:var(--cc-muted); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.cc-breadcrumbs a:hover { color:var(--cc-blue); }
.cc-intro { padding:44px 0 36px; max-width:850px; }
.cc-eyebrow { color:var(--cc-blue); font-size:12px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; margin:0 0 16px; }
.cc-intro h1 { font-size:clamp(32px,4.5vw,54px); font-weight:750; line-height:1.13; letter-spacing:-.035em; margin:0 0 20px; overflow-wrap:anywhere; }
.cc-lead { font-size:18px; line-height:1.65; color:var(--cc-muted); margin:0; overflow-wrap:anywhere; }
.cc-section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0 0 20px; }
.cc-section-heading h2 { font-size:20px; font-weight:650; margin:0; }
.cc-section-heading>span { font-size:13px; color:var(--cc-muted); white-space:nowrap; }
.cc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.cc-card { min-width:0; border:1px solid #e0e8ed; border-radius:20px; overflow:hidden; background:white; transition:box-shadow .2s,transform .2s; }
.cc-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px #24486314; }
.cc-card-link { display:flex; height:100%; flex-direction:column; color:inherit; }
.cc-card-cover { aspect-ratio:4/3; position:relative; background:#e5eef3; overflow:hidden; }
.cc-card-cover img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.cc-card:hover .cc-card-cover img { transform:scale(1.035); }
.cc-placeholder { display:grid; place-items:center; background:radial-gradient(ellipse at 18% 20%,#d2f0e7 0,transparent 55%),linear-gradient(135deg,#dbeef8,#e8e1f4); }
.cc-placeholder>span:first-child { font-size:82px; line-height:1; color:#4e829f; opacity:.7; }
.cc-cover-count { position:absolute; bottom:16px; left:16px; font-size:12px; font-weight:550; padding:7px 11px; background:#fffefb; border-radius:8px; color:var(--cc-ink); }
.cc-card-body { display:flex; flex:1; flex-direction:column; padding:22px; }
.cc-card h3 { font-size:22px; font-weight:700; line-height:1.3; letter-spacing:-.02em; margin:0 0 12px; overflow-wrap:anywhere; }
.cc-card-description { font-size:14px; line-height:1.65; color:var(--cc-muted); margin:0 0 24px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.cc-card-action { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:8px; font-size:13px; font-weight:650; color:var(--cc-blue); }
.cc-card-action>span { font-size:20px; line-height:1; }
.cc-date { font-size:12px; line-height:1.6; color:var(--cc-muted); margin:0 0 10px; }
.cc-meta { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:24px; font-size:13px; color:var(--cc-muted); }
.cc-detail-intro { max-width:900px; padding-bottom:36px; }
.cc-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start; gap:44px; }
.cc-places { min-width:0; display:grid; gap:36px; }
.cc-place { min-width:0; border:1px solid #e0e8ed; border-radius:22px; overflow:hidden; background:#fff; scroll-margin-top:100px; }
.cc-photo-main { display:block; position:relative; aspect-ratio:20/13; overflow:hidden; background:#e5eef3; cursor:zoom-in; }
.cc-photo-main img { width:100%; height:100%; object-fit:cover; }
.cc-photo-hint { position:absolute; bottom:16px; right:16px; display:flex; gap:15px; align-items:center; padding:8px 12px; border-radius:8px; background:#102835bd; color:#fff; font-size:12px; }
.cc-photo-strip { display:flex; gap:8px; overflow-x:auto; padding:10px 12px 6px; scrollbar-width:thin; }
.cc-photo-thumb { flex:0 0 100px; aspect-ratio:4/3; border:3px solid transparent; border-radius:8px; overflow:hidden; background:#e5eef3; }
.cc-photo-thumb[aria-pressed="true"] { border-color:var(--cc-blue); }
.cc-photo-thumb img { width:100%; height:100%; object-fit:cover; }
.cc-place-body { padding:30px; }
.cc-place-number { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--cc-blue); font-weight:650; margin:0 0 12px; }
.cc-place h2 { font-size:28px; font-weight:700; line-height:1.25; letter-spacing:-.025em; margin:0 0 16px; overflow-wrap:anywhere; }
.cc-preserve-lines { white-space:pre-line; }
.cc-place-description { color:#3d5060; font-size:16px; line-height:1.8; margin:0 0 24px; overflow-wrap:anywhere; }
.cc-address { font-size:14px; color:var(--cc-muted); line-height:1.7; margin:0 0 24px; overflow-wrap:anywhere; }
.cc-address>span { color:var(--cc-blue); font-size:22px; vertical-align:middle; margin-right:6px; }
.cc-place-links { display:flex; flex-wrap:wrap; gap:10px; }
.cc-button { display:inline-flex; justify-content:center; align-items:center; gap:18px; min-height:44px; padding:11px 18px; border:1px solid var(--cc-blue); background:var(--cc-blue); border-radius:10px; font-size:13px; line-height:1.5; font-weight:600; color:#fff; text-align:center; }
.cc-button:hover { filter:brightness(.94); }
.cc-button-secondary { background:#fff; color:var(--cc-blue); border-color:#d6e5ee; }
.cc-contents { position:sticky; top:100px; padding:24px 0; border-top:2px solid var(--cc-ink); min-width:0; }
.cc-contents ol { list-style:none; padding:0; margin:0; max-height:60vh; overflow-y:auto; scrollbar-width:thin; }
.cc-contents li+li { border-top:1px solid #e2e9ed; }
.cc-contents li a { display:flex; align-items:baseline; gap:12px; padding:13px 0; font-size:13px; line-height:1.6; color:var(--cc-ink); overflow-wrap:anywhere; }
.cc-contents li span { flex-shrink:0; width:20px; color:#90a3b0; font-size:11px; }
.cc-contents li a:hover { color:var(--cc-blue); }
.cc-back-link { display:block; margin-top:24px; font-size:13px; color:var(--cc-blue); }
.cc-empty { border:1px dashed #cedde7; border-radius:22px; padding:60px 24px; text-align:center; background:#f4f9fc; }
.cc-empty-mark { display:block; font-size:48px; line-height:1; margin-bottom:24px; color:var(--cc-blue); }
.cc-empty h2 { font-size:24px; font-weight:650; margin:0 0 12px; }
.cc-empty p { color:var(--cc-muted); line-height:1.7; margin:0 auto 24px; max-width:450px; }
.cc-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin-top:36px; font-size:13px; color:var(--cc-muted); }
.cc-lightbox { position:fixed; inset:0; width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:0; border:0; color:white; background:#101d28; }
.cc-lightbox::backdrop { background:#101d2aeb; }
.cc-lightbox-toolbar { height:68px; padding:12px 24px; display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.cc-lightbox button { width:44px; height:44px; border:1px solid #ffffff40; border-radius:50%; background:#ffffff12; color:#fff; cursor:pointer; flex-shrink:0; }
.cc-lightbox button:hover { background:#ffffff30; }
.cc-lightbox button[hidden] { display:none; }
.cc-lightbox-view { display:flex; align-items:center; justify-content:center; gap:20px; padding:0 24px; height:calc(100% - 144px); }
.cc-lightbox-view>img { min-width:0; max-width:calc(100% - 128px); max-height:100%; object-fit:contain; }
.cc-lightbox-view button { font-size:32px; line-height:1; }
.cc-lightbox-caption { height:76px; padding:16px 24px; margin:0; overflow:auto; text-align:center; font-size:14px; line-height:1.5; }
@media(max-width:1000px) { .cc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cc-detail-layout { grid-template-columns:minmax(0,1fr) 220px; gap:26px; } }
@media(max-width:760px) { .cc-detail-layout { display:flex; flex-direction:column; gap:24px; } .cc-contents { display:none; } .cc-places { width:100%; gap:24px; } .cc-detail-intro { padding-top:30px; } }
@media(max-width:540px) { .cc-page { padding:18px 0 38px; } .cc-intro { padding:30px 0; } .cc-lead { font-size:16px; } .cc-grid { grid-template-columns:1fr; gap:22px; } .cc-card-cover { aspect-ratio:16/11; } .cc-card h3 { font-size:22px; } .cc-section-heading h2 { font-size:18px; } .cc-section-heading>span { font-size:11px; } .cc-place-body { padding:22px; } .cc-place h2 { font-size:24px; } .cc-place-description { font-size:15px; } .cc-photo-thumb { flex-basis:82px; } .cc-lightbox-view { gap:8px; padding:0 8px; } .cc-lightbox-view>img { max-width:calc(100% - 96px); } .cc-lightbox-view button { width:40px; height:40px; } }
@media(prefers-reduced-motion:reduce) { .cc-card,.cc-card-cover img { transition:none; } .cc-card:hover,.cc-card:hover .cc-card-cover img { transform:none; } }

.city-collections .cc-map-section { margin:0 0 32px; scroll-margin-top:100px; }
.city-collections .cc-map-panel { margin-top:16px; border:1px solid #dce3e9; border-radius:16px; background:#fff; overflow:hidden; }
.city-collections .cc-map-caption, .city-collections .cc-map-status { color:#65758a; font-size:14px; line-height:1.6; }
.city-collections .cc-map-caption { padding:16px 20px; margin:0; }
.city-collections .cc-map-status:empty { display:none; }
.city-collections .cc-map-canvas { width:100%; height:440px; overflow:hidden; background:#f0f4f8; }
.city-collections [data-map-load] { cursor:pointer; }
.city-collections [data-map-load]:disabled { opacity:.6; cursor:wait; }
.city-collections .cc-map-section [hidden] { display:none; }
.city-collections .cc-map-selection { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 20px; border-top:1px solid #dce3e9; }
.city-collections .cc-map-selection strong { font-size:16px; overflow-wrap:anywhere; }
.city-collections .cc-map-selection p { margin:4px 0 0; color:#65758a; font-size:14px; overflow-wrap:anywhere; }
.city-collections .cc-map-selection-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.city-collections .cc-map-selection-close { border:0; background:transparent; color:#65758a; font-size:26px; padding:4px 10px; cursor:pointer; }
/* Геометрия и состояния пина повторяют directory-map-marker в company/list_test.php. */
.city-collections .cc-map-pin { position:relative; display:flex; align-items:center; gap:7px; width:max-content; max-width:220px; border:0; padding:0 0 8px; background:transparent; cursor:pointer; transform:translate(-20px,-100%); }
.city-collections .cc-map-pin__shape { display:grid; place-items:center; flex:0 0 auto; width:39px; height:39px; border:3px solid #fff; border-radius:52% 52% 52% 3%; background:#0788c9; box-shadow:0 7px 18px #0788c96b; transform:rotate(-45deg); transition:background .18s ease,box-shadow .18s ease; }
.city-collections .cc-map-pin__number { color:#fff; font-size:15px; font-weight:750; line-height:1; transform:rotate(45deg); }
.city-collections .cc-map-pin__label { max-width:160px; overflow:hidden; padding:7px 9px; border:1px solid #0788c98c; border-radius:9px; background:#fffffff5; box-shadow:0 5px 14px #1830422e; color:#075b87; font-size:11px; font-weight:750; line-height:1.2; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.city-collections .cc-map-pin:hover .cc-map-pin__shape, .city-collections .cc-map-pin:focus-visible .cc-map-pin__shape, .city-collections .cc-map-pin--selected .cc-map-pin__shape { background:#102f49; box-shadow:0 0 0 4px #ffffffe0,0 9px 24px #102f496b; }
.city-collections .cc-map-pin--selected .cc-map-pin__label { background:#102f49; border-color:#102f49; color:#fff; }
@media(max-width:540px) { .city-collections .cc-map-section { margin-bottom:24px; } .city-collections .cc-map-canvas { height:360px; } .city-collections .cc-map-caption, .city-collections .cc-map-selection { padding:14px; } .city-collections .cc-map-pin__label { max-width:105px; } }
@media(prefers-reduced-motion:reduce) { .city-collections .cc-map-pin__shape { transition:none; } }