/* ═══════════════════════════════════════════════════════
   RC Blog — screen.css
   Tailwind handles most; this covers:
   • Masonry layout  • Ghost post content
   • Dark mode overrides  • Animations
   ═══════════════════════════════════════════════════════ */

/* ── Masonry ─────────────────────────────────────────── */
.masonry           { column-count: 1; column-gap: 2rem; }
@media (min-width: 768px)  { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 2rem; }

/* ── Material Symbols ────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* ── Ghost Post Content (Prose) ──────────────────────── */
.gh-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #2c2f30;
}
.gh-content > * + * { margin-top: 1.25rem; }

.gh-content h1, .gh-content h2, .gh-content h3,
.gh-content h4, .gh-content h5, .gh-content h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2.25rem;
  margin-bottom: .75rem;
  color: #1a1f2e;
  line-height: 1.25;
}
.gh-content h1 { font-size: 2rem; }
.gh-content h2 { font-size: 1.6rem; padding-bottom: .5rem; border-bottom: 1px solid #e6e8ea; }
.gh-content h3 { font-size: 1.3rem; }
.gh-content h4 { font-size: 1.1rem; }
.gh-content p  { margin-bottom: 1.25rem; }
.gh-content a  { color: #0059b6; text-decoration: underline; text-underline-offset: 3px; }
.gh-content a:hover { color: #004da0; }
.gh-content ul, .gh-content ol { padding-left: 1.75rem; margin-bottom: 1.25rem; }
.gh-content li     { margin-bottom: .5rem; }
.gh-content ul     { list-style-type: disc; }
.gh-content ol     { list-style-type: decimal; }
.gh-content strong { font-weight: 700; color: #1a1f2e; }
.gh-content em     { font-style: italic; }
.gh-content hr     { border: none; border-top: 1px solid #e6e8ea; margin: 2.5rem 0; }

.gh-content blockquote {
  border-left: 4px solid #0059b6;
  padding: 1rem 1.5rem;
  background: #eff1f2;
  border-radius: 0 .75rem .75rem 0;
  font-style: italic;
  margin: 2rem 0;
  color: #595c5d;
}
.gh-content blockquote p { margin: 0; }

.gh-content code {
  background: #e6e8ea;
  padding: .15rem .45rem;
  border-radius: .3rem;
  font-size: .875rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #0059b6;
}
.gh-content pre {
  background: #1a1f2e;
  color: #e6e8ea;
  padding: 1.25rem 1.5rem;
  border-radius: .75rem;
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid #30363d;
  position: relative;
}
.gh-content pre code { background: transparent; color: inherit; padding: 0; font-size: .875rem; }
.gh-content img {
  border-radius: .75rem;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  display: block;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.gh-content figure { margin: 2rem 0; }
.gh-content figcaption { text-align: center; font-size: .8rem; color: #757778; margin-top: .75rem; }
.gh-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: .9rem;
}
.gh-content th { background: #e6e8ea; font-weight: 700; text-align: left; padding: .75rem 1rem; border: 1px solid #dadddf; }
.gh-content td { padding: .75rem 1rem; border: 1px solid #dadddf; }
.gh-content tr:nth-child(even) { background: #f5f6f7; }

/* Ghost cards */
.gh-content .kg-callout-card {
  padding: 1rem 1.25rem; border-radius: .75rem; margin: 2rem 0;
  display: flex; gap: .75rem; align-items: flex-start;
  background: #eff1f2; border: 1px solid #e6e8ea;
}
.gh-content .kg-callout-emoji { font-size: 1.25rem; flex-shrink: 0; }
.gh-content .kg-bookmark-card { border: 1px solid #e6e8ea; border-radius: .75rem; overflow: hidden; margin: 2rem 0; }
.gh-content .kg-bookmark-container { display: flex; text-decoration: none; color: inherit; }
.gh-content .kg-bookmark-content { padding: 1.25rem; flex: 1; }
.gh-content .kg-bookmark-title { font-weight: 700; color: #2c2f30; margin-bottom: .25rem; }
.gh-content .kg-bookmark-description { font-size: .85rem; color: #595c5d; }
.gh-content .kg-bookmark-metadata { font-size: .75rem; color: #757778; margin-top: .5rem; }
.gh-content .kg-bookmark-thumbnail { width: 140px; object-fit: cover; border-radius: 0; margin: 0; box-shadow: none; flex-shrink: 0; }
.gh-content .kg-width-wide { max-width: calc(100% + 6rem); margin-left: -3rem; }
.gh-content .kg-width-full { max-width: 100vw; margin-left: calc(-50vw + 50%); border-radius: 0; }

/* Code copy button */
.copy-btn {
  position: absolute; top: .75rem; right: .75rem;
  padding: .25rem .5rem; background: rgba(255,255,255,.1);
  border: none; border-radius: .35rem; color: #e6e8ea;
  cursor: pointer; font-size: .75rem;
  display: flex; align-items: center; gap: .25rem;
  transition: background .15s;
}
.copy-btn:hover { background: rgba(255,255,255,.2); }

/* ── Dark mode: content ──────────────────────────────── */
.dark .gh-content { color: #c9d1d9; }
.dark .gh-content h1, .dark .gh-content h2,
.dark .gh-content h3, .dark .gh-content h4 { color: #e6e8ea; }
.dark .gh-content h2 { border-color: #30363d; }
.dark .gh-content a  { color: #4b92ff; }
.dark .gh-content strong { color: #e6e8ea; }
.dark .gh-content blockquote { background: #161b22; border-color: #4b92ff; color: #8b949e; }
.dark .gh-content code { background: #21262d; color: #79c0ff; }
.dark .gh-content hr  { border-color: #30363d; }
.dark .gh-content table th { background: #21262d; color: #e6e8ea; border-color: #30363d; }
.dark .gh-content table td { color: #c9d1d9; border-color: #30363d; }
.dark .gh-content table tr:nth-child(even) { background: #161b22; }
.dark .gh-content .kg-callout-card { background: #161b22; border-color: #30363d; }
.dark .gh-content .kg-bookmark-card { border-color: #30363d; }
.dark .gh-content .kg-bookmark-title { color: #e6e8ea; }
.dark .gh-content .kg-bookmark-description { color: #8b949e; }

/* ── Dark mode: Tailwind surface overrides ───────────── */
.dark body                          { background-color: #0d1117; color: #e6e8ea; }
.dark .bg-surface                   { background-color: #0d1117 !important; }
.dark .bg-surface-bright            { background-color: #161b22 !important; }
.dark .bg-surface-container-lowest  { background-color: #161b22 !important; }
.dark .bg-surface-container         { background-color: #21262d !important; }
.dark .bg-surface-container-low     { background-color: #1c2128 !important; }
.dark .text-on-background           { color: #e6e8ea !important; }
.dark .text-on-surface              { color: #e6e8ea !important; }
.dark .text-on-surface-variant      { color: #8b949e !important; }
.dark .text-outline                 { color: #6e7681 !important; }
.dark .border-surface-container     { border-color: #30363d !important; }
.dark .bg-secondary-container       { background-color: #1f3a6e !important; }
.dark .text-on-secondary-container  { color: #79a4f8 !important; }

/* ── Reading progress ────────────────────────────────── */
#reading-progress { transition: width .1s linear; }

/* ── Animations ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.masonry-item { animation: fadeUp .45s ease both; }
.masonry-item:nth-child(2) { animation-delay: .05s; }
.masonry-item:nth-child(3) { animation-delay: .10s; }
.masonry-item:nth-child(4) { animation-delay: .15s; }
.masonry-item:nth-child(5) { animation-delay: .20s; }
.masonry-item:nth-child(6) { animation-delay: .25s; }

/* Hide Ghost's default portal trigger button */
.gh-portal-triggerbtn { display: none !important; }