/* LeoList SEO Pages — scoped styles for leolist.vc city landing pages
   All selectors are scoped under .leolist-seo-page to avoid conflicts with the WP theme.
   v1.1.0 */

.leolist-seo-page,
.leolist-seo-page * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.leolist-seo-page {
	font-family: 'Inter', sans-serif;
	color: #111111;
	line-height: 1.75;
	background: #f9f9f9;
	font-size: 16px;
	--red: #E31C39;
	--red-hover: #C41532;
	--red-light: #fff0f2;
	--red-mid: #ffd6db;
	--red-muted: rgba(227,28,57,0.12);
	--dark: #111111;
	--dark-card: #1a1a1a;
	--text-muted: #6b7280;
	--border: #e5e7eb;
}

.leolist-seo-page a { color: inherit; text-decoration: none; }

.leolist-seo-page .container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.leolist-seo-page .hero {
	background: #111111;
	padding: 60px 0 48px;
	border-bottom: 3px solid var(--red);
}

.leolist-seo-page .hero-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 56px;
	align-items: start;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

.leolist-seo-page .hero-category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red);
	background: rgba(227,28,57,.15);
	padding: 4px 10px;
	border-radius: 20px;
	border: 1px solid rgba(227,28,57,.3);
	margin-bottom: 16px;
}

.leolist-seo-page .hero-h1 {
	font-size: 52px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 24px;
	letter-spacing: -1.5px;
}

.leolist-seo-page .hero-h1 em {
	font-style: normal;
	color: var(--red);
	display: block;
}

.leolist-seo-page .hero-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: #9ca3af;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.leolist-seo-page .hero-byline strong { color: #e5e7eb; }
.leolist-seo-page .hero-byline .sep { color: #444; }

.leolist-seo-page .hero-intro {
	font-size: 17px;
	color: #cbd5e1;
	line-height: 1.8;
	margin-bottom: 28px;
}

.leolist-seo-page .pull-quote {
	border-left: 4px solid var(--red);
	padding: 18px 20px;
	background: rgba(227,28,57,.08);
	border-radius: 0 8px 8px 0;
}

.leolist-seo-page .pull-quote blockquote {
	font-size: 18px;
	font-style: italic;
	font-weight: 500;
	color: #f1f5f9;
	line-height: 1.55;
	margin-bottom: 8px;
}

.leolist-seo-page .pull-quote cite {
	font-size: 12px;
	font-weight: 700;
	color: var(--red);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.leolist-seo-page .hero-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 8px;
}

.leolist-seo-page .at-a-glance {
	background: #1a1a1a;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 22px;
	color: #fff;
}

.leolist-seo-page .at-a-glance h3 {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 16px;
	font-weight: 700;
}

.leolist-seo-page .glance-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 1px solid rgba(255,255,255,.07);
	padding: 9px 0;
}

