/* ============================================================
   TrendsLive — editorial pages: CMS pages (/pages/{slug}) and
   blog posts (/blogs/{slug}), which share this whole layer
   ------------------------------------------------------------
   The public site's static pages (About, Terms …) and the blog.
   Built from the site's existing vocabulary — .wrap and .crumb come
   from event-detail.css, the accent heading from the private-event
   gate — plus .tl-prose, which styles the HTML the admin's page
   editor produces and nothing else on the site provides.
   ============================================================ */

.tl-page { padding-bottom: 72px; }

/* ── head: accent title, optional standfirst, updated stamp ── */
.tl-page-head { margin: 8px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.tl-page-head h1 {
  font-family: var(--tl-font-app);
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--tl-fg);
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.tl-page-head h1 .accent {
  flex: none;
  width: 7px;
  height: 30px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--tl-yellow);
  box-shadow: var(--tl-glow-yellow);
}
.tl-page-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tl-fg-2);
  max-width: 760px;
}
.tl-page-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-page-stamp {
  font-family: var(--tl-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tl-fg-3);
}

/* ── cover image ── */
.tl-page-cover {
  margin: 0 0 28px;
  border-radius: var(--tl-r-lg);
  overflow: hidden;
  border: 1px solid var(--tl-border);
  background: var(--tl-surface-2);
}
.tl-page-cover img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }

/* ── body card ── */
.tl-page-body {
  background: var(--tl-surface-1);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-r-lg);
  padding: 30px 32px;
  box-shadow: var(--tl-shadow-md);
  max-width: 860px;
}
@media (max-width: 640px) {
  .tl-page-body { padding: 22px 18px; }
}

/* ── .tl-prose — the editor's HTML, whatever tags it emits ── */
.tl-prose { color: var(--tl-fg-2); font-size: 15px; line-height: 1.75; }
.tl-prose > :first-child { margin-top: 0; }
.tl-prose > :last-child { margin-bottom: 0; }
.tl-prose p { margin: 0 0 18px; }
.tl-prose h1,
.tl-prose h2,
.tl-prose h3,
.tl-prose h4 {
  font-family: var(--tl-font-app);
  font-weight: 700;
  color: var(--tl-fg);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 32px 0 12px;
}
.tl-prose h1 { font-size: 26px; }
.tl-prose h2 { font-size: 22px; }
.tl-prose h3 { font-size: 18px; }
.tl-prose h4 { font-size: 16px; }
.tl-prose a { color: var(--tl-yellow-ink); text-decoration: underline; text-underline-offset: 3px; }
.tl-prose a:hover { color: var(--tl-yellow); }
.tl-prose strong, .tl-prose b { color: var(--tl-fg); font-weight: 700; }
.tl-prose ul, .tl-prose ol { margin: 0 0 18px; padding-left: 22px; }
.tl-prose li { margin: 6px 0; }
.tl-prose ul li::marker { color: var(--tl-yellow); }
.tl-prose ol li::marker { color: var(--tl-fg-3); font-family: var(--tl-font-mono); font-size: 12px; }
.tl-prose blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--tl-yellow);
  border-radius: 0 var(--tl-r-md) var(--tl-r-md) 0;
  background: var(--tl-surface-2);
  color: var(--tl-fg-2);
  font-size: 15px;
}
.tl-prose blockquote p:last-child { margin-bottom: 0; }
.tl-prose img { max-width: 100%; height: auto; border-radius: var(--tl-r-md); margin: 8px 0 18px; }
.tl-prose hr { border: 0; border-top: 1px solid var(--tl-border); margin: 30px 0; }
.tl-prose code {
  font-family: var(--tl-font-mono);
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--tl-surface-2);
  border: 1px solid var(--tl-border);
  color: var(--tl-fg);
}
.tl-prose pre {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: var(--tl-r-md);
  background: var(--tl-surface-2);
  border: 1px solid var(--tl-border);
  overflow-x: auto;
}
.tl-prose pre code { padding: 0; border: 0; background: none; }

/* a table the editor pasted in scrolls rather than widening the page */
.tl-prose table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.tl-prose th, .tl-prose td { padding: 10px 12px; border-bottom: 1px solid var(--tl-border); text-align: left; }
.tl-prose th {
  font-family: var(--tl-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-fg-3);
}
.tl-prose iframe { max-width: 100%; border-radius: var(--tl-r-md); border: 1px solid var(--tl-border); }

