/* Page chrome (inc/blog.php): the breadcrumbs and rounded title card shared by pages
   that opt in and by the blog. Colours, type and surfaces come from the look's
   variables; a look may set the --sc-blog-* ones below. The rest of the blog is in
   blog.css, which loads after this file.
   Widths: phone up to 640px, tablet to 1024px, desktop above. */
:where(:root) {
  --sc-blog-card-tint: var(--sc-band);
  --sc-blog-soft: var(--sc-band);
  --sc-blog-current: var(--sc-band);
  --sc-blog-current-line: var(--sc-line);
  --sc-blog-button: var(--sc-heading);
  --sc-blog-button-ink: #fff;
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc-blog-wrap { width: min(var(--sc-wide), calc(100% - 2 * var(--sc-gutter))); margin-inline: auto; }
.sc-blog-sep { margin-inline: 8px; color: var(--sc-muted); opacity: .6; }
.sc-blog-main { overflow-x: clip; }

/* Breadcrumbs sit under the floating header. */
.sc-breadcrumbs { padding-top: 92px; color: var(--sc-muted); font-size: 14px; line-height: 1.5; }
.admin-bar .sc-breadcrumbs { padding-top: 124px; }
.sc-breadcrumbs p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 0; }
.sc-breadcrumbs a { color: var(--sc-muted); text-decoration: none; }
.sc-breadcrumbs a:hover { color: var(--sc-heading); text-decoration: underline; }
.sc-breadcrumbs [aria-current] { color: var(--sc-text); }
.sc-breadcrumbs__sep { opacity: .6; }
/* A slider placed under the menu (ShootCal Slider) opens the page behind the floating
   header, so the breadcrumbs that follow it need no room for the header. */
.sc-page-opening > .natural-photo-slider { margin-top: 0; }
.sc-page-opening:has(+ .sc-breadcrumbs) > .natural-photo-slider { margin-bottom: 24px; }
.sc-page-opening + .sc-breadcrumbs, .admin-bar .sc-page-opening + .sc-breadcrumbs { padding-top: 0; margin-bottom: 32px; }

/* Rounded title card (lists and posts). */
.sc-title-card-wrap { padding-top: 24px; }
.sc-title-card {
  position: relative; overflow: hidden; padding: 56px; border-radius: 32px; text-align: center;
  background: linear-gradient(110deg, var(--sc-paper) 0%, var(--sc-blog-card-tint) 100%);
  box-shadow: 0 0 0 1px var(--sc-line), var(--sc-shadow);
}
.sc-managed-site .sc-title-card__eyebrow { margin: 0 0 16px; color: var(--sc-accent); font: 500 13px/1.5 var(--sc-sans); letter-spacing: .16em; text-transform: uppercase; }
.sc-title-card__eyebrow a { color: inherit; text-decoration: none; }
.sc-title-card__eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sc-managed-site .sc-title-card__title { max-width: 900px; margin: 0 auto; font-size: clamp(32px, 2vw + 16px, 52px); line-height: 1.08; text-wrap: balance; }
.sc-title-card__title::after { content: ""; display: block; width: 56px; height: 1px; margin: 24px auto 0; background: var(--sc-accent); }
.sc-managed-site .sc-title-card__meta, .sc-managed-site .sc-title-card__powered { margin: 24px 0 0; color: var(--sc-muted); font-size: 15px; letter-spacing: .04em; }
.sc-managed-site .sc-title-card__powered { margin-top: 16px; font-size: 14px; }
.sc-title-card__meta a, .sc-title-card__powered a { color: var(--sc-muted); }
.sc-title-card__meta a { text-decoration: none; }
.sc-title-card__meta a:hover, .sc-title-card__powered a:hover { color: var(--sc-heading); }
.sc-title-card__intro { max-width: 720px; margin: 24px auto 0; color: var(--sc-muted); font-size: 17px; }
.sc-title-card__intro > :last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .sc-title-card { padding-inline: 40px; }
}
@media (max-width: 640px) {
  .sc-breadcrumbs { padding-top: 76px; }
  .admin-bar .sc-breadcrumbs { padding-top: 122px; }
  .sc-title-card-wrap { padding-top: 16px; }
  .sc-title-card { padding: 40px 20px; border-radius: 24px; }
}