.leolist-seo-page .glance-row:last-child { border: none; padding-bottom: 0; }
.leolist-seo-page .glance-label { font-size: 13px; color: #9ca3af; }
.leolist-seo-page .glance-val { font-size: 15px; font-weight: 600; color: #fff; }
.leolist-seo-page .glance-val.green { color: #4ade80; }

.leolist-seo-page .share-strip { display: flex; gap: 8px; }

.leolist-seo-page .share-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px;
	background: #1a1a1a;
	border: 1px solid #333;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #9ca3af;
	cursor: pointer;
	transition: border-color .2s, color .2s;
	font-family: 'Inter', sans-serif;
}

.leolist-seo-page .share-btn:hover { border-color: var(--red); color: #fff; }

/* ── Listings ──────────────────────────────────────────────────────── */

.leolist-seo-page .listings-first {
	padding: 56px 0;
	background: var(--red-light);
	border-bottom: 1px solid var(--red-mid);
}

.leolist-seo-page .section-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 8px;
}

.leolist-seo-page .section-title {
	font-size: 30px;
	font-weight: 800;
	color: var(--dark);
	margin-bottom: 10px;
	letter-spacing: -.5px;
}

.leolist-seo-page .section-subtitle {
	font-size: 16px;
	color: var(--text-muted);
	margin-bottom: 36px;
}

.leolist-seo-page .listings-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

.leolist-seo-page .listings-cta { text-align: center; }

.leolist-seo-page .btn-listings {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--red);
	color: #fff;
	padding: 14px 32px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	transition: background .2s;
}

.leolist-seo-page .btn-listings:hover { background: var(--red-hover); }

/* ── Article ───────────────────────────────────────────────────────── */

.leolist-seo-page .article-body { padding: 64px 0; background: #fff; }

.leolist-seo-page .article-layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 64px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

.leolist-seo-page .article-content h2 {
	font-size: 26px;
	font-weight: 800;
	color: var(--dark);
	margin: 48px 0 18px;
	padding-top: 48px;
	border-top: 1px solid var(--border);
	letter-spacing: -.5px;
}

.leolist-seo-page .article-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.leolist-seo-page .article-content h3 { font-size: 18px; font-weight: 700; color: var(--dark); margin: 28px 0 12px; }
.leolist-seo-page .article-content p { color: #4b5563; margin-bottom: 18px; }
.leolist-seo-page .article-content p:last-child { margin-bottom: 0; }

.leolist-seo-page .expert-tip {
	background: var(--red-light);
	border: 1px solid var(--red-mid);
	border-left: 4px solid var(--red);
	border-radius: 0 10px 10px 0;
	padding: 20px 22px;
	margin: 28px 0;
}

.leolist-seo-page .expert-tip-label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 10px;
}

.leolist-seo-page .expert-tip p { margin: 0; font-size: 14.5px; color: #374151; }

.leolist-seo-page .area-profiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin: 28px 0;
}

.leolist-seo-page .area-profile-card {
	background: #f9f9f9;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 22px;
}

.leolist-seo-page .area-profile-card h4 {
	font-size: 16px;
	font-weight: 700;
	color: var(--dark);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.leolist-seo-page .area-profile-card h4 .area-code {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	background: var(--red);
	color: #fff;
	padding: 2px 7px;
	border-radius: 4px;
}

.leolist-seo-page .area-profile-card p { font-size: 14px; color: #6b7280; line-height: 1.65; }

.leolist-seo-page .rate-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.leolist-seo-page .rate-table thead th { background: var(--dark); color: #fff; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 13px; }
.leolist-seo-page .rate-table thead th:first-child { border-radius: 8px 0 0 0; }
.leolist-seo-page .rate-table thead th:last-child { border-radius: 0 8px 0 0; }
.leolist-seo-page .rate-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.leolist-seo-page .rate-table tbody tr:nth-child(even) { background: #f9f9f9; }
.leolist-seo-page .rate-table tbody td { padding: 12px 16px; color: #4b5563; }
.leolist-seo-page .rate-table tbody td:first-child { font-weight: 500; color: var(--dark); }

/* ── Sidebar ───────────────────────────────────────────────────────── */

.leolist-seo-page .article-sidebar { padding-top: 4px; }

.leolist-seo-page .sidebar-widget {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 22px;
	margin-bottom: 24px;
}

.leolist-seo-page .sidebar-widget h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 16px;
}

.leolist-seo-page .sidebar-link-list { list-style: none; }
.leolist-seo-page .sidebar-link-list li { border-bottom: 1px solid #f3f4f6; padding: 9px 0; }
.leolist-seo-page .sidebar-link-list li:last-child { border: none; }

.leolist-seo-page .sidebar-link-list a {
	font-size: 14px;
	color: #374151;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color .2s;
}

.leolist-seo-page .sidebar-link-list a:hover { color: var(--red); }
.leolist-seo-page .sidebar-link-list a i { color: #f87171; font-size: 12px; width: 14px; }

.leolist-seo-page .related-searches { display: flex; flex-wrap: wrap; gap: 8px; }

.leolist-seo-page .search-chip {
	background: var(--red-light);
	color: var(--red);
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	border: 1px solid var(--red-mid);
}

.leolist-seo-page .search-chip:hover { background: var(--red); color: #fff; }

/* ── Reader Q&A ────────────────────────────────────────────────────── */

.leolist-seo-page .reader-qa { padding: 56px 0; background: #111111; }
.leolist-seo-page .reader-qa .section-eyebrow { color: #f87171; }
.leolist-seo-page .reader-qa .section-title { color: #fff; }
.leolist-seo-page .reader-qa .section-subtitle { color: #9ca3af; }

.leolist-seo-page .qa-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 36px;
}

.leolist-seo-page .qa-item {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	padding: 24px;
}

.leolist-seo-page .qa-q { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }

.leolist-seo-page .qa-icon {
	width: 28px;
	height: 28px;
	background: var(--red);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
	margin-top: 2px;
}

.leolist-seo-page .qa-question { font-size: 15px; font-weight: 600; color: #f1f5f9; line-height: 1.4; }
.leolist-seo-page .qa-answer { font-size: 14px; color: #94a3b8; line-height: 1.7; padding-left: 40px; }
.leolist-seo-page .qa-item.qa-full { grid-column: 1 / -1; }

/* ── TL;DR ─────────────────────────────────────────────────────────── */

.leolist-seo-page .tldr-section {
	padding: 56px 0;
	background: #f9f9f9;
	border-top: 1px solid var(--border);
}

.leolist-seo-page .tldr-box {
	background: linear-gradient(135deg, #111111 0%, #2a0008 100%);
	border-radius: 16px;
	padding: 40px;
	color: #fff;
	max-width: 820px;
	margin: 0 auto;
	border: 1px solid #333;
}

.leolist-seo-page .tldr-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #f87171;
	margin-bottom: 14px;
}

.leolist-seo-page .tldr-title {
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 20px;
	letter-spacing: -.5px;
}

.leolist-seo-page .tldr-points { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.leolist-seo-page .tldr-points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	color: #e2e8f0;
	line-height: 1.55;
}

.leolist-seo-page .tldr-points li i { color: #f87171; margin-top: 3px; flex-shrink: 0; }

/* ── Safety section ────────────────────────────────────────────────── */

.leolist-seo-page .safety-section { padding: 64px 0; background: #fff; border-top: 1px solid var(--border); }
.leolist-seo-page .safety-section .section-subtitle { margin-bottom: 36px; }

.leolist-seo-page .safety-stats-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--dark);
	border-radius: 12px;
	margin-bottom: 40px;
	overflow: hidden;
	border: 1px solid #222;
}

.leolist-seo-page .safety-stat { padding: 22px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.leolist-seo-page .safety-stat:last-child { border-right: none; }
.leolist-seo-page .safety-stat-num { display: block; font-size: 28px; font-weight: 800; color: var(--red); line-height: 1.1; margin-bottom: 5px; }
.leolist-seo-page .safety-stat-label { display: block; font-size: 12px; color: #9ca3af; font-weight: 500; }

.leolist-seo-page .safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.leolist-seo-page .safety-card { background: #f9f9f9; border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.leolist-seo-page .safety-card-warn { background: #fff8f0; border-color: #fca5a5; border-top: 4px solid #ef4444; }
.leolist-seo-page .safety-card-report { background: var(--red-light); border-color: var(--red-mid); border-top: 4px solid var(--red); }

.leolist-seo-page .safety-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.leolist-seo-page .safety-icon {
	width: 36px;
	height: 36px;
	background: var(--red);
	border-radius: 8px;
	display: inline-block;
	text-align: center;
	line-height: 36px;
	color: #fff;
	font-size: 15px;
	flex-shrink: 0;
}

.leolist-seo-page .safety-card-warn .safety-icon { background: #ef4444; }
.leolist-seo-page .safety-card-header h3 { font-size: 17px; font-weight: 700; color: var(--dark); }
.leolist-seo-page .safety-card > p { font-size: 14px; color: #4b5563; line-height: 1.7; margin-bottom: 14px; }

.leolist-seo-page .safety-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.leolist-seo-page .safety-list li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #374151; }
.leolist-seo-page .safety-list li i { color: #ef4444; font-size: 13px; }
.leolist-seo-page .safety-rule { background: #ef4444; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; text-align: center; margin-top: 14px; }

.leolist-seo-page .safety-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.leolist-seo-page .safety-step { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #374151; line-height: 1.6; }
.leolist-seo-page .step-num { width: 26px; height: 26px; background: var(--red); border-radius: 50%; display: inline-block; text-align: center; line-height: 26px; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

.leolist-seo-page .badge-legend { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.leolist-seo-page .badge-item { display: flex; align-items: flex-start; gap: 14px; }
.leolist-seo-page .badge-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.leolist-seo-page .badge-verified { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.leolist-seo-page .badge-featured { background: #fef9c3; color: #a16207; border: 1px solid #fef08a; }
.leolist-seo-page .badge-reviewed { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.leolist-seo-page .badge-item p { font-size: 13px; color: #6b7280; line-height: 1.6; margin: 0; }

.leolist-seo-page .report-steps { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.leolist-seo-page .report-step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #374151; }
.leolist-seo-page .step-badge { width: 24px; height: 24px; background: var(--red); border-radius: 50%; display: inline-block; text-align: center; line-height: 24px; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }

.leolist-seo-page .btn-report { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; padding: 11px 24px; border-radius: 8px; font-size: 14px; font-weight: 700; transition: background .2s; }
.leolist-seo-page .btn-report:hover { background: var(--red-hover); }

/* ── Author ────────────────────────────────────────────────────────── */

.leolist-seo-page .author-section { padding: 48px 0; background: #f3f4f6; border-top: 1px solid var(--border); }

.leolist-seo-page .escort-author-block {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--border);
	border-top: 4px solid var(--red);
	border-radius: 14px;
	padding: 28px;
	max-width: 820px;
	margin: 0 auto;
	box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.leolist-seo-page .author-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--red-mid); flex-shrink: 0; }
.leolist-seo-page .author-info { flex: 1; }
.leolist-seo-page .author-name { display: block; font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 3px; }
.leolist-seo-page .author-title { display: block; font-size: 13px; font-weight: 600; color: var(--red); letter-spacing: .04em; margin-bottom: 12px; }
.leolist-seo-page .author-bio { font-size: 14px; color: #4b5563; line-height: 1.7; margin-bottom: 14px; }

.leolist-seo-page .author-social {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--red-light);
	color: var(--red);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 20px;
	transition: all .2s;
	border: 1px solid var(--red-mid);
}

.leolist-seo-page .author-social:hover { background: var(--red); color: #fff; }

/* ── Internal city links ───────────────────────────────────────────── */

.leolist-seo-page .internal-links { padding: 48px 0; background: #fff; border-top: 1px solid var(--border); }

.leolist-seo-page .cities-grid {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	grid-auto-flow: row !important;
	gap: 12px;
	margin-top: 24px;
}

.leolist-seo-page .city-link {
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: #f9f9f9 !important;
	border: 1px solid var(--border) !important;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #374151 !important;
	text-decoration: none !important;
	transition: all .2s;
}

.leolist-seo-page .city-link:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.leolist-seo-page .city-link i { color: #f87171; font-size: 12px; }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.leolist-seo-page .hero-layout { grid-template-columns: 1fr; }
	.leolist-seo-page .hero-sidebar { display: none; }
	.leolist-seo-page .article-layout { grid-template-columns: 1fr; }
	.leolist-seo-page .article-sidebar { display: none; }
	.leolist-seo-page .listings-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.leolist-seo-page .hero-h1 { font-size: 32px; }
	.leolist-seo-page .qa-grid { grid-template-columns: 1fr; }
	.leolist-seo-page .area-profiles { grid-template-columns: 1fr; }
	.leolist-seo-page .cities-grid { grid-template-columns: repeat(2, 1fr); }
	.leolist-seo-page .safety-stats-bar { grid-template-columns: 1fr 1fr; }
	.leolist-seo-page .safety-grid { grid-template-columns: 1fr; }
}
