/* ============================================================
   Sellup — Blog, single post, core pages, 404
   ============================================================ */

/* ── Prose (post/page content) ───────────────────────────── */
.su-prose { max-width: 72ch; font-size: var(--su-fs-base); line-height: 1.8; color: var(--su-text); }
.su-prose > * + * { margin-top: 1.1em; }
.su-prose h2 { font-size: var(--su-fs-lg); margin-top: 1.8em; }
.su-prose h3 { font-size: var(--su-fs-md); margin-top: 1.5em; }
.su-prose img { border-radius: var(--su-radius); }
.su-prose blockquote {
  border-left: 3px solid var(--su-accent);
  padding-left: 1.2rem; margin-left: 0;
  font-style: italic; color: var(--su-muted);
}
.su-prose ul, .su-prose ol { padding-left: 1.4rem; }
.su-prose li { margin-bottom: .4em; }
.su-prose a { text-decoration: underline; }
.su-prose code { background: var(--su-bg); padding: .15em .4em; border-radius: 4px; font-size: .9em; }
.su-prose hr { border: none; border-top: 1px solid var(--su-border); margin: 2em 0; }

/* ── Page header ─────────────────────────────────────────── */
.su-page-header { padding: clamp(1.5rem, 4vw, 2.75rem) 0 1.5rem; }
.su-page-title { font-size: clamp(1.8rem, 4vw, var(--su-fs-2xl)); margin: 0; }
.su-page-header.su-center { text-align: center; }
.su-page-entry { padding-bottom: 2.5rem; }

/* ── Blog grid + cards ───────────────────────────────────── */
.su-blog-grid { display: grid; gap: 1.6rem; }
@media (min-width: 640px)  { .su-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .su-blog-grid { grid-template-columns: repeat(3, 1fr); } }

.su-blog-card { overflow: hidden; display: flex; flex-direction: column; }

.su-blog-card-media { position: relative; display: block; }
.su-blog-card-frame { border-radius: var(--su-radius) var(--su-radius) 0 0; }
.su-blog-card-frame .su-img { transition: transform .5s var(--su-ease); }
.su-blog-card:hover .su-blog-card-frame .su-img { transform: scale(1.05); }

.su-blog-card-cat { position: absolute; top: .7rem; left: .7rem; }

.su-blog-card-body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.su-blog-card-meta { font-size: 12px; color: var(--su-muted); display: flex; gap: .5rem; align-items: center; }
.su-blog-card-title { font-size: var(--su-fs-md); margin: 0; line-height: 1.3; font-family: var(--su-font-body); font-weight: 700; }
.su-blog-card-title a { color: var(--su-heading); text-decoration: none; }
.su-blog-card-title a:hover { color: var(--su-primary); }
.su-blog-card-excerpt { font-size: var(--su-fs-sm); color: var(--su-muted); margin: 0; flex: 1; }
.su-blog-card-more { font-size: 12.5px; font-weight: 700; color: var(--su-primary); text-decoration: none; }

/* ── Single post ─────────────────────────────────────────── */
.su-read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: transparent; }
.su-read-progress #su-read-bar { display: block; height: 100%; width: 0; background: var(--su-accent); transition: width .1s linear; }

.su-post-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; text-align: center; }
.su-post-hero-inner { max-width: 760px; margin-inline: auto; }
.su-post-title { font-size: clamp(2rem, 5vw, var(--su-fs-3xl)); margin: .5rem 0; }
.su-post-meta { font-size: var(--su-fs-sm); color: var(--su-muted); display: flex; gap: .6rem; justify-content: center; align-items: center; }

.su-post-figure { margin-bottom: 2.5rem; }
.su-post-frame { border-radius: var(--su-radius-lg); box-shadow: var(--su-shadow); }

.su-post-layout { display: flex; justify-content: center; }
.su-post-content { max-width: 760px; width: 100%; }

