/* Blog index and article pages.
   Hand-written companion to services.css, which supplies the colour tokens (including the
   local grey theme), the 18px root and the header and footer utilities. Breakpoints use
   the same rem values as the compiled utilities: 40rem (sm), 48rem (md), 64rem (lg). */

.blog {
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.blog-wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.blog-wrap--narrow { max-width: 48rem; }

.blog a:focus-visible,
.blog summary:focus-visible {
  outline: 2px solid var(--color-focused-border);
  outline-offset: 2px;
}

/* Keeps in-page anchor targets clear of the sticky header. */
.blog [id] { scroll-margin-top: 5rem; }

.blog-eyebrow {
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Hero */

.blog-hero {
  border-bottom: 1px solid var(--color-base-border);
  background: var(--color-base-300);
  padding-block: 2.5rem 3.5rem;
}

.blog-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .625rem;
  margin-bottom: 2.5rem;
  font-size: .75rem;
  letter-spacing: .06em;
}

.blog-crumbs li + li::before {
  content: "/";
  margin-right: .625rem;
  opacity: .5;
}

.blog-crumbs a:hover { text-decoration: underline; text-underline-offset: .3em; }
.blog-crumbs [aria-current] { font-weight: 500; }

.blog-hero h1 {
  margin-top: 1rem;
  font-size: 2rem;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.blog-lede {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.blog-meta {
  margin-top: 1.5rem;
  font-size: .75rem;
  letter-spacing: .04em;
}

/* Article body */

.blog-body { padding-block: 3rem 4rem; }

.blog-summary,
.blog-toc,
.blog-related {
  border: 1px solid var(--color-base-border);
  background: var(--color-base-200);
  padding: 1.5rem;
}

.blog-summary { border-left: 3px solid var(--color-base-content); }
.blog-summary p:last-child { margin-top: .75rem; font-size: 1rem; line-height: 1.65; }

.blog-toc { margin-top: 1rem; }

.blog-toc ol {
  display: grid;
  gap: .5rem;
  margin-top: .875rem;
  font-size: .875rem;
  line-height: 1.5;
  counter-reset: toc;
}

.blog-toc li { counter-increment: toc; display: flex; gap: .75rem; }
.blog-toc li::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; opacity: .55; }

.blog-toc a,
.blog-prose a,
.blog-faq a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.blog-toc a { text-decoration-color: var(--color-base-border); }
.blog-toc a:hover { text-decoration-color: currentColor; }
.blog-prose a:hover,
.blog-faq a:hover { text-decoration-thickness: 2px; }

.blog-prose section { margin-top: 3rem; }

.blog-prose h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.blog-prose h3 {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 600;
}

.blog-prose p,
.blog-prose li {
  font-size: 1rem;
  line-height: 1.7;
}

.blog-prose p { margin-top: 1rem; }
.blog-prose h3 + p { margin-top: .5rem; }

.blog-prose ul,
.blog-prose ol {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
  padding-left: 1.5rem;
}

.blog-prose ul { list-style: square; }
.blog-prose ol { list-style: decimal; }
.blog-prose li { padding-left: .25rem; }

/* Price tables: scroll sideways inside their own box on narrow screens. */

.blog-table {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--color-base-border);
  background: var(--color-base-200);
}

.blog-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }

.blog-table th,
.blog-table td {
  border-bottom: 1px solid var(--color-base-border-secondary);
  padding: .75rem 1rem;
  text-align: left;
  vertical-align: top;
}

.blog-table tbody tr:last-child th,
.blog-table tbody tr:last-child td { border-bottom: 0; }

.blog-table thead th {
  border-bottom-color: var(--color-base-border);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.blog-table tbody th { font-weight: 500; }
/* The price column takes only the width it needs, leaving the rest for the name. */
.blog-table td:last-child,
.blog-table thead th:last-child { width: 1%; font-weight: 600; white-space: nowrap; }

/* Comparison tables have three or more columns of ordinary text, so the last one wraps
   like the others and the table keeps a readable minimum width. */
.blog-table--wide table { min-width: 34rem; }
.blog-table--wide td:last-child,
.blog-table--wide thead th:last-child { width: auto; white-space: normal; }
.blog-table--wide td:last-child { font-weight: 400; }

/* Two-column text comparisons split the width evenly and wrap both columns. */
.blog-table--text th,
.blog-table--text td { width: 50%; }
.blog-table--text td:last-child,
.blog-table--text thead th:last-child { width: 50%; white-space: normal; }
.blog-table--text td:last-child { font-weight: 400; }

/* Callout inside an article */

.blog-note {
  margin-top: 1.5rem;
  border: 1px solid var(--color-base-border);
  border-left: 3px solid var(--color-base-content);
  background: var(--color-base-200);
  padding: 1.25rem 1.5rem;
}

.blog-prose .blog-note p { margin-top: .5rem; }
.blog-prose .blog-note .blog-eyebrow { margin-top: 0; font-size: .75rem; line-height: 1.5; }

/* FAQ */

.blog-faq details { border-bottom: 1px solid var(--color-base-border); }
.blog-faq h2 { padding-bottom: 1rem; border-bottom: 1px solid var(--color-base-border); }

.blog-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.125rem;
  cursor: pointer;
  list-style: none;
}

