/*
 * blog-shell.css: chrome around a Sugallat blog post body.
 * Loaded on blog-post pages only, after editorial.css, via extra_css in the page YAML.
 * Scope: post-head, breadcrumb-adjacent space, related strip, prev/next pager,
 *        author end-card, back-to-blog utility. Body typography lives in blog-content.css.
 *
 * Design source: /docs/blog-design-guidelines/01-article-shell.md
 * Tokens: only --shell-max is added. Everything else reuses main.css tokens.
 */

:root {
  --shell-max: 720px;
}

/* ---------- 4.1 Article header block ---------------------------------- */
/* Blog head is a Sugallat .page-hero (dark navy, square-patterns canvas is
   auto-injected by js/main.js) with a blog-specific byline row appended.
   Only fields the shared hero does not know about (post title measure, lede,
   byline, dates) get local overrides. Everything else piggybacks on the
   .page-hero rules already defined in editorial.css + main.css. */

/* Override editorial.css .page-hero > .container > .page-hero-content
   (which centers text + caps width to 720px). Article shell wants
   left-aligned prose within a slightly wider reading measure so the H1
   breathes and the byline row lines up under the lede. */
.post-hero > .container > .page-hero-content {
  max-width: var(--shell-max);
  text-align: left;
  margin: 0 auto;
}
.post-hero > .container > .page-hero-content .hero-eyebrow {
  margin-left: 0;
  margin-right: 0;
}
/* Slightly tighter top padding than the marketing pages. Blog posts do not
   have hero buttons, so 100px header space above the eyebrow is enough. */
.post-hero { padding-top: 100px; padding-bottom: 56px; }

/* Post title: keep the shell's tighter Source Serif treatment (line-height,
   opsz axis, letter-spacing) but inherit hero white color + shadow from the
   .page-hero h1 rule in editorial.css. */
.post-hero .post-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 60;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  margin: 0 0 1.25rem;
}

/* Lede: serif to bridge the H1 and the article body, on cream-white so it
   sits comfortably on the dark hero without competing with the H1.
   Overrides .page-hero > .container > .page-hero-content p (editorial.css)
   which centers + max-width:56ch's the paragraph. We keep 56ch but restore
   left alignment inside the shell reading measure. */
.post-hero .post-hero-content p.post-lede,
.post-hero > .container > .page-hero-content p.post-lede {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 24;
  color: rgba(226, 232, 240, 0.92);
  margin: 0 0 2rem;
  margin-left: 0;
  margin-right: 0;
  max-width: 56ch;
}

/* Eyebrow: keep the .hero-eyebrow cobalt-hairline-on-white behaviour that
   editorial.css already gives .page-hero .hero-eyebrow. .post-eyebrow now
   only carries the interactive-anchor semantics. */
a.post-eyebrow {
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
a.post-eyebrow:hover,
a.post-eyebrow:focus-visible {
  color: #ffffff;
  border-top-color: #ffffff;
}
a.post-eyebrow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Meta row: publish date (+ optional updated) and read-time. Author name /
   role / profile link live only in the end-of-article .post-author card and
   in the JSON-LD Person schema. Removing the byline from the hero drops
   the "authority signal" the top hairline used to separate, so this row
   sits flush under the lede with no rule, dialled down in weight compared
   to the previous byline treatment. Middot separator between the date and
   read-time gives it enough rhythm to read as an editorial metadata line
   rather than a naked timestamp. */
.post-hero .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0;
  color: rgba(226, 232, 240, 0.75);
}
.post-hero .post-byline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(226, 232, 240, 0.75);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.post-hero .post-byline-label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
}
.post-hero .post-byline-name {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.15s ease, color 0.15s ease;
}
a.post-byline-name:hover,
a.post-byline-name:focus-visible {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.85);
}
a.post-byline-name:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
}
.post-hero .post-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.post-hero .post-byline + .post-dates {
  position: relative;
  padding-left: 1rem;
}
.post-hero .post-byline + .post-dates::before {
  content: "\00b7";
  position: absolute;
  left: 0;
  color: rgba(226, 232, 240, 0.4);
}
@media (max-width: 480px) {
  .post-hero .post-byline + .post-dates {
    padding-left: 0;
  }
  .post-hero .post-byline + .post-dates::before {
    content: none;
  }
}
.post-hero .post-dates > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.post-hero .post-dates dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
}
.post-hero .post-dates dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
}
.post-hero .post-read-time {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  position: relative;
  padding-left: 1rem;
}
.post-hero .post-read-time::before {
  content: "\00b7";
  position: absolute;
  left: 0;
  color: rgba(226, 232, 240, 0.4);
}
@media (max-width: 480px) {
  .post-hero .post-read-time {
    padding-left: 0;
  }
  .post-hero .post-read-time::before {
    content: none;
  }
}

