/* ============================================================
   c-ai.chat — Hub / archive redesign layer (non-front pages)
   Pricing 3×2, model grid, reading measure, featured articles.
   ============================================================ */

/* ---------- PRICING: 6 plan cards → 3×2 (never accidental 4+2) ---------- */
.cai-plan-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px;
}
@media (max-width:900px){ .cai-plan-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:560px){ .cai-plan-grid{ grid-template-columns:1fr !important; } }
.cai-plan-card{ min-width:0; border-radius:var(--cai-radius-md); }

/* ---------- MODELS hub card grid (if present) 4 → 2 → 1 ---------- */
.cai-model-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:1024px){ .cai-model-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cai-model-grid{ grid-template-columns:1fr; } }

/* ---------- ARCHIVE: reading measure + spacing once ---------- */
/* Constrain editorial prose to a comfortable measure; let grids/tables/figures
   use the full hub width. */
.archive .entry-content > p,
.archive .page-description > p,
.archive .entry-content > ul:not(.cai-hub-featured ul),
.archive .entry-content > ol{ max-width:72ch; }
.archive .entry-content > .cai-plan-grid,
.archive .entry-content > .wp-block-table,
.archive .entry-content > figure,
.archive .entry-content > .cai-hub-featured,
.archive .entry-content > .cai-model-grid{ max-width:none; }
/* apply hero spacing once (companion to the global .entry-header reset) */
.archive .hero-section{ padding-block:clamp(28px,4vw,44px); }

/* ---------- FEATURED ARTICLES component ---------- */
.cai-hub-featured{ margin:40px 0; padding:clamp(20px,3vw,28px);
  border:1px solid var(--cai-border); border-radius:var(--cai-radius-lg);
  background:var(--cai-surface); }
.cai-hub-featured > h2,
.cai-hub-featured > h3{ margin:0 0 4px; font-size:20px; color:var(--cai-ink); }
.cai-hub-featured > p{ margin:0 0 16px; color:var(--cai-muted); }
.cai-hub-featured ul{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 22px; }
@media (max-width:640px){ .cai-hub-featured ul{ grid-template-columns:1fr; } }
.cai-hub-featured li{ margin:0; }
.cai-hub-featured a{ display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:8px; color:var(--cai-text); text-decoration:none;
  border:1px solid transparent; transition:background .15s,border-color .15s,color .15s; }
.cai-hub-featured a::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cai-accent); flex:0 0 auto; opacity:.5; }
.cai-hub-featured a:hover,
.cai-hub-featured a:focus-visible{ background:var(--cai-surface-warm);
  border-color:var(--cai-border); color:var(--cai-accent); }
.cai-hub-featured a:hover::before{ opacity:1; }

/* ---------- Real DOM badge replaces "Most picked" pseudo-content ---------- */
.cai-plan-card{ position:relative; }
.cai-plan-card--featured::before{ content:none !important; }   /* remove unsupported pseudo claim */
.cai-plan-badge{ position:absolute; top:-.6rem; left:1.25rem; z-index:1;
  background:var(--cai-accent); color:#fff; font-family:var(--cai-font-sans);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; }
/* white on the bright dark-mode accent = ~2.4:1; dark text on the badge clears AA */
html[data-theme="dark"] .cai-plan-badge{ color:#08202A; }

/* ---------- FEATURE CARDS (distinct from pricing cards; icon-led) ---------- */
.cai-feature-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:24px 0;
}
@media (max-width:900px){ .cai-feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cai-feature-grid{ grid-template-columns:1fr; } }
.cai-feature-card{
  min-width:0; padding:22px; background:var(--cai-surface);
  border:1px solid var(--cai-border); border-radius:var(--cai-radius-md);
  border-top:3px solid var(--cai-accent);
}
.cai-feature-card::before{
  content:""; display:block; width:30px; height:30px; margin-bottom:14px;
  background:var(--cai-accent);
  -webkit-mask:var(--cai-ficon,none) center/contain no-repeat;
          mask:var(--cai-ficon,none) center/contain no-repeat;
}
.cai-feature-card__name{ margin:0 0 4px; font-size:18px; color:var(--cai-ink); font-weight:700; }
.cai-feature-card__for{ margin:0 0 12px; color:var(--cai-muted); font-size:14.5px; }
.cai-feature-card__includes{ margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.cai-feature-card__includes li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--cai-text); line-height:1.45; }
.cai-feature-card__includes li::before{ content:""; position:absolute; left:2px; top:.5em;
  width:7px; height:7px; border-radius:2px; background:var(--cai-accent); opacity:.55; }
