/* ============================================================
   CINQ.IN Blog Post Styles — AstroWind-based styling guide
   Replicates AstroWind SinglePost + Tailwind Typography (prose)
   ============================================================ */

/* Prevent horizontal overflow (sticky header padding) */
html, body { overflow-x: hidden; }
.sf-header { max-width: 100vw; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: rgb(16 16 16);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Mobile refinements for post pages ---------- */
@media (max-width: 640px) {
  .post-shell { padding: 2.5rem 1.25rem; }
  .post-title { font-size: 1.9rem !important; }
  .post-excerpt { font-size: 1.15rem !important; text-align: left; }
  .post-hero { margin-bottom: 1.25rem; }
  .prose { margin-top: 1.5rem; font-size: 1rem; }
  .prose h2 { font-size: 1.45em; }
  .prose h3 { font-size: 1.25em; }
  .back-to-blog { padding: 1.5rem 1.25rem 2.5rem; }
  .related-posts { padding: 0 1.25rem 2.5rem; }
  .related-grid { grid-template-columns: 1fr; }
  .related-card .thumb { height: 220px; }
  .post-footer { flex-direction: column; align-items: flex-start; }
  .post-share { margin-top: 0.75rem; align-self: flex-start; }
}

:root {
  --aw-primary: rgb(1 97 239);
  --aw-secondary: rgb(1 84 207);
  --aw-text-default: rgb(16 16 16);
  --aw-text-muted: rgb(16 16 16 / 66%);
  --aw-text-heading: rgb(0 0 0);
  --aw-bg-page: rgb(255 255 255);
  --aw-border: rgb(228 228 231);
  --aw-tag-bg: rgb(243 244 246);
}

/* ---------- Post shell ---------- */
.post-shell {
  padding: 2rem 1.5rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .post-shell { padding: 4rem 1.5rem; } }

.post-container { max-width: 48rem; margin: 0 auto; } /* max-w-3xl */

/* ---------- Post header ---------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 0 0 0.5rem;
  font-size: 0.925rem;
  color: var(--aw-text-default);
}
.post-meta svg { width: 1rem; height: 1rem; display: inline-block; vertical-align: -2px; margin-right: 4px; color: #9ca3af; }
.post-meta a { color: var(--aw-text-default); }
.post-meta a:hover { text-decoration: underline; }
.post-meta .sep { color: #9ca3af; }

.post-title {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--aw-text-heading);
  margin: 0;
}
@media (min-width: 768px) { .post-title { font-size: 3rem; } }

.post-excerpt {
  max-width: 48rem;
  margin: 1rem 0 2rem;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--aw-text-muted);
  text-align: justify;
}
@media (min-width: 768px) { .post-excerpt { font-size: 1.5rem; } }

.post-hero {
  display: block;
  width: 100%;
  height: auto;
  max-width: 900px;
  margin: 0 auto 1.5rem;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  background: #9ca3af;
  object-fit: contain;
}

/* ---------- Prose body (Tailwind Typography, prose-md/lg) ---------- */
.prose {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--aw-text-default);
}
@media (min-width: 1024px) { .prose { font-size: 1.125rem; } }
.prose > *:first-child { margin-top: 0; }

.prose p { margin: 1.25em 0; }

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--aw-text-heading);
  scroll-margin-top: 80px;
}
.prose h2 { font-size: 1.6em; margin: 2em 0 1em; }
.prose h3 { font-size: 1.35em; margin: 1.8em 0 0.9em; }
.prose h4 { font-size: 1.15em; margin: 1.6em 0 0.8em; }
.prose h5 { font-size: 1.05em; margin: 1.5em 0 0.7em; }
.prose h6 { font-size: 1em; margin: 1.5em 0 0.7em; color: var(--aw-text-muted); }

.prose a { color: var(--aw-primary); text-decoration: none; font-weight: 500; }
.prose a:hover { color: var(--aw-secondary); text-decoration: underline; }

.prose strong { font-weight: 700; color: var(--aw-text-heading); }

.prose ul, .prose ol { margin: 1.25em 0; padding-left: 1.625em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0.25em 0; padding-left: 0.375em; }
.prose li > ul, .prose li > ol { margin: 0.25em 0; }

.prose blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 1.25em;
  border-left: 3px solid var(--aw-border);
  font-style: italic;
  color: var(--aw-text-muted);
}
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after { content: none; }

.prose hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--aw-border);
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.prose img + em,
.prose figcaption { display: block; text-align: center; font-size: 0.875em; color: var(--aw-text-muted); margin-top: -1em; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  font-weight: 600;
  background: var(--aw-tag-bg);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
}
.prose pre {
  margin: 1.6em 0;
  padding: 1.25em 1.5em;
  overflow-x: auto;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 0.5rem;
  font-size: 0.875em;
  line-height: 1.7;
}
.prose pre code { background: transparent; padding: 0; font-weight: 400; color: inherit; font-size: 1em; }

.prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 0.925em;
}
.prose table th, .prose table td { padding: 0.6em 0.9em; border-bottom: 1px solid var(--aw-border); }
.prose table th { font-weight: 700; color: var(--aw-text-heading); text-align: left; border-bottom-width: 2px; }
.prose table th[align="center"], .prose table td[align="center"] { text-align: center; }
.prose table th[align="right"], .prose table td[align="right"] { text-align: right; }