.su-post-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--su-border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.su-post-tags a { display: inline-block; font-size: 12px; background: var(--su-surface); border: 1px solid var(--su-border); border-radius: 999px; padding: .3rem .8rem; margin: .2rem; text-decoration: none; color: var(--su-muted); }
.su-post-share { display: flex; align-items: center; gap: .6rem; font-size: var(--su-fs-sm); }
.su-post-share a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--su-border); border-radius: 50%; color: var(--su-heading); }
.su-post-share a:hover { background: var(--su-primary); color: #fff; }

.su-related-posts { margin-top: 3rem; border-top: 1px solid var(--su-border); }

/* ── About page ──────────────────────────────────────────── */
.su-about-hero .su-sec-inner { padding-block: clamp(3rem, 7vw, 5rem); }

.su-values-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .su-values-grid { grid-template-columns: repeat(4, 1fr); } }

.su-value-card { padding: 1.6rem; text-align: center; }
.su-value-icon {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: .9rem;
  background: color-mix(in srgb, var(--su-primary) 10%, var(--su-surface));
  color: var(--su-primary);
  border-radius: 50%; font-size: 1.25rem;
}
.su-value-card h3 { font-size: var(--su-fs-base); margin-bottom: .4rem; }
.su-value-card p { font-size: var(--su-fs-sm); color: var(--su-muted); margin: 0; }

.su-about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; }
@media (min-width: 800px) { .su-about-stats { grid-template-columns: repeat(4, 1fr); } }
.su-about-stat strong { display: block; font-family: var(--su-font-heading); font-size: clamp(1.8rem, 4vw, var(--su-fs-2xl)); color: #fff; }
.su-about-stat span { font-size: var(--su-fs-sm); color: rgba(255,255,255,.75); }

/* ── Contact page ────────────────────────────────────────── */
.su-contact-grid { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 900px) { .su-contact-grid { grid-template-columns: .8fr 1.2fr; align-items: start; } }

.su-contact-row { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.su-contact-row strong { display: block; color: var(--su-heading); font-size: var(--su-fs-sm); }
.su-contact-row a, .su-contact-row span { color: var(--su-muted); font-size: var(--su-fs-sm); text-decoration: none; }
.su-contact-row a:hover { color: var(--su-primary); }

.su-contact-form-wrap { padding: 1.75rem; }
.su-form-row-2 { display: grid; gap: 1rem; }
@media (min-width: 560px) { .su-form-row-2 { grid-template-columns: 1fr 1fr; } }
.su-form-field { margin-bottom: 1rem; }
.su-form-field label { display: block; margin-bottom: .35rem; }
.su-hp { position: absolute; left: -9999px; }
.su-contact-status { margin: .75rem 0 0; font-size: var(--su-fs-sm); font-weight: 600; }
.su-contact-status.ok { color: var(--su-success); }
.su-contact-status.bad { color: var(--su-error); }

/* ── FAQ accordion ───────────────────────────────────────── */
.su-faq-inner { max-width: 780px; }
.su-accordion { margin-top: 1.5rem; }
.su-acc-item { border: 1px solid var(--su-border); border-radius: var(--su-radius); margin-bottom: .75rem; background: var(--su-surface); overflow: hidden; }
.su-acc-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--su-fs-base); font-weight: 600; color: var(--su-heading);
  text-align: left;
}
.su-acc-q i { transition: transform var(--su-t) var(--su-ease); color: var(--su-muted); flex-shrink: 0; }
.su-acc-q[aria-expanded="true"] i { transform: rotate(180deg); }
.su-acc-a { padding: 0 1.3rem 1.2rem; }
.su-acc-a p { margin: 0; color: var(--su-muted); font-size: var(--su-fs-sm); line-height: 1.7; }

/* ── 404 ─────────────────────────────────────────────────── */
.su-404 { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1rem; max-width: 560px; margin-inline: auto; }
.su-404-code { font-family: var(--su-font-heading); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--su-border); margin: 0; }
.su-404-search { max-width: 420px; margin: 1.5rem auto; }
.su-404-actions { justify-content: center; }