/* ==========================================================================
   ARTICLE CONTENT BLOCKS
   Everything an article's body can contain beyond plain paragraphs/headings.
   All of this lives inside .article-content, so it inherits the 720px
   column width and the > * + * vertical rhythm from article.css — these
   rules only add the block-specific look on top of that.
   Built on the same tokens as the rest of the site (--accent, --radius-*,
   --ink-*) so nothing here looks like a bolted-on component library.
   ========================================================================== */


/* ==========================================================================
   1. TABLES — two styles
   ========================================================================== */

/* Style A — "grid": full ruled table, every cell bordered. Best for dense,
   scannable data (specs, comparisons with many columns). */
.article-table-wrap{
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
}
.article-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.article-table th,
.article-table td{
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.article-table th:last-child,
.article-table td:last-child{ border-right: 0; }
.article-table tr:last-child td{ border-bottom: 0; }
.article-table thead th{
  background: var(--bg-raised);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-text);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.article-table tbody td{ color: var(--ink-soft); }
.article-table tbody tr:hover td{ background: var(--bg-raised); }

/* Style B — "striped-minimal": no vertical rules, no outer border, just
   a bold header row and alternating row tint. Reads lighter — best for
   simple 2–3 column lists (feature vs. plan, before/after). */
.article-table--striped{
  border: 0;
  border-radius: 0;
}
.article-table--striped th,
.article-table--striped td{
  border-right: 0;
  border-bottom: 1px solid var(--hairline);
}
.article-table--striped thead th{
  background: transparent;
  border-bottom: 2px solid var(--ink-text);
}
.article-table--striped tbody tr:nth-child(even) td{
  background: var(--bg-raised);
}
.article-table--striped tbody tr:hover td{ background: var(--bg-raised); }
.article-table-wrap:has(.article-table--striped){
  border: 0;
  border-radius: 0;
}


/* ==========================================================================
   2. HIGHLIGHTS — inline emphasis for important words/phrases, 4 styles.
   Applied as <mark class="hl hl--*"> around a span of text mid-sentence.
   ========================================================================== */

.hl{
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  font-weight: 600;
  color: inherit;
  background: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 1. Wash — soft accent-tinted background, the default/safest choice */
.hl--wash{
  background: rgba(255,191,29,0.28);
  color: var(--ink-text);
}
[data-theme="dark"] .hl--wash{ background: rgba(255,191,29,0.22); }

/* 2. Underline — thick accent underline only, no fill; quieter emphasis */
.hl--underline{
  padding: 0.05em 0.1em;
  background: linear-gradient(var(--accent), var(--accent)) 0 100%/100% 0.28em no-repeat;
}

/* 3. Ink — solid dark chip, inverted text; strongest/loudest emphasis */
.hl--ink{
  background: var(--ink-text);
  color: var(--bg);
}
[data-theme="dark"] .hl--ink{ background: var(--invert-bg); color: var(--invert-ink); }

/* 4. Bracket — no fill at all, thin accent brackets either side; for
   emphasis inside already-dense or code-adjacent text */
.hl--bracket{
  padding: 0.05em 0.3em;
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  font-weight: 600;
}


/* ==========================================================================
   3. IN-ARTICLE IMAGE GRIDS — 1 up to 4 images, one row
   Usage: <div class="img-grid img-grid--3"> <figure>…</figure> × N </div>
   ========================================================================== */

.img-grid{
  display: grid;
  gap: 0.85rem;
}
.img-grid figure{ margin: 0; }
.img-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.img-grid figcaption{
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
  text-align: center;
}

/* Shared caption for a whole grid (figcaption as a direct child of
   .img-grid, not inside one figure) — span the full grid width and
   sit close to the images, not at the article's default paragraph gap. */
.img-grid--captioned{
  grid-template-rows: auto auto;
}
.img-grid--captioned > figcaption{
  grid-column: 1 / -1;
  margin-top: 0.15rem;
}

.img-grid--1{ grid-template-columns: 1fr; }
.img-grid--1 img{ aspect-ratio: 16/9; }

.img-grid--2{ grid-template-columns: 1fr 1fr; }
.img-grid--2 img{ aspect-ratio: 4/3; }

.img-grid--3{ grid-template-columns: repeat(3, 1fr); }
.img-grid--3 img{ aspect-ratio: 3/4; }

.img-grid--4{ grid-template-columns: repeat(4, 1fr); }
.img-grid--4 img{ aspect-ratio: 3/4; }

@media (max-width: 620px){
  .img-grid--3,
  .img-grid--4{ grid-template-columns: 1fr 1fr; }
  .img-grid--2{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px){
  .img-grid--3,
  .img-grid--4,
  .img-grid--2{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   4. QUOTE BLOCKS — 2 styles beyond the plain default in article.css
   ========================================================================== */

/* Style A — "card": boxed pull-quote, big mark glyph, for a single
   punchy line you want visually separated from the running text. */
.quote-card{
  position: relative;
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem 2rem;
  text-align: center;
}
.quote-card__mark{
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 0.25rem;
}
.quote-card p{
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink-text) !important;
  max-width: 44ch;
  margin: 0 auto;
}
.quote-card cite{
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

/* Style B — "attributed": left border like the default blockquote, but
   with an avatar + name/role row — for quoting a specific named person
   (an interview subject, an expert), not just emphasis. */
.quote-attributed{
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.4rem;
}
/* Same mobile tightening and text-alignment reasoning as
   .article-content blockquote/ul/ol in article.css — identical
   padding/border shape, so it needs the identical adjustment to keep
   starting at the same x-position as lists and the plain blockquote on
   a narrow column. */
@media (max-width: 620px){
  .quote-attributed{
    padding-left: calc(1.15rem - 3px);
  }
}
.quote-attributed p{
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink-text) !important;
}
.quote-attributed__source{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.quote-attributed__source img{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.quote-attributed__name{
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-text);
  display: block;
}
.quote-attributed__role{
  display: block;
  font-size: 0.75rem;
  color: var(--ink-mute);
}


/* ==========================================================================
   5. LINKS — differentiate internal vs. external inline links
   ========================================================================== */

.article-content a{
  color: var(--ink-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.article-content a:hover{
  text-decoration-color: var(--accent);
}

/* Internal — link to another page on this site. Solid accent underline,
   no icon; it's "staying home", so it should feel unremarkable/native. */
.article-content a.link-internal{
  text-decoration-color: var(--accent);
}

/* External — link off-site. Gets a small arrow-out glyph so a reader
   always knows before clicking that they're about to leave the site. */
.article-content a.link-external{
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
}
.article-content a.link-external::after{
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.05em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* ==========================================================================
   6. DIVIDERS — 4 styles, none of them a plain <hr> line
   ========================================================================== */

.divider{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.75rem 0 !important;
}

/* 1. Dots — three small dots, the classic "scene break" */
.divider--dots{ gap: 0.5rem; }
.divider--dots span{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

/* 2. Asterism — wide-set asterisk glyph, a nod to classic print section
   breaks (⁂), rendered a bit larger than body text */
.divider--asterism{
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.5em;
  color: var(--ink-mute);
}

/* 3. Label — a short word ("continued", "meanwhile") on a hairline,
   for a break that also names what's coming next */
.divider--label{
  width: 100%;
  gap: 1rem;
}
.divider--label::before,
.divider--label::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.divider--label span{
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* 4. Brand mark — small accent diamond/rotated square, ties the break
   back to the site's gold accent instead of staying neutral */
.divider--brand span{
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 2px;
}


/* ==========================================================================
   7. EXTRAS — useful block types not explicitly asked for but commonly
   needed in a real article body
   ========================================================================== */

/* Callout / note box — for tips, warnings, asides. 3 tone variants using
   the same neutral card shape so they read as one family. */
.callout{
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-raised);
}
.callout__icon{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
}
.callout__body p{ margin: 0; color: var(--ink-soft) !important; }
.callout__title{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-text);
  margin-bottom: 0.25rem;
  display: block;
}
.callout--tip{ border-color: var(--accent); }
.callout--tip .callout__icon{ color: var(--accent-ink); }
.callout--warning{ border-color: #C0392B; }
.callout--warning .callout__icon{ color: #C0392B; }
.callout--info{ border-color: var(--hairline-strong); }
.callout--info .callout__icon{ color: var(--ink-mute); }

/* Inline code + code block — any technical/how-to article needs these */
.article-content code{
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.875em;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  padding: 0.15em 0.4em;
  border-radius: 0.3em;
  color: var(--ink-text);
}
.code-block{
  background: var(--invert-bg);
  color: var(--invert-ink);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  overflow-x: auto;
}
.code-block pre{ margin: 0; }
.code-block code{
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* Interactive widget mount point — for the HTML/CSS/JS interactive visuals.
   This just gives any embedded widget a consistent frame; the widget's own
   markup/script goes inside it untouched. */
.article-embed{
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--bg-raised);
}
.article-embed__label{
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
  display: block;
}

/* Key-takeaway list — a bulleted list with accent check-marks instead of
   plain dots, for "what to remember" recaps at the top/bottom of a piece */
.takeaway-list{
  list-style: none !important;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.takeaway-list li{
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-left: 0 !important;
}
.takeaway-list li::before{
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  background-color: var(--accent-ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--ink-text);
}