/* "Back to top" style inline anchors */
.prose .totop { font-size: 0.875em; font-weight: 600; }

/* ---------- Post footer: tags + share ---------- */
.post-footer {
  max-width: 48rem;
  margin: 2rem auto 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
@media (min-width: 640px) { .post-footer { flex-direction: row; align-items: center; } }

.post-tags { list-style: none; margin: 0; padding: 0; display: inline; }
.post-tags li {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.125rem 0.5rem;
  background: var(--aw-tag-bg);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: lowercase;
}
.post-tags li a { color: var(--aw-text-muted); }
.post-tags li a:hover { color: var(--aw-primary); }

.post-share { margin-top: 1.25rem; font-size: 0.925rem; color: #64748b; align-self: center; }
@media (min-width: 640px) { .post-share { margin-top: 0; } }
.post-share .share-label { font-weight: 700; color: #64748b; vertical-align: super; font-size: 0.85em; }
.post-share a { display: inline-block; margin-left: 0.5rem; color: #9ca3af; }
.post-share a:hover { color: var(--aw-text-heading); }
.post-share svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }

/* ---------- Back to blog ---------- */
.back-to-blog {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}
@media (min-width: 768px) { .back-to-blog { padding-top: 1rem; padding-bottom: 5rem; } }
.back-to-blog a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
  color: var(--aw-text-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.back-to-blog a:hover { color: var(--aw-text-heading); }
.back-to-blog svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Related posts ---------- */
.related-posts { padding: 0 1.5rem 3rem; }
.related-inner { max-width: 80rem; margin: 0 auto; }
.related-head { display: flex; flex-direction: column; margin-bottom: 2rem; }
@media (min-width: 1024px) { .related-head { flex-direction: row; justify-content: space-between; } }
.related-head h2 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
  color: var(--aw-text-heading);
}
@media (min-width: 640px) { .related-head h2 { font-size: 2.25rem; } }
.related-head a { color: var(--aw-text-muted); text-decoration: none; font-size: 0.925rem; }
.related-head a:hover { color: var(--aw-primary); }

.related-grid { display: grid; gap: 1.5rem; row-gap: 2.5rem; margin-bottom: -1.5rem; }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.related-card { margin-bottom: 1.5rem; }
.related-card .thumb {
  position: relative;
  height: 10rem;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  background: #9ca3af;
  overflow: hidden;
  margin-bottom: 1.5rem;
  display: block;
}
@media (min-width: 768px) { .related-card .thumb { height: 16rem; } }
.related-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card h3 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
@media (min-width: 640px) { .related-card h3 { font-size: 1.5rem; } }
.related-card h3 a { color: var(--aw-text-heading); text-decoration: none; transition: color .2s ease; }
.related-card h3 a:hover { color: var(--aw-primary); }
.related-card p { margin: 0; color: var(--aw-text-muted); font-size: 1.05rem; line-height: 1.6; }

/* ---------- Blog list page (AstroWind ListItem style) ---------- */
.blog-list-shell { padding: 3rem 1.5rem; margin: 0 auto; max-width: 56rem; }
@media (min-width: 640px) { .blog-list-shell { padding: 4rem 1.5rem; } }
@media (min-width: 1024px) { .blog-list-shell { padding: 5rem 1.5rem; } }

.blog-list-head { margin-bottom: 2rem; text-align: center; max-width: 48rem; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .blog-list-head { margin-bottom: 4rem; } }
.blog-list-head h1 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--aw-text-heading);
}
@media (min-width: 768px) { .blog-list-head h1 { font-size: 3rem; } }
.blog-list-head .sub { margin: 0.75rem 0 0; font-size: 1.25rem; font-weight: 500; color: #6b7280; }

.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list > li { margin-bottom: 3rem; }
@media (min-width: 768px) { .blog-list > li { margin-bottom: 5rem; } }

.blog-list-item {
  display: grid;
  gap: 1.5rem;
  max-width: 28rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .blog-list-item { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
.blog-list-item .thumb {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  background: #9ca3af;
}
@media (min-width: 768px) and (max-width: 1023px) { .blog-list-item .thumb { height: 18rem; padding-bottom: 0; } }
@media (min-width: 1024px) { .blog-list-item .thumb { padding-bottom: 56.25%; height: 0; } }
.blog-list-item .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-list-item .mt-2 { margin-top: 0.5rem; }
.blog-list-item .meta {
  font-size: 0.875rem;
  color: var(--aw-text-default);
  margin-bottom: 0.25rem;
}
.blog-list-item .meta svg {
  width: 0.875rem;
  height: 0.875rem;
  max-width: 0.875rem;
  max-height: 0.875rem;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 3px;
  color: #9ca3af;
  fill: none;
}
.blog-list-item .meta .sep { color: #9ca3af; margin: 0 3px; }
.blog-list-item .meta a { color: var(--aw-text-default); text-decoration: none; }
.blog-list-item .meta a:hover { text-decoration: underline; }
.blog-list-item h2 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
@media (min-width: 640px) { .blog-list-item h2 { font-size: 1.5rem; } }
.blog-list-item h2 a { color: var(--aw-text-heading); text-decoration: none; transition: color .2s ease; }
.blog-list-item h2 a:hover { color: var(--aw-primary); }
.blog-list-item .excerpt { margin: 0; color: var(--aw-text-muted); font-size: 1.05rem; line-height: 1.6; }
.blog-list-item footer { margin-top: 1.25rem; }