/* ==========================================================
   core30.css - long-form article pages.
   Loaded AFTER styles.css. Adds only what the one-page site
   never needed: article body type, table of contents, quick
   summary, floated figures, image placeholders, hub cards.
   ========================================================== */

.c30 p { margin-bottom: 16px; font-size: 1.03rem; }
.c30 ul, .c30 ol { margin: 0 0 18px 1.15rem; }
.c30 li { margin-bottom: 8px; font-size: 1.02rem; }
.c30 li::marker { color: var(--brand); }
.c30 h2 { margin-bottom: 16px; }
.c30 .section .section__title { text-align: left; margin-bottom: 22px; max-width: 26ch; }
.c30 a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.c30 a:hover { color: var(--brand); }
.c30 section + section { border-top: 1px solid var(--line); }

/* Table of contents */
.c30-toc { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.c30-toc__title { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 12px; }
.c30-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c30-toc li { margin: 0; font-size: .98rem; }
.c30-toc a { color: var(--brand-deep); text-decoration: none; }
.c30-toc a:hover { text-decoration: underline; }

/* Quick summary block that opens some sections */
.c30-summary { background: color-mix(in srgb, var(--accent) 12%, #fff); border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 16px 20px; margin-bottom: 20px; font-size: 1.02rem; }
.c30-summary strong { color: var(--ink); }

/* Figures the generator floats left or right */
.c30 figure.wp-block-image { margin: 6px 0 18px; }
.c30 figure.wp-block-image img { width: 100%; border-radius: 12px; box-shadow: var(--shadow); display: block; }
@media (min-width: 780px) {
  .c30 figure.alignleft { float: left; width: 320px; margin: 4px 26px 16px 0; }
  .c30 figure.alignright { float: right; width: 320px; margin: 4px 0 16px 26px; }
}
.c30 section::after { content: ""; display: block; clear: both; }

/* Placeholder shown where a real photo has not been supplied yet */
.c30-imgph { border: 2px dashed var(--line); border-radius: 12px; background: var(--bg-alt);
  padding: 22px; text-align: center; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.c30-imgph b { display: block; color: var(--brand); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 6px; }
.c30-imgph code { display: block; font-size: .8rem; margin: 4px 0 6px; word-break: break-all; }
.c30-imgph em { font-style: normal; opacity: .8; }
.hero__media .c30-imgph { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.9); aspect-ratio: 4 / 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.hero__media .c30-imgph b { color: #ffd56b; }
.c30 figure.wp-block-image .c30-imgph { max-width: 100%; }

/* Related pages */
.c30-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.c30-related li { margin: 0; }
.c30-related a { display: inline-block; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: .94rem; color: var(--brand-deep);
  text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.c30-related a:hover { border-color: var(--brand); transform: translateY(-1px); }

/* Conditions hub */
.c30-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.c30-hub a { display: flex; flex-direction: column; gap: 8px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.c30-hub a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.c30-hub h3 { font-size: 1.12rem; color: var(--ink); }
.c30-hub p { font-size: .93rem; color: var(--muted); margin: 0; line-height: 1.55; }
.c30-hub span { font-size: .86rem; font-weight: 600; color: var(--brand); }
.c30-revs { padding-top: 34px; padding-bottom: 34px; background: var(--bg-alt);
  border-bottom: 1px solid var(--line); }
.c30-revs__h { font-size: 1.3rem; margin-bottom: 4px; }
.c30-revs__sub { font-size: .88rem; color: var(--muted); margin: 0 0 18px; }
.c30-revs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; align-items: start; }
.c30-rev { margin: 0; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.c30-rev__stars { color: #e8b22e; font-size: .86rem; letter-spacing: .06em; }
.c30-rev blockquote { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink); }
.c30-rev figcaption { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: auto; }
.c30-revs__all { display: inline-block; margin-top: 16px; font-size: .86rem;
  font-weight: 600; color: var(--brand); }
@media (max-width: 640px) {
  .c30-revs { padding-top: 24px; padding-bottom: 24px; }
  .c30-revs__grid { grid-template-columns: 1fr; gap: 12px; }
  .c30-rev blockquote { font-size: .86rem; }
}
.c30-hub__sms { display: none; }
@media (max-width: 640px) {
  .c30-hub { gap: 12px; }
  .c30-hub a { gap: 5px; padding: 16px 18px; }
  .c30-hub h3 { font-size: 1.04rem; }
  .c30-hub__tldr { display: none; }
  .c30-hub__sms { display: block; font-size: .88rem; }
}

/* Page header for pages without a photo hero */
.c30-pagehead { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); }
.c30-pagehead h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 12px; }
.c30-pagehead p { font-size: 1.08rem; color: var(--muted); max-width: 62ch; }