/* ==========================================================================
   Bingo Daubers — Article / single post & page template
   Loaded after style.css + header.css on single posts and pages.
   Tokens (--bd-*) come from header.css :root — never redefined here.
   ========================================================================== */

.art-page {
  /* One accent knob for the whole template. Flip this single line to
     recolour every accent (pill, links, callouts, icons, focus rings). */
  --art-accent: var(--bd-pink);
  --art-accent-hover: var(--bd-pink-hover);
  --art-accent-soft: var(--bd-pink-soft);
  --art-rail-w: 356px;
  --art-gap: 40px;
  --art-sticky-top: calc(var(--bd-header-h, 76px) + 20px);

  background: var(--bd-bg);
  color: var(--bd-body);
  padding: 28px 0 56px;
}

.art-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--art-rail-w);
  gap: var(--art-gap);
  align-items: start;
}

.art-main { min-width: 0; }

/* Shared focus ring — never removed, only restyled. */
.art-page a:focus-visible,
.art-page button:focus-visible,
.art-page summary:focus-visible,
.art-page [tabindex]:focus-visible {
  outline: 2px solid var(--art-accent);
  outline-offset: 2px;
}

/* Screen-reader-only utility (scoped to this template). */
.art-page .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1. Article header
   ========================================================================== */
.art-head { margin: 0 0 28px; }

.art-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--art-accent);
  background: var(--art-accent-soft);
  margin: 0 0 16px;
  transition: background-color 0.15s ease;
}
.art-pill:hover { filter: brightness(0.96); }

/* Category accents — mirror the homepage kicker palette. */
.art-cat-stores  { color: #16A34A; background: #16A34A1A; }
.art-cat-buying  { color: #7C3AED; background: #7C3AED1A; }
.art-cat-tips    { color: #EA580C; background: #EA580C1A; }
.art-cat-safety  { color: #DC2626; background: #DC26261A; }
.art-cat-diy     { color: #2563EB; background: #2563EB1A; }
.art-cat-basics  { color: #0891B2; background: #0891B21A; }
.art-cat-history { color: #B45309; background: #B453091A; }

.art-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--bd-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.art-dek {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--bd-muted);
  max-width: 62ch;
  margin: 0 0 22px;
}

/* --- Byline row ---------------------------------------------------------- */
.art-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  font-size: 0.875rem;
  color: var(--bd-muted);
}

.art-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.art-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #EEF0F4;
  flex: none;
}
.art-author-txt { line-height: 1.35; }
.art-author-txt a {
  color: var(--art-accent);
  font-weight: 600;
  text-decoration: none;
}
.art-author-txt a:hover { color: var(--art-accent-hover); text-decoration: underline; }

.art-byline-sep {
  width: 1px;
  align-self: stretch;
  min-height: 28px;
  background: var(--bd-line);
}

.art-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.art-meta svg { flex: none; color: var(--bd-muted); }

.art-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  margin-left: auto;
  border: 1px solid var(--bd-line);
  border-radius: 999px;
  background: var(--bd-card);
  color: var(--bd-ink);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.art-share:hover {
  border-color: var(--art-accent);
  color: var(--art-accent);
}
.art-share svg { flex: none; }
.art-share[data-state="done"] {
  border-color: var(--art-accent);
  color: var(--art-accent);
  background: var(--art-accent-soft);
}

/* ==========================================================================
   2. Hero image
   ========================================================================== */
.art-hero {
  margin: 0 0 32px;
}
.art-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bd-radius);
  background: #EEF0F4;
  box-shadow: var(--bd-shadow);
}
/* No intrinsic size in the DB → reserve a 16:9 box so CLS stays at 0. */
.art-hero img:not([width]) {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.art-credit {
  margin: 10px 2px 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--bd-muted);
}
.art-credit a { color: var(--bd-muted); text-decoration: underline; }

/* ==========================================================================
   3. Article body (raw HTML from the database)
   ========================================================================== */
.article-content.art-prose {
  max-width: 70ch;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--bd-body);
  counter-reset: art-h2;
}

.article-content.art-prose > *:first-child { margin-top: 0; }

.article-content.art-prose p {
  margin: 0 0 1.15em;
}

.article-content.art-prose a {
  color: var(--art-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.article-content.art-prose a:hover { color: var(--art-accent-hover); }

.article-content.art-prose h2,
.article-content.art-prose h3,
.article-content.art-prose h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--bd-ink);
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--bd-header-h, 76px) + 16px);
  border-bottom: 0;
  padding-bottom: 0;
}