.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq summary h3 { margin-top: 0; font-size: 1rem; }

.blog-faq__icon {
  position: relative;
  flex: none;
  width: .75rem;
  height: .75rem;
  margin-top: .4rem;
}

.blog-faq__icon::before,
.blog-faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease-out;
}

.blog-faq__icon::after { transform: rotate(90deg); }
.blog-faq details[open] .blog-faq__icon::after { transform: rotate(0); }
.blog-faq details > p { margin-top: 0; padding-bottom: 1.25rem; }

/* Related links */

.blog-related { margin-top: 3rem; }
.blog-related ul { margin-top: .5rem; }

.blog-related li {
  display: grid;
  gap: .25rem;
  border-top: 1px solid var(--color-base-border-secondary);
  padding-block: .875rem;
}

.blog-related li:first-child { border-top: 0; }
.blog-related a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.blog-related a:hover { text-decoration-thickness: 2px; }
.blog-related span { font-size: .875rem; line-height: 1.5; }

/* Index */

/* Topic links under the index headline jump to each group of articles. */

.blog-topics { margin-top: 2rem; }
.blog-topics ul { display: flex; flex-wrap: wrap; gap: .5rem; }

.blog-topics a {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  border: 1px solid var(--color-base-border);
  background: var(--color-base-200);
  padding: .5rem .75rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .2s ease-out, background-color .2s ease-out, color .2s ease-out;
}

.blog-topics a span { font-variant-numeric: tabular-nums; opacity: .55; }

.blog-topics a:hover {
  border-color: var(--color-base-content);
  background: var(--color-base-content);
  color: var(--color-base-100);
}

.blog-list { padding-block: 1rem 4rem; }
.blog-group { padding-top: 3rem; }
.blog-group + .blog-group { margin-top: 3rem; border-top: 1px solid var(--color-base-border); }

.blog-group__head { margin-bottom: 1.5rem; }

.blog-group__head h2 {
  margin-top: .75rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.blog-group__head p:not(.blog-eyebrow) { margin-top: .5rem; max-width: 38rem; font-size: .9375rem; line-height: 1.6; }

.blog-grid { display: grid; gap: 1rem; }

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-base-border);
  background: var(--color-base-200);
  padding: 1.5rem;
  transition: transform .3s ease-out, border-color .3s;
}

.blog-card:hover { transform: translateY(-.25rem); border-color: var(--color-base-content); }
.blog-card h2,
.blog-card h3 { margin-top: 1rem; font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.blog-card p:not(.blog-eyebrow) { margin-top: .75rem; font-size: .875rem; line-height: 1.6; }
.blog-card__go {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: .875rem;
  font-weight: 500;
}

.blog-card__time { font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* Closing call to action */

.blog-cta { border-top: 1px solid var(--color-base-border); background: var(--color-base-300); }
.blog-cta__inner { display: grid; gap: 1.5rem; padding-block: 3.5rem; }
.blog-cta h2 { font-size: 1.75rem; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.blog-cta p { margin-top: .75rem; max-width: 36rem; font-size: 1rem; line-height: 1.65; }

.blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  border: 1px solid var(--color-primary-border);
  background: var(--color-primary);
  padding: .75rem 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--color-primary-content);
  transition: transform .3s ease-out, filter .3s ease-out;
}

.blog-btn:hover { transform: translateY(-.125rem); filter: brightness(1.08); }

/* sm */
@media (min-width: 40rem) {
  .blog-hero { padding-block: 3rem 4.5rem; }
  .blog-hero h1 { font-size: 2.5rem; }
  .blog-prose h2 { font-size: 1.75rem; }
  .blog-group__head h2 { font-size: 1.75rem; }
}

/* md */
@media (min-width: 48rem) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
}

/* lg */
@media (min-width: 64rem) {
  .blog-wrap { padding-inline: 2.5rem; }
  .blog-hero h1 { font-size: 2.875rem; }
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-topics a,
  .blog-card,
  .blog-btn,
  .blog-faq__icon::before,
  .blog-faq__icon::after { transition: none; }
  .blog-card:hover,
  .blog-btn:hover { transform: none; }
}