/* six distinct capability icons (currentColor via accent mask) */
.cai-feature-card:nth-child(1){ --cai-ficon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.cai-feature-card:nth-child(2){ --cai-ficon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
.cai-feature-card:nth-child(3){ --cai-ficon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.cai-feature-card:nth-child(4){ --cai-ficon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4M16 8l4 4-4 4'/%3E%3C/svg%3E"); }
.cai-feature-card:nth-child(5){ --cai-ficon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-4-4 3-3-2-6 4'/%3E%3C/svg%3E"); }
.cai-feature-card:nth-child(6){ --cai-ficon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E"); }

.cai-model-gridnote{ font-size:13px; color:var(--cai-muted); margin:10px 0 8px; }

/* ---------- MODEL CARDS inside .page-description (archive hub) — self-contained ---------- */
.page-description .cai-model-grid .cai-model-card{
  display:flex !important; flex-direction:column; gap:5px;
  padding:20px; margin:0 !important; background:var(--cai-surface);
  border:1px solid var(--cai-border); border-radius:var(--cai-radius-md);
  text-decoration:none; color:var(--cai-text); box-shadow:0 1px 2px rgba(16,24,39,.04);
}
.page-description .cai-model-grid .cai-model-card--flagship{ border-color:var(--cai-accent); }
.page-description .cai-model-grid .cai-model-eyebrow{ font-family:var(--cai-font-sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cai-accent); font-weight:700; }
.page-description .cai-model-grid .cai-model-name{ margin:2px 0 0 !important; font-size:19px; color:var(--cai-ink); }
.page-description .cai-model-grid .cai-model-strength{ color:var(--cai-muted); font-size:14px; margin:0 0 8px !important; }
.page-description .cai-model-grid .cai-model-stats{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:6px; margin:auto 0 10px !important; padding:0; }
.page-description .cai-model-grid .cai-model-stats > div{ margin:0; }
.page-description .cai-model-grid .cai-model-stats dt{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--cai-muted); margin:0; }
.page-description .cai-model-grid .cai-model-stats dd{ margin:0 !important; font-family:var(--cai-font-mono); font-size:13px; color:var(--cai-ink); font-weight:600; }
.page-description .cai-model-grid .cai-model-cta{ color:var(--cai-accent); font-weight:600; font-size:14px; margin-top:auto; }

.page-description .cai-model-grid .cai-model-eyebrow{ margin:0 0 2px !important; }
.page-description .cai-model-grid a.cai-model-cta{ text-decoration:none; }

/* ---------- NEWS TIMELINE (lead update + reverse-chron feed) ---------- */
/* Surfaces actual dated updates near the top of /news/; visually distinct    */
/* from tables and plan cards, with type-coded tags (model/product/policy).   */
.page-description .cai-timeline{ margin:22px 0 30px; }
.page-description .cai-timeline__head{ display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.page-description .cai-timeline__title{ margin:0 !important; font-size:22px; color:var(--cai-ink); }
.page-description .cai-timeline__all{ font-size:14px; font-weight:600; color:var(--cai-accent); text-decoration:none; }
.page-description .cai-timeline__all:hover{ text-decoration:underline; }

/* type tag chips */
.page-description .cai-tag{ display:inline-block; font-family:var(--cai-font-sans); font-size:11px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 9px;
  border-radius:999px; line-height:1.5; vertical-align:middle; white-space:nowrap; }
.page-description .cai-tag--model{ background:var(--cai-accent-soft); color:var(--cai-accent); }
.page-description .cai-tag--product{ background:#FDF3E3; color:#8A5300; }
.page-description .cai-tag--policy{ background:#EEE9FB; color:#5B3FA8; }
html[data-theme="dark"] .page-description .cai-tag--product{ background:#2E2410; color:#F0C674; }
html[data-theme="dark"] .page-description .cai-tag--policy{ background:#211A38; color:#C4B2F0; }

/* lead (most recent) update — featured */
.page-description .cai-timeline-lead{ padding:20px 22px; margin:0 0 20px;
  background:var(--cai-surface-cool); border:1px solid var(--cai-border);
  border-left:4px solid var(--cai-accent); border-radius:var(--cai-radius-md); }
.page-description .cai-timeline-lead__meta,
.page-description .cai-timeline-item__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  margin:0 0 6px !important; font-size:13px; color:var(--cai-muted); font-family:var(--cai-font-mono); }
.page-description .cai-timeline-lead__meta time,
.page-description .cai-timeline-item__meta time{ white-space:nowrap; }
.page-description .cai-timeline-lead__title{ margin:0 0 8px !important; font-size:19px; color:var(--cai-ink); }
.page-description .cai-timeline-lead__body{ margin:0 0 10px !important; color:var(--cai-text); }
.page-description .cai-timeline__src{ font-weight:600; color:var(--cai-accent); text-decoration:none; font-size:14px; }
.page-description .cai-timeline__src:hover{ text-decoration:underline; }

/* reverse-chronological rail */
.page-description .cai-timeline-list{ list-style:none !important; margin:0 !important;
  padding:2px 0 0 24px !important; position:relative; }
.page-description .cai-timeline-list::before{ content:""; position:absolute; left:5px; top:8px; bottom:10px;
  width:2px; background:var(--cai-border-strong); }
.page-description .cai-timeline-item{ position:relative; margin:0 0 18px !important; padding:0; }
.page-description .cai-timeline-item::before{ content:""; position:absolute; left:-23px; top:5px;
  width:12px; height:12px; border-radius:50%; background:var(--cai-bg); border:2.5px solid var(--cai-accent); }
.page-description .cai-timeline-item--product::before{ border-color:#B45309; }
.page-description .cai-timeline-item--policy::before{ border-color:#5B3FA8; }
.page-description .cai-timeline-item__title{ margin:0 0 5px !important; font-size:16.5px; color:var(--cai-ink); }
.page-description .cai-timeline-item__body{ margin:0 0 8px !important; color:var(--cai-text); font-size:15px; }
.page-description .cai-timeline-feed-note{ font-size:13.5px; color:var(--cai-muted); margin:6px 0 0 !important;
  padding-left:24px; }