.article-content.art-prose h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.28;
  margin: 2.1em 0 0.6em;
  counter-increment: art-h2;
}
.article-content.art-prose h2::before {
  content: counter(art-h2) ". ";
  color: var(--bd-ink);
}
/* The FAQ block is rebuilt by main.js — it must not join the numbering. */
.article-content.art-prose h2.faq-title { counter-increment: none; }
.article-content.art-prose h2.faq-title::before { content: none; }

.article-content.art-prose h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.8em 0 0.5em;
}
.article-content.art-prose h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.6em 0 0.45em;
}

.article-content.art-prose strong { color: var(--bd-ink); font-weight: 600; }

/* --- Lists: circular check bullets (unordered) --------------------------- */
.article-content.art-prose ul {
  list-style: none;
  margin: 0 0 1.3em;
  padding: 0;
}
.article-content.art-prose ul li {
  position: relative;
  padding-left: 34px;
  margin: 0 0 12px;
}
.article-content.art-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--art-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.article-content.art-prose ul ul { margin: 10px 0 0; }

.article-content.art-prose ol {
  margin: 0 0 1.3em;
  padding-left: 1.35em;
}
.article-content.art-prose ol li { margin: 0 0 10px; padding-left: 4px; }
.article-content.art-prose ol li::marker { color: var(--art-accent); font-weight: 600; }

/* --- Blockquote rendered as a soft "Pro Tip" panel ----------------------- */
.article-content.art-prose blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 18px 22px 18px 68px;
  border: 0;
  border-radius: var(--bd-radius-sm);
  background: var(--art-accent-soft);
  color: var(--bd-ink);
  font-size: 1rem;
  line-height: 1.65;
  font-style: normal;
}
.article-content.art-prose blockquote::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--art-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}
.article-content.art-prose blockquote p:last-child { margin-bottom: 0; }

/* --- Media, tables, code ------------------------------------------------- */
.article-content.art-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bd-radius-sm);
  margin: 1.6em 0;
}
.article-content.art-prose figure { margin: 1.6em 0; }
.article-content.art-prose figcaption {
  font-size: 0.8125rem;
  color: var(--bd-muted);
  margin-top: 8px;
}

/* Wide content scrolls inside its own box — the page never scrolls sideways. */
.article-content.art-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-sm);
  margin: 1.6em 0;
  font-size: 0.9375rem;
}
.article-content.art-prose table th {
  background: #F3F4F7;
  color: var(--bd-ink);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bd-line);
}
.article-content.art-prose table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bd-line);
  background: var(--bd-card);
}
.article-content.art-prose table tr:last-child td { border-bottom: 0; }
.article-content.art-prose table tr:nth-child(even) td { background: #FAFBFC; }

.article-content.art-prose pre {
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: var(--bd-radius-sm);
  background: #12131A;
  color: #E7E9EE;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 1.6em 0;
}
.article-content.art-prose :not(pre) > code {
  padding: 2px 6px;
  border-radius: 5px;
  background: #EFF0F4;
  color: var(--bd-ink);
  font-size: 0.9em;
  word-break: break-word;
}

.article-content.art-prose hr {
  border: 0;
  border-top: 1px solid var(--bd-line);
  margin: 2.2em 0;
}

/* FAQ accordion built by main.js — keep it on-brand. */
.art-main .faq-section {
  margin: 2.2em 0 0;
  border-top: 1px solid var(--bd-line);
  padding-top: 1.6em;
}
.art-main .faq-item {
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-sm);
  background: var(--bd-card);
  margin-bottom: 10px;
  overflow: hidden;
}
.art-main .faq-question {
  min-height: 52px;
  width: 100%;
  text-align: left;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  color: var(--bd-ink);
  cursor: pointer;
}

/* ==========================================================================
   4. Callout panels
   ========================================================================== */
.art-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 36px 0 0;
  padding: 20px 22px;
  border-radius: var(--bd-radius-sm);
  background: var(--art-accent-soft);
  max-width: 70ch;
}
.art-callout-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--art-accent);
  color: #fff;
}
.art-callout-body { min-width: 0; }
.art-callout-title {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bd-ink);
  margin: 0 0 4px;
}
.art-callout-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--bd-body);
}
.art-callout-body a {
  color: var(--art-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.art-callout-body a:hover { color: var(--art-accent-hover); }

/* ==========================================================================
   5. Tags + author box
   ========================================================================== */
.art-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 32px 0 0;
}
.art-tags-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bd-muted);
  margin-right: 2px;
}
.art-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bd-line);
  background: var(--bd-card);
  color: var(--bd-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.art-tag:hover { border-color: var(--art-accent); color: var(--art-accent); }

.art-main .author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 36px 0 0;
  padding: 22px;
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  background: var(--bd-card);
  box-shadow: var(--bd-shadow);
}
.art-main .author-box-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #EEF0F4;
}
.art-main .author-box-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bd-muted);
  margin-bottom: 4px;
}
.art-main .author-box-name {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--bd-ink);
  margin: 0 0 6px;
}
.art-main .author-box-name a { color: inherit; text-decoration: none; }
.art-main .author-box-name a:hover { color: var(--art-accent); }
.art-main .author-box-bio {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--bd-muted);
}

