/*
 * Public-facing styling for the sk-* classes BlockRender.php emits.
 *
 * Linked into every page Shell.php wraps (see that file). Structural and
 * responsive rules only — colors, backgrounds and other per-instance
 * values a writer picks in the editor arrive as inline CSS custom
 * properties on the element itself (e.g. --sk-embed-ratio below, or a
 * future block's --sk-hero-bg) and are consumed here by var(), not
 * hardcoded, so one rule serves every instance of a block regardless of
 * what the writer set.
 *
 * These rules already existed, admin-editor-side only, in studio.css —
 * copied here rather than rewritten, so every already-published post
 * using a callout/columns/gallery/embed block starts rendering correctly
 * on the real site the moment this file exists, with no other change.
 */

.sk-divider { border: none; border-top: 1px solid #e3e7ed; margin: 2em 0; }
.sk-checklist { list-style: none; padding: 0; }
.sk-check { display: flex; gap: 8px; align-items: baseline; }
.sk-callout { border-radius: 10px; padding: 14px 16px; margin: 1em 0; }
.sk-callout--info { background: #e7f1fc; }
.sk-callout--warning { background: #fdf3e3; }
.sk-toc { border: 1px solid #e3e7ed; border-radius: 10px; padding: 14px 18px; margin: 1.5em 0; }
.sk-toc__label { font-weight: 650; margin: 0 0 .4em; }
.sk-embed { position: relative; padding-top: var(--sk-embed-ratio, 56.25%); margin: 1.5em 0; }
.sk-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 1.5em 0; }
.sk-columns { display: grid; gap: 20px; margin: 1.5em 0; }
/* Mobile-first: one column below 640px, side by side above it. Copied from
   studio.css's own mirror of this rule, which already had this media query
   — this file's copy had drifted without it, so every published columns
   block rendered stacked (one implicit grid column) on the real site
   regardless of viewport, the exact class of bug slice 1 fixed for the
   other sk-* rules. */
@media (min-width: 640px) { .sk-columns { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* Hero block (Phase 5 slice 5). --sk-hero-bg is the writer's chosen solid
   color; a background <img> (when one is set) layers on top of it via
   object-fit, so a color still shows while the image lazy-loads or if none
   is set at all. */
.sk-hero {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 14px; min-height: 320px; padding: 48px 32px; margin: 1.5em 0; border-radius: 14px; overflow: hidden;
  background: var(--sk-hero-bg, #16202c); color: #fff;
}
.sk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sk-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Only actually visible when a background image sits behind it — over a
     plain color this is a no-op darkening of the same color, which is
     harmless, but it is what keeps white heading text legible over a
     photo instead of every writer having to pick a photo-safe color too. */
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}
.sk-hero__heading, .sk-hero__subhead, .sk-hero__cta { position: relative; z-index: 1; margin: 0; }
.sk-hero__heading { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; }
.sk-hero__subhead { font-size: 1.0625rem; max-width: 46em; opacity: .92; }
.sk-hero__cta { margin-top: 6px; }

/* Feature grid (Phase 5 slice 6). */
.sk-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 1.5em 0; }
.sk-feature-grid__item { padding: 20px; border: 1px solid #e3e7ed; border-radius: 12px; }
.sk-feature-grid__heading { margin: 0 0 .4em; font-size: 1.0625rem; }
.sk-feature-grid__text { margin: 0; opacity: .85; }