/* LGC — Live Gay Club | Base Stylesheet */
/* Brand: Dark premium, Cameraboys color mood */

:root {
  --bg: #141d30;
  --bg-card: #202f4c;
  --bg-card-hover: #314a74;
  --border: #314a74;
  --text: #ffffff;
  --text-muted: #b0bdd0;
  --accent: #E1B45A;
  --accent-hover: #f0c76e;
  --accent2: #3ec8e8;
  --accent2-hover: #5dd8f4;
  --success: #34d399;
  --radius: 12px;
  --radius-sm: 8px;
  --max-w: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent2); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent2-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.4rem; margin: 1.8rem 0 0.8rem; }
h3 { font-size: 1.1rem; }

/* === NAV === */
.site-nav {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
}
.nav-logo:hover { color: #ffffff; text-decoration: none; }
.nav-logo-img { vertical-align: middle; margin-right: 4px; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

/* === CTA BUTTONS === */
.cta-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  transition: background 0.2s, transform 0.15s;
}
.cta-primary:hover {
  background: var(--accent-hover);
  text-decoration: none;
  transform: translateY(-1px);
}
.cta-secondary {
  display: inline-block;
  border: 1px solid var(--accent);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  transition: all 0.2s;
}
.cta-secondary:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

/* === MODEL PAGE === */
.model-page { max-width: var(--max-w); margin: 0 auto; padding: 24px 20px 48px; }

.model-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.model-image-wrap { border-radius: var(--radius); overflow: hidden; }
.model-image-wrap img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.model-info { display: flex; flex-direction: column; gap: 16px; }
.model-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.model-meta .pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.model-content { margin-top: 32px; }
.content-block { margin-bottom: 20px; color: var(--text); line-height: 1.7; }

.cta-mid { text-align: center; margin: 28px 0; }
.cta-bottom { text-align: center; margin: 36px 0 12px; }

/* Image archive */
.image-archive { margin: 28px 0; }
.image-archive h2 { font-size: 1.2rem; margin-bottom: 12px; }
.archive-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.archive-grid img {
  width: 100px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.archive-grid img:hover { opacity: 1; }

/* === MODEL GRID (shared) === */
.model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 16px 0;
}
.model-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}
.model-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.model-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.model-card-info { padding: 10px 12px; }
.model-card-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.model-card-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* Related models */
.related-models { margin-top: 36px; }
.related-models h2 { font-size: 1.2rem; margin-bottom: 8px; }

/* Category links */
.category-links { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.category-links a {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  transition: all 0.2s;
}
.category-links a:hover {
  border-color: var(--accent2);
  color: var(--accent2);
  text-decoration: none;
}

/* === BLOG POST === */
.blog-post { max-width: 1040px; margin: 0 auto; padding: 24px 20px 48px; }

.post-header { margin-bottom: 20px; }
.post-header h1 { font-size: 1.7rem; }
.post-header time { font-size: 0.85rem; color: var(--text-muted); }

.post-intro { margin-bottom: 20px; line-height: 1.75; }

.post-image { margin: 36px 0; border-radius: var(--radius); overflow: hidden; }
.post-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }

