/* Sitecraft Publish — public blog styles · by Innloop Technologies
   Colours come from the website's own palette (set in config.php). */

.scp { display: block; background: var(--scp-bg); color: var(--scp-text); }
.scp .container.narrow { max-width: 820px; }
.scp img { max-width: 100%; height: auto; display: block; }

/* ---------- top band ---------- */
.scp-hero { padding: 90px 0 60px; text-align: center; border-bottom: 1px solid var(--scp-border); }
.scp-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--scp-accent); font-weight: 600; margin-bottom: 14px; }
.scp-hero h1 { font-size: clamp(36px, 5vw, 58px); margin-bottom: 16px; }
.scp-hero p { max-width: 640px; margin: 0 auto; color: var(--scp-muted); font-size: 17px; }

/* ---------- category chips ---------- */
.scp-list { padding: 56px 0 90px; }
.scp-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.scp-filters a { padding: 8px 18px; border: 1px solid var(--scp-border); border-radius: 30px; font-size: 13px; letter-spacing: .5px; color: var(--scp-muted); background: var(--scp-card); transition: all .2s; }
.scp-filters a:hover { border-color: var(--scp-accent); color: var(--scp-accent); }
.scp-filters a.on { background: var(--scp-accent); border-color: var(--scp-accent); color: #fff; }

/* ---------- tiles ---------- */
.scp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.scp-tile { background: var(--scp-card); border: 1px solid var(--scp-border); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.scp-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(43, 38, 36, .10); }
.scp-tile-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--scp-border); }
.scp-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.scp-tile:hover .scp-tile-img img { transform: scale(1.04); }
.scp-tile-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.scp-tile h3 { font-size: 22px; margin: 10px 0 12px; }
.scp-tile h3 a:hover { color: var(--scp-accent); }
.scp-tile p { color: var(--scp-muted); font-size: 14.5px; margin-bottom: 18px; flex: 1; }
.scp-more { font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--scp-accent); }
.scp-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--scp-muted); }
.scp-cat { color: var(--scp-accent); font-weight: 600; }

/* first tile on the blog home is a large feature */
.scp-list:not(.scp-more-list) .scp-grid .scp-tile:first-child { grid-column: 1 / -1; flex-direction: row; }
.scp-list:not(.scp-more-list) .scp-grid .scp-tile:first-child .scp-tile-img { flex: 1.3; aspect-ratio: auto; min-height: 360px; }
.scp-list:not(.scp-more-list) .scp-grid .scp-tile:first-child .scp-tile-body { flex: 1; padding: 44px; justify-content: center; }
.scp-list:not(.scp-more-list) .scp-grid .scp-tile:first-child h3 { font-size: clamp(26px, 3vw, 36px); }

.scp-empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--scp-border); background: var(--scp-card); }
.scp-empty h3 { font-size: 26px; margin-bottom: 8px; }
.scp-empty p { color: var(--scp-muted); }

.scp-pages { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 50px; font-size: 14px; color: var(--scp-muted); }
.scp-pages a { color: var(--scp-accent); font-weight: 600; }

.scp-btn { display: inline-block; margin-top: 18px; padding: 14px 30px; background: var(--scp-accent); color: #fff; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

/* ---------- article page ---------- */
.scp-preview-bar { background: #fff4d6; border-bottom: 1px solid #ecd9a0; color: #6b5310; text-align: center; padding: 10px 16px; font-size: 14px; }
.scp-preview-bar a { text-decoration: underline; font-weight: 600; }
.scp-article-head { padding: 60px 0 36px; text-align: center; }
.scp-article-head .scp-meta { justify-content: center; margin: 24px 0 18px; }
.scp-article-head h1 { font-size: clamp(32px, 4.6vw, 54px); }
.scp-back { font-size: 13px; color: var(--scp-muted); letter-spacing: .5px; }
.scp-back:hover { color: var(--scp-accent); }
.scp-lead { font-size: 19px; color: var(--scp-muted); margin-top: 18px; }
.scp-by { margin-top: 14px; font-size: 14px; color: var(--scp-accent); font-weight: 600; }
.scp-cover { margin: 0 auto 50px; }
.scp-cover img { width: 100%; max-height: 640px; object-fit: cover; }

.scp-body { font-size: 18px; line-height: 1.85; }
.scp-body > * + * { margin-top: 1.1em; }
.scp-body h2 { font-size: 32px; margin-top: 1.6em; }
.scp-body h3 { font-size: 25px; margin-top: 1.4em; }
.scp-body h4 { font-size: 20px; margin-top: 1.2em; }
.scp-body a { color: var(--scp-accent); text-decoration: underline; text-underline-offset: 3px; }
.scp-body ul { list-style: disc; padding-left: 1.4em; }
.scp-body ol { list-style: decimal; padding-left: 1.4em; }
.scp-body li + li { margin-top: .35em; }
.scp-body blockquote { border-left: 3px solid var(--scp-accent); padding: 6px 0 6px 24px; font-family: 'Playfair Display', Georgia, serif; font-size: 23px; font-style: italic; color: var(--scp-text); }
.scp-body img { margin: 1.6em auto; }
.scp-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 1.6em 0; }
.scp-body pre { background: var(--scp-card); border: 1px solid var(--scp-border); padding: 16px; overflow-x: auto; font-size: 14px; }
.scp-body .ql-align-center { text-align: center; }
.scp-body .ql-align-right { text-align: right; }
.scp-body .ql-align-justify { text-align: justify; }
.scp-body .ql-indent-1 { padding-left: 2em; }
.scp-body .ql-indent-2 { padding-left: 4em; }
.scp-body .ql-size-large { font-size: 1.3em; }
.scp-body .ql-size-small { font-size: .85em; }

.scp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 56px 0 20px; padding-top: 28px; border-top: 1px solid var(--scp-border); }
.scp-share span { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--scp-muted); margin-right: 6px; }
.scp-share a, .scp-share button { font: inherit; font-size: 13px; padding: 8px 16px; border: 1px solid var(--scp-border); background: var(--scp-card); color: var(--scp-text); cursor: pointer; }
.scp-share a:hover, .scp-share button:hover { border-color: var(--scp-accent); color: var(--scp-accent); }

.scp-more-list { border-top: 1px solid var(--scp-border); }
.scp-more-list h2 { text-align: center; font-size: 34px; margin-bottom: 40px; }

/* ---------- phones & tablets ---------- */
@media (max-width: 980px) {
  .scp-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 680px) {
  .scp .container { padding: 0 18px; }
  .scp-hero { padding: 56px 0 40px; }
  .scp-list { padding: 36px 0 60px; }
  .scp-grid { grid-template-columns: 1fr; }
  .scp-list:not(.scp-more-list) .scp-grid .scp-tile:first-child { flex-direction: column; }
  .scp-list:not(.scp-more-list) .scp-grid .scp-tile:first-child .scp-tile-img { min-height: 0; aspect-ratio: 4 / 3; }
  .scp-list:not(.scp-more-list) .scp-grid .scp-tile:first-child .scp-tile-body { padding: 24px 22px 28px; }
  .scp-article-head { padding: 36px 0 24px; }
  .scp-body { font-size: 17px; }
  .scp-body h2 { font-size: 26px; }
}