/* assets/css/page-seo.css — v213 automatic SEO pages (seo.php). Layout CSS copied from
   the approved previews (playbook/seo-city-hub-preview.html,
   seo-area-category-page-preview.html) — Brutal Lite tokens/classes from lite.css are
   used as-is; nothing here redefines a token, colour, radius or shadow. */

.crumb{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font:700 11.5px/1 var(--font-ui);color:var(--muted);margin-bottom:14px;}
.crumb i{font-size:10px;color:var(--muted-2);}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb .cur{color:var(--ink);}
.intro{font:500 14px/1.5 var(--font-ui);color:var(--ink-soft);margin:8px 0 0;}

.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* v215: tiles carry the area's best public pin photo + the preview's scrim and white name;
   .area-tile--plain (no photo anywhere in that area) keeps the calm grey card + ink name. */
.area-tile{position:relative;height:88px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card-2);display:block;text-decoration:none;}
.area-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.area-tile .scrim{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.65));}
.area-tile .name{position:absolute;left:10px;right:10px;bottom:9px;color:#fff;font:800 13.5px/1.2 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.area-tile--plain .name{color:var(--ink);}
/* Launch review: no flat grey box when an area has no cover photo — a neutral map-style
   tile (dotted grid, like a paper map with no pins drawn yet) instead. */
.area-tile--plain{background-color:var(--card-2);background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px);background-size:14px 14px;background-position:-2px -2px;}
.area-chips{margin-top:12px;}

.cat-chip-row,.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.chip-link{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font:700 12.5px/1 var(--font-ui);color:var(--ink);text-decoration:none;}
.chip-link i{font-size:14px;}

.creator-rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;}
.creator-item{flex:0 0 auto;width:68px;text-align:center;text-decoration:none;}
.creator-item img,.creator-item .ghost-av{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;background:var(--card-2);}
.creator-item .h{font:700 11.5px/1.3 var(--font-ui);color:var(--ink);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.plist{display:flex;flex-direction:column;gap:12px;}
.prow{display:flex;align-items:center;gap:12px;}
.prow__n{width:22px;height:22px;border-radius:50%;background:var(--card-2);display:flex;align-items:center;justify-content:center;font:800 11.5px/1 var(--font-ui);color:var(--ink);flex:0 0 auto;}
.prow__media{position:relative;width:52px;height:68px;border-radius:10px;overflow:hidden;background:var(--card-2);flex:0 0 auto;display:block;}
.prow__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.prow__body{flex:1;min-width:0;}
.prow__place{font:700 13.5px/1.25 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prow__by{font:600 12px/1 var(--font-ui);color:var(--muted);margin-top:3px;}

.stat-row{display:flex;gap:10px;margin-top:10px;}
/* v215: brutal.css's generic .stat adds a 2px ink border + hard shadow (var(--sh-sm)) — the
   strict rules allow ONE hard-shadow element per screen (here: Sign up free), so these stat
   boxes stay calm exactly like the preview: grey fill, no border, no shadow. */
.stat-row .stat{flex:1;background:var(--card-2);border:0;box-shadow:none;border-radius:12px;padding:10px 12px;text-align:center;}
.stat b{display:block;font:800 18px/1 var(--font-display);}
.stat span{font:600 10.5px/1.2 var(--font-ui);color:var(--muted);}

.mock-map{position:relative;width:100%;height:160px;border-radius:14px;overflow:hidden;background:#f2f3f5;margin-top:14px;border:1px solid var(--line);}
.mock-map svg{position:absolute;inset:0;width:100%;height:100%;}
/* v215: live MapLibre map over a static fallback that draws the same pins (seo.php). The
   live layer fades in only once it has really drawn; until then — or for good, when the
   tab is hidden/headless or the CDN is blocked — the fallback pins stay visible. Pins in
   the fallback copy the preview's sticker: 36px photo, 2.5px ink border, --sh-sm (rules
   §6.8: map pins are photo stickers). */
.seo-map__fallback,.seo-map__live{position:absolute;inset:0;width:100%;height:100%;}
.seo-map__live{opacity:0;transition:opacity .25s;}
.seo-map__live.is-ready{opacity:1;}
.seo-map__dot{position:absolute;width:36px;height:36px;margin:-36px 0 0 -18px;border-radius:50%;overflow:hidden;border:2.5px solid var(--ink);box-shadow:var(--sh-sm);background:#fff;box-sizing:border-box;}
.seo-map__dot img{width:100%;height:100%;object-fit:cover;display:block;}
/* map-explore.js photo-sticker pins + collision states inside the live map — the same
   rules page-profile.css copies from lite-explore.css (`.map-header .sm-pin*`), rescoped to
   .seo-map; only the photo is 36px instead of 42px, as in the approved preview, so the
   stickers fit this 160px box. Without this the bare brutal.css pin (square photo + big
   tag) showed and crowded the box. */
.seo-map .sm-pin-wrap{ position:absolute; }
.seo-map .sm-pin{ display:flex; flex-direction:column; align-items:center; width:72px; }
.seo-map .sm-pin__photo{
  width:36px; height:36px; margin:0 auto; border-radius:50%; border:2.5px solid var(--ink); box-shadow:var(--sh-sm);
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
}
.seo-map .sm-pin--featured .sm-pin__photo{ border-color:var(--ink); border-width:2.5px; box-shadow:0 0 0 3px var(--yellow), var(--sh-sm); }
.seo-map .sm-pin__name{
  margin-top:5px; max-width:110px; background:var(--ink); color:#fff; font:700 10.5px/1 var(--font-ui); padding:4px 7px;
  border-radius:7px; border:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
.seo-map .sm-pin--featured .sm-pin__name{ background:var(--ink); color:var(--yellow); }
.seo-map .sm-pin__tail{ display:none; }
.seo-map .sm-pin__ph{ color:var(--muted); }
.seo-map .sm-pin-wrap.sm-pin--circle-hidden{ opacity:0!important; pointer-events:none!important; }
.seo-map .sm-pin-wrap.sm-pin--label-hidden .sm-pin__name{ visibility:hidden; }
.seo-map .sm-pin-wrap.sm-pin--active .sm-pin__photo{ transform:scale(1.14); box-shadow:0 0 0 3px var(--yellow), var(--sh-sm); }

.join-card{background:var(--yellow-soft);border:var(--bd);border-radius:16px;padding:16px;}

/* v217: "Guides in {city}" rail (seo.php city/area hubs, city-guide.php "More guides") —
   copied from playbook/guide-public-preview.html's .more-rail / .more-item. */
.more-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;}
.more-item{flex:0 0 auto;width:130px;text-decoration:none;}
.more-item__media{position:relative;width:130px;height:92px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card-2);}
.more-item__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.more-item__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px;}
.more-item h4{font:700 12.5px/1.3 var(--font-ui);margin:7px 0 0;color:var(--ink);}
.more-item span{display:block;font:600 11px/1.2 var(--font-ui);color:var(--muted);margin-top:2px;}