.post-body { line-height: 1.75; }
.post-body h2 { color: var(--accent2); font-size: 1.3rem; margin: 28px 0 12px; }
.post-body p { margin-bottom: 14px; }
.post-body ul { margin: 12px 0 16px 24px; }
.post-body li { margin-bottom: 6px; }
.post-body strong { color: #fff; }

.post-footer-cta { text-align: center; margin: 32px 0 16px; }

/* Related posts */
.related-posts { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 24px; }
.related-posts h2 { font-size: 1.2rem; margin-bottom: 12px; }
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
}
.post-card:hover { border-color: var(--accent); }
.post-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.post-card-info { padding: 10px 12px; }
.post-card-title { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.post-card-date { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

/* === CATEGORY PAGE === */
.category-page { max-width: var(--max-w); margin: 0 auto; padding: 24px 20px 48px; }
.category-header { margin-bottom: 16px; }
.category-intro { line-height: 1.75; margin-bottom: 24px; color: var(--text); }
.category-grid { grid-template-columns: repeat(4, 1fr); }

.category-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.category-pills a {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: all 0.2s;
}
.category-pills a:hover {
  border-color: #ffffff;
  color: #ffffff;
  text-decoration: none;
}
.related-categories { margin-top: 32px; }
.related-categories h2 { font-size: 1.2rem; margin-bottom: 8px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 28px 0; }
.pagination a, .pagination span {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* === INDEX PAGES (Models index, Blog index, Categories hub) === */
.index-page { max-width: var(--max-w); margin: 0 auto; padding: 24px 20px 48px; }
.index-page h1 { margin-bottom: 16px; }

/* === HOMEPAGE === */
.homepage { max-width: var(--max-w); margin: 0 auto; padding: 0 20px 48px; }

.hero {
  text-align: center;
  padding: 48px 20px 36px;
}
.hero h1 { font-size: 2.2rem; margin-bottom: 10px; }
.hero p { font-size: 1.05rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; }

.home-section { margin: 32px 0; }
.home-section h2 { font-size: 1.3rem; margin-bottom: 14px; }

.category-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s;
}
.category-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.category-card h3 { color: var(--text); font-size: 1rem; }
.category-card p { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }

/* === STATIC PAGES (about, privacy, etc.) === */
.static-page { max-width: 780px; margin: 0 auto; padding: 24px 20px 48px; }
.static-page h1 { margin-bottom: 16px; }
.static-page h2 { margin: 24px 0 10px; }
.static-page p { margin-bottom: 14px; line-height: 1.75; }
.static-page ul { margin: 12px 0 16px 24px; }
.static-page li { margin-bottom: 6px; }

/* === FOOTER === */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  margin-top: 48px;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
.footer-col h3 { font-size: 0.95rem; margin-bottom: 10px; color: var(--text); }
.footer-col a { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 6px; }
.footer-col a:hover { color: var(--accent2); }
.footer-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border);
}
.footer-bottom p { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }
.disclaimer { font-weight: 500; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .model-hero-inner { grid-template-columns: 1fr; }
  .model-grid, .category-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: 1fr; }
  .category-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 20px; }
  .nav-links { gap: 14px; }
  .hero h1 { font-size: 1.6rem; }
  h1 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .model-grid, .category-grid { grid-template-columns: 1fr; }
  .category-cards { grid-template-columns: 1fr; }
  .nav-links { gap: 10px; font-size: 0.82rem; }
}