/* Breadcrumb, promoted out of the hero to sit on the light body background
   directly under the dark hero. Overrides the default main.css .breadcrumb
   which uses negative-margin overlay semantics designed for a decorative
   hero image. Here we want a distinct light strip. */
.post-breadcrumb {
  background: #ffffff;
  border-bottom: 1px solid var(--color-rule);
  padding: 0.85rem 0;
  margin: 0;
  pointer-events: auto;
}
.post-breadcrumb > .container {
  max-width: var(--shell-max);
}
.post-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(15, 23, 42, 0.55);
}
.post-breadcrumb li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
  color: rgba(15, 23, 42, 0.35);
}
.post-breadcrumb a {
  color: rgba(15, 23, 42, 0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}
.post-breadcrumb a:hover,
.post-breadcrumb a:focus-visible {
  color: var(--color-cobalt);
}
.post-breadcrumb [aria-current="page"] {
  color: var(--color-ink);
}

/* ---------- 4.3 Related articles strip -------------------------------- */

.post-related {
  background: #ffffff;
  padding: 56px 0 40px;
  border-top: 1px solid var(--color-rule);
}
.post-related > .container {
  max-width: var(--shell-max);
}
.post-strip-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  margin: 0 0 1.5rem;
}
.post-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-related-item {
  border-top: 1px solid var(--color-rule);
}
.post-related-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}
.post-related-item a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
  align-items: baseline;
  padding: 1.15rem 0;
  text-decoration: none;
  color: var(--color-ink);
  transition: color 0.15s ease, padding-left 0.2s ease;
}
.post-related-eyebrow {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cobalt);
}
.post-related-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.post-related-item time {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(15, 23, 42, 0.5);
}
.post-related-item a:hover {
  color: var(--color-cobalt);
  padding-left: 0.5rem;
}
.post-related-item a:hover .post-related-title {
  color: var(--color-cobalt);
}
.post-related-item a:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 4.4 Prev / next pager ------------------------------------- */

.post-pager {
  background: #ffffff;
  padding: 8px 0 64px;
}
.post-pager > .container {
  max-width: var(--shell-max);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.post-pager-link {
  display: block;
  padding: 1.25rem 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.post-pager-link:hover {
  border-color: var(--color-cobalt);
  transform: translateY(-2px);
}
.post-pager-link:active {
  transform: translateY(0);
}
.post-pager-link:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 3px;
}
.post-pager-prev {
  text-align: left;
}
.post-pager-next {
  text-align: right;
}
.post-pager-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  margin-bottom: 0.45rem;
}
.post-pager-prev .post-pager-label::before {
  content: "\2190 \00a0";
}
.post-pager-next .post-pager-label::after {
  content: "\00a0 \2192";
}
.post-pager-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .post-pager > .container {
    grid-template-columns: 1fr;
  }
  .post-pager-next {
    text-align: left;
  }
}

/* ---------- 4.5 Author end-card --------------------------------------- */

.post-author {
  background: var(--color-cream);
  padding: 56px 0 72px;
  border-top: 1px solid var(--color-rule);
}
.post-author > .container {
  max-width: var(--shell-max);
}
.post-author-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.75rem;
  align-items: start;
  padding-top: 1.5rem;
  border-top: 3px solid var(--color-cobalt);
}
.post-author-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.post-author-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin: 0;
}
.post-author-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  margin: 0.4rem 0 1rem;
}
.post-author-bio {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(15, 23, 42, 0.78);
  margin: 0 0 1rem;
}
.post-author-more a {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-cobalt);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.post-author-more a:hover {
  border-bottom-color: var(--color-cobalt);
}
.post-author-more a:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (max-width: 640px) {
  .post-author-card {
    grid-template-columns: 1fr;
  }
  .post-author-photo {
    width: 96px;
    height: 96px;
  }
}

/* ---------- 4.6 Back-to-blog utility ---------------------------------- */

.post-back {
  background: #ffffff;
  padding: 24px 0 0;
}
.post-back > .container {
  max-width: var(--shell-max);
}
.post-back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.2s ease;
}
.post-back-link:hover {
  color: var(--color-cobalt);
  transform: translateX(-3px);
}
.post-back-link:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Reduced motion guardrail ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .post-pager-link,
  .post-related-item a,
  .post-back-link {
    transition: color 0.15s ease, border-color 0.2s ease;
    transform: none !important;
  }
}