/* ==========================================================================
   6. Bottom related grid (pillar pages)
   ========================================================================== */
.art-more { margin: 44px 0 0; }
.art-more-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--bd-ink);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.art-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.art-more-card {
  display: flex;
  flex-direction: column;
  background: var(--bd-card);
  border: 1px solid var(--bd-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--bd-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.art-more-card:hover { transform: translateY(-2px); box-shadow: var(--bd-shadow-lg); }
.art-more-media {
  display: block;
  aspect-ratio: 16 / 10;
  background: #EEF0F4;
  overflow: hidden;
}
.art-more-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-more-body { padding: 14px 16px 16px; }
.art-more-body h3 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.32;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.art-more-body h3 a { color: var(--bd-ink); text-decoration: none; }
.art-more-body h3 a:hover { color: var(--art-accent); }
.art-more-body time { font-size: 0.75rem; color: var(--bd-muted); }

/* ==========================================================================
   7. Right rail
   ========================================================================== */
.art-rail { min-width: 0; }
.art-rail-inner {
  position: sticky;
  top: var(--art-sticky-top);
  max-height: calc(100vh - var(--art-sticky-top) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Room for the focus ring on the first/last card while scrolling. */
  padding: 2px;
}

.art-card {
  background: var(--bd-card);
  border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius);
  box-shadow: var(--bd-shadow);
  padding: 20px;
}
.art-card-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bd-ink);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.art-list { list-style: none; margin: 0; padding: 0; }
.art-list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
}
.art-list li:first-child { padding-top: 0; }
.art-list li:last-child { padding-bottom: 0; }
.art-list li + li { border-top: 1px solid var(--bd-line); }

.art-thumb {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--bd-radius-xs);
  background: #EEF0F4;
  overflow: hidden;
}
.art-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.art-kicker {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--art-accent);
  margin: 0 0 5px;
}
.art-kicker-stores  { color: #16A34A; }
.art-kicker-buying  { color: #7C3AED; }
.art-kicker-tips    { color: #EA580C; }
.art-kicker-safety  { color: #DC2626; }
.art-kicker-diy     { color: #2563EB; }
.art-kicker-basics  { color: #0891B2; }
.art-kicker-history { color: #B45309; }

.art-row-link {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--bd-ink);
  text-decoration: none;
}
.art-row-link:hover { color: var(--art-accent); }
.art-row-date {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--bd-muted);
}

/* Text-only link list (guides / more pillars / TOC) */
.art-links { list-style: none; margin: 0; padding: 0; }
.art-links li + li { border-top: 1px solid var(--bd-line); }
.art-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bd-body);
  text-decoration: none;
}
.art-links a:hover { color: var(--art-accent); }

.art-card .toc-nav a {
  display: block;
  min-height: 32px;
  padding: 4px 0;
  color: var(--bd-body);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}
.art-card .toc-nav a:hover { color: var(--art-accent); }

/* ==========================================================================
   8. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .art-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .art-rail-inner {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
  }
  .article-content.art-prose,
  .art-callout { max-width: none; }
}

@media (max-width: 900px) {
  .art-page { padding: 20px 0 44px; }
}

@media (max-width: 640px) {
  .art-rail-inner { grid-template-columns: minmax(0, 1fr); }
  .art-title { line-height: 1.14; }
  .art-dek { font-size: 1rem; }
  .art-byline { gap: 12px 16px; }
  .art-byline-sep { display: none; }
  .art-share { margin-left: 0; width: 100%; }
  .art-hero img { border-radius: var(--bd-radius-sm); }
  .article-content.art-prose { font-size: 1rem; }
  .art-callout { flex-direction: column; gap: 12px; padding: 18px; }
  .art-main .author-box { flex-direction: column; }
  .art-list li { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .art-thumb { width: 64px; height: 64px; }
  .art-card { padding: 18px; }
}

/* Short viewports: never let the sticky rail trap or clip its own content. */
@media (max-height: 620px) {
  .art-rail-inner { position: static; max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .art-page *,
  .art-page *::before,
  .art-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .art-more-card:hover { transform: none; }
}