/* ── blog post extras: the meta separator and the tag row ── */
.tl-post-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tl-fg-4);
}
.tl-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; max-width: 860px; }
.tl-post-tag {
  font-family: var(--tl-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--tl-surface-2);
  border: 1px solid var(--tl-border);
  color: var(--tl-fg-3);
}

/* ── the blog card, shared by the homepage strip and the /blogs index ──
   Lifted out of trendslive-home.blade.php's inline <style> so one card
   definition serves both; .blog-grid itself lives in chrome.css. */
.blog{display:flex;flex-direction:column;border-radius:var(--tl-r-lg);overflow:hidden;border:1px solid var(--tl-border);background:var(--tl-surface-1);transition:.18s}
.blog:hover{border-color:var(--tl-border-yellow);transform:translateY(-4px);box-shadow:var(--tl-shadow-md)}
.blog-img{height:172px;background-size:cover;background-position:center;position:relative}
.blog-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.55))}
.blog-cat{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--tl-font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 9px;border-radius:var(--tl-r-pill);background:var(--tl-yellow);color:#161920}
.blog-b{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.blog-meta{display:flex;align-items:center;gap:9px;font-family:var(--tl-font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-fg-3)}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--tl-fg-4)}
.blog-t{font-family:var(--tl-font-app);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.25;margin-top:11px;text-wrap:pretty}
.blog:hover .blog-t{color:var(--tl-yellow-ink)}
.blog-d{font-size:13px;color:var(--tl-fg-3);line-height:1.55;margin-top:9px}
.blog-read{display:inline-flex;align-items:center;gap:6px;font-family:var(--tl-font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-yellow-ink);margin-top:auto;padding-top:15px}

/* the index reuses the card but adds its own head, empty state and pager */
.tl-blogs { padding-bottom: 72px; }
.tl-blogs .blog-grid { margin-top: 4px; }
@media (max-width: 900px) { .tl-blogs .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tl-blogs .blog-grid { grid-template-columns: 1fr; } }
.tl-blogs-empty {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--tl-border);
  border-radius: var(--tl-r-lg);
  background: var(--tl-surface-1);
  color: var(--tl-fg-3);
  font-size: 14px;
}
.tl-blogs-pager { display: flex; justify-content: center; margin-top: 34px; }

/* ── Browse Events map view (/events?view=map) ── */
.tl-map-wrap { display: flex; flex-direction: column; gap: 10px; }
.tl-map {
  height: 560px;
  border-radius: var(--tl-r-lg);
  border: 1px solid var(--tl-border);
  overflow: hidden;
  background: var(--tl-surface-2);
}
.tl-map-none {
  padding: 60px 24px;
  text-align: center;
  border: 1px dashed var(--tl-border);
  border-radius: var(--tl-r-lg);
  background: var(--tl-surface-1);
  color: var(--tl-fg-3);
  font-size: 14px;
}
.tl-map-note {
  font-family: var(--tl-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-fg-4);
}
/* the marker bubble is Google's own element, so it is styled unscoped */
.tl-map-pop a { display: block; color: #161920; text-decoration: none; }
.tl-map-pop b { display: block; font-size: 13px; margin-bottom: 3px; }
.tl-map-pop span { font-size: 12px; color: #444; }

/* ── .tl-pagination on the PUBLIC site ──
   The theme's copy lives in resources/sass/trendslive/_components.scss, but the
   public layout loads these static files and not the compiled bundle — so the
   pager under /blogs and a filtered /events had no styling at all. Same
   exception the organiser console makes in organiser-pages.css. Keep the three
   copies in step. */
.tl-pagination { margin-top: 4px; }
.tl-pagination nav { display: flex; justify-content: center; }
.tl-pagination .pagination {
  display: inline-flex; align-items: center; gap: 5px;
  list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
}
.tl-pagination .page-item .page-link,
.tl-pagination .page-item > span {
  min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center;
  border-radius: var(--tl-r-sm); border: 1px solid var(--tl-border); background: var(--tl-surface-2);
  color: var(--tl-fg-3); font-family: var(--tl-font-mono); font-size: 11px; text-decoration: none;
}
.tl-pagination .page-item .page-link:hover { color: var(--tl-fg); border-color: var(--tl-border-strong); }
.tl-pagination .page-item.active .page-link { background: var(--tl-yellow); color: #161920; border-color: var(--tl-yellow); }
.tl-pagination .page-item.disabled .page-link,
.tl-pagination .page-item.disabled > span { opacity: 0.4; }
.tl-pagination svg { width: 16px; height: 16px; }

/* a category chip whose icon is an uploaded image rather than an inline SVG */
.catchip .cc-ic img { width: 18px; height: 18px; object-fit: contain; display: block; }