/* pillar-page.css — styling for the "What Is Modern Work?" definitional
   page and any future evergreen/explainer page using the same shortcodes
   (quickanswer, pillarcard, engview, execview) or the front-matter-driven
   FAQ block. */

.quick-answer {
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  background: rgba(88, 166, 255, 0.06);
  padding: 1.1rem 1.25rem;
  margin: 1rem 0 1.75rem;
  font-size: 1.02rem;
}
.quick-answer p:last-child { margin-bottom: 0; }

/* ── Practice area cards ───────────────────────────────────────────────
   Colored left border matches the site's canonical pillar tokens (same
   ones collapsible.js/search.js/calendar.js use), so this page reads as
   part of the same visual system as the weekly digest instead of a
   separate essay-styled document. */
.pillar-card {
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--color-surface);
  padding: 1.35rem 1.5rem 1.5rem;
  margin: 1.5rem 0;
}

.pillar-card h3.pillar-card-title {
  margin: 0 0 0.85rem;
  padding: 0;
  border: none;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pillar-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.pillar-card-body > p {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.94rem;
}
.pillar-card-body > .dual-read { margin: 0; }
@media (max-width: 640px) {
  .pillar-card-body { grid-template-columns: 1fr; }
}

.pillar-card-identity-access { border-left-color: var(--pillar-identity-access); }
.pillar-card-identity-access .pillar-card-title { color: var(--pillar-identity-access); }

.pillar-card-endpoint-device { border-left-color: var(--pillar-endpoint-device); }
.pillar-card-endpoint-device .pillar-card-title { color: var(--pillar-endpoint-device); }

.pillar-card-collaboration-productivity { border-left-color: var(--pillar-collaboration-productivity); }
.pillar-card-collaboration-productivity .pillar-card-title { color: var(--pillar-collaboration-productivity); }

.pillar-card-ai-copilot { border-left-color: var(--pillar-ai-copilot); }
.pillar-card-ai-copilot .pillar-card-title { color: var(--pillar-ai-copilot); }

.pillar-card-employee-experience { border-left-color: var(--pillar-employee-experience); }
.pillar-card-employee-experience .pillar-card-title { color: var(--pillar-employee-experience); }

.pillar-card-security-compliance { border-left-color: var(--pillar-security-compliance); }
.pillar-card-security-compliance .pillar-card-title { color: var(--pillar-security-compliance); }

/* ── Dual-read boxes ──────────────────────────────────────────────────
   Compact cards with a pill-style label (same visual language as the
   GA/Preview phase tags used throughout the digest) instead of a plain
   italic caption, so "which read is this" is legible at a glance rather
   than something you have to read to figure out. */
.dual-read {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  padding: 0.9rem 1rem;
}
.dual-read-body {
  font-size: 0.9rem;
  line-height: 1.6;
}
.dual-read-body p:last-child { margin-bottom: 0; }

.dual-read-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.55rem;
}

.dual-read-eng {
  border-top: 2px solid var(--color-accent);
}
.dual-read-eng .dual-read-label {
  background: rgba(88, 166, 255, 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(88, 166, 255, 0.35);
}

.dual-read-exec {
  border-top: 2px solid var(--color-cta);
}
.dual-read-exec .dual-read-label {
  background: rgba(210, 153, 34, 0.14);
  color: var(--color-cta);
  border: 1px solid rgba(210, 153, 34, 0.35);
}

/* Front-matter-driven FAQ accordion (rendered by single.html, not markdown
   body, so the visible copy and the FAQPage schema always match). Mirrors
   the existing .sources-block <details> pattern. */
.faq-block {
  margin: 1.5rem 0 0.5rem;
}
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-weight: 500;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  display: inline-block;
  width: 1.1rem;
  color: var(--color-accent);
  font-weight: 700;
}
.faq-item[open] summary::before { content: "\2212"; }
.faq-item-body {
  padding: 0 1rem 0.9rem 2.2rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Related reading -- non-digest-page counterpart to the "Related digests"
   sidebar panel (weekly posts get that one instead, in their right-hand
   sidebar). See related-content.html for what feeds this. */
.related-content-block {
  margin: 2rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.related-content-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.related-content-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  padding: 0.65rem 0.9rem;
}
.related-content-item a {
  font-weight: 500;
}
.related-content-desc {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* Start Here page: colored info cards ("the three things you'll find
   here") and the six-pillar chip strip. Colors are deliberately reused
   from what already exists sitewide rather than invented for this page:
   blue is --color-accent (also the Collaboration & Productivity pillar
   token), gold is --color-cta (the same gold used for the Exec Guide nav
   button and every "click me" CTA), and amber (#e3b341) is the Tag
   Universe page's own signature accent color (its twinkling star / "How
   to navigate" button), reused here specifically because that card is
   pointing at that exact page. */
.info-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.1rem 0 1.75rem;
}
@media (max-width: 760px) {
  .info-card-row { grid-template-columns: 1fr; }
}
.info-card {
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--color-surface);
  padding: 1.1rem 1.25rem;
}
.info-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.info-card-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.info-card-desc p:last-child { margin-bottom: 0; }
.info-card-blue { border-left-color: var(--color-accent); }
.info-card-blue .info-card-title { color: var(--color-accent); }
.info-card-gold { border-left-color: var(--color-cta); }
.info-card-gold .info-card-title { color: var(--color-cta); }
.info-card-amber { border-left-color: #e3b341; }
.info-card-amber .info-card-title { color: #e3b341; }

.pillar-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}

/* ── Deployment Guides cards ─────────────────────────────────────────
   Reuses the .pillar-card shell (colored left border + title color per
   practice area) from the "What Is Modern Work?" page so both pages read
   as the same visual system, with a plain link list instead of the
   dual-read eng/exec boxes. */
.guide-pillars { margin-top: 1.5rem; }
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list-item {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
}
.guide-list-item:first-child { border-top: none; padding-top: 0.25rem; }
.guide-list-item a {
  font-weight: 600;
  text-decoration: none;
}
.guide-list-item a:hover { text-decoration: underline; }
.guide-list-desc {
  margin: 0.3rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}