/* === Platform Badges (Migration v3) === */
.platform-badge{display:inline-block;font-size:.65rem;padding:2px 8px;border-radius:4px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.platform-badge.chaturbate{background:#F47321}
.platform-badge.camsoda{background:#E91E63}
.platform-badge.stripchat{background:#8B5CF6}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.filter-pills .pill{padding:6px 14px;border-radius:20px;border:1px solid var(--border);color:var(--text-muted);text-decoration:none;font-size:.85rem;transition:all .2s}
.filter-pills .pill:hover,.filter-pills .pill.active{background:var(--accent);color:#141d30;border-color:var(--accent)}
.pagination{display:flex;gap:6px;justify-content:center;margin:30px 0 10px;flex-wrap:wrap}
.pagination a{padding:6px 12px;border-radius:6px;border:1px solid var(--border);color:var(--text-muted);text-decoration:none;font-size:.85rem}
.pagination a:hover,.pagination a.active{background:var(--accent);color:#141d30;border-color:var(--accent)}

/* === Phase 2: Snapshots, Facts, Breadcrumbs, Archive === */
.breadcrumbs{padding:10px 0;font-size:.85rem;color:var(--text-muted);max-width:var(--max-w);margin:0 auto}
.breadcrumbs a{color:var(--accent2);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.snapshot-section{max-width:var(--max-w);margin:30px auto;padding:0 20px}
.snapshot-section h2{margin-bottom:12px}
.snapshot-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 0;-webkit-overflow-scrolling:touch}
.snapshot-strip a{flex-shrink:0}
.snapshot-strip img{width:140px;height:auto;border-radius:6px;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--border);transition:border-color .2s}
.snapshot-strip img:hover{border-color:var(--accent)}
.snapshot-meta{font-size:.85rem;color:var(--text-muted);margin-top:8px}
.snapshot-meta a{color:var(--accent2)}
.facts-table{width:100%;border-collapse:collapse;margin:15px 0;font-size:.85rem}
.facts-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
.facts-table td:first-child{color:var(--text-muted);width:40%}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.archive-grid a{display:block}
.archive-grid img{width:100%;border-radius:6px;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--border);transition:border-color .2s}
.archive-grid img:hover{border-color:var(--accent)}

/* === CTA button text fix === */
.model-image-wrap .cta-primary{display:block;margin-top:12px;text-align:center}
.cta-primary{color:#000 !important}
.cta-primary:hover{color:#fff !important}

/* === H1 above hero layout === */
.model-title{margin:0 0 16px;font-size:1.75rem;color:var(--text)}

/* === Archive page fixes === */
.archive-header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.archive-header h1{margin:0}
.archive-header .cta-primary{white-space:nowrap;flex-shrink:0}
.archive-grid img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain}
/* === Hamburger Menu === */
.hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 4px 8px; line-height: 1; }
@media (max-width: 600px) {
  .hamburger { display: block; }
  .nav-links { display: none; flex-direction: column; width: 100%; gap: 0; padding: 0; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); }
  .nav-inner { flex-wrap: wrap; }
}

/* Quick Links card (blog posts) */
.quick-links-card{background:#111;border:1px solid #222;padding:18px;margin:22px 0;border-radius:10px}
.quick-links-card h3{margin:0 0 10px 0;font-size:18px}
.quick-links-card ul{list-style:none;padding-left:0;margin:0}
.quick-links-card li{margin:0 0 8px 0}
.quick-links-card a{color:#7dd3fc;text-decoration:none}
.quick-links-card a:hover{text-decoration:underline}

/* Play button overlay on blog post image */
.post-image{position:relative}
.image-play-link{position:relative;display:block;width:65%}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;line-height:72px;text-align:center;background:rgba(0,0,0,.55);border-radius:50%;font-size:30px;color:#fff;pointer-events:none;transition:background .2s}
.image-play-link:hover .play-btn{background:rgba(225,180,90,.85)}

/* Blog grid on homepage (2x3) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-grid-card{background:var(--card);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .15s}
.blog-grid-card:hover{transform:translateY(-3px)}
.blog-grid-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.blog-grid-info{padding:12px}
.blog-grid-title{font-weight:600;font-size:.95rem;margin-bottom:4px}
.blog-grid-date{font-size:.8rem;color:var(--text-muted)}
@media(max-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.blog-grid{grid-template-columns:1fr}}

/* Blog list on blog index page */
.blog-intro{color:var(--text-muted);margin-bottom:24px;line-height:1.6}
.blog-intro a{color:var(--accent2)}
.blog-list{display:flex;flex-direction:column;gap:24px}
.blog-list-card{display:flex;gap:20px;background:var(--card);border-radius:var(--radius);overflow:hidden;padding:16px}
.blog-list-img{flex-shrink:0;width:260px}
.blog-list-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
.blog-list-info{display:flex;flex-direction:column;justify-content:center}
.blog-list-title{font-weight:600;font-size:1.1rem;color:var(--text);text-decoration:none;margin-bottom:6px}
.blog-list-title:hover{color:var(--accent2)}
.blog-list-meta{font-size:.8rem;color:var(--text-muted);margin-bottom:8px}
.blog-list-excerpt{font-size:.9rem;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-list-more{font-size:.85rem;color:var(--accent2);text-decoration:none;margin-top:8px}
.blog-list-more:hover{text-decoration:underline}
@media(max-width:600px){.blog-list-card{flex-direction:column}.blog-list-img{width:100%}}

/* External platform CTA grid */
.platform-intro{margin-bottom:24px;line-height:1.7;color:var(--text-muted)}
.ext-platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.ext-platform-btn{display:flex;flex-direction:column;align-items:center;padding:18px 16px;background:var(--card);border:1px solid #333;border-radius:var(--radius);text-decoration:none;text-align:center;transition:border-color .2s,transform .15s}
.ext-platform-btn:hover{border-color:var(--accent2);transform:translateY(-2px)}
.ext-btn-label{font-weight:600;font-size:.95rem;color:var(--accent2)}
.ext-btn-sub{font-size:.8rem;color:var(--text-muted);margin-top:4px}
@media(max-width:600px){.ext-platform-grid{grid-template-columns:1fr}}


/* Editorial authority sections */
.editorial-authority{margin:32px 0 36px 0}
.editorial-authority h2{font-size:1.25rem;margin:28px 0 10px 0;color:#E1B45A;font-weight:600}
.editorial-authority h2:first-child{margin-top:0}
.editorial-block p{line-height:1.75;color:var(--text-muted,#b0bdd0);font-size:.95rem;margin:0 0 6px 0}
.editorial-block a{color:#7dd3fc;text-decoration:none}
.editorial-block a:hover{text-decoration:underline}