/* ==========================================================================
   VastuEasy — Guides (the /guides/ index and each article)
   ==========================================================================
   Loaded after tokens.css -> site.css -> pages.css, only on /guides/ pages,
   so nothing here can reach the existing marketing pages. Consumes tokens.css
   only.
   ========================================================================== */

/* ------------------------------------------------------------- article */

.vc-article { max-width: 46em; margin: 0 auto; padding: 56px 40px 96px; }
.vc-article h1 { margin: 0 0 12px; }
.vc-article-meta { color: var(--vc-text-light); font-size: 14px; margin: 0 0 28px; }
.vc-article-lede { font-size: 18px; line-height: 1.6; color: var(--vc-text-medium); }
.vc-article h2 { margin: 48px 0 12px; font-size: 25px; }
.vc-article h3 { margin: 26px 0 8px; font-size: 18px; }
.vc-article p, .vc-article li { color: var(--vc-text-medium); line-height: 1.7; }
.vc-article ul, .vc-article ol { padding-left: 22px; margin: 0 0 16px; }
.vc-article li { margin-bottom: 7px; }

.vc-article-note {
  background: var(--vc-bg-alt);
  border-left: 3px solid var(--vc-panel-border);
  border-radius: var(--vc-radius-sm);
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 15px;
}
.vc-article-note p { margin: 0; }

.vc-article-toc {
  background: var(--vc-panel);
  border: 1px solid var(--vc-panel-border);
  border-radius: var(--vc-radius);
  padding: 18px 22px;
  margin: 28px 0 8px;
}
.vc-article-toc strong { display: block; margin-bottom: 8px; font-family: var(--vc-font-heading); }
.vc-article-toc ol { margin: 0; }
.vc-article-toc li { margin-bottom: 4px; }

/* Zone verdict chips inline in the text: Best / Acceptable / Avoid. */
.vc-zone { display: inline-block; font-size: 13px; font-weight: 600; border-radius: var(--vc-radius-pill); padding: 1px 9px; margin-right: 4px; }
.vc-zone-best  { color: var(--vc-good);    background: var(--vc-good-bg); }
.vc-zone-ok    { color: var(--vc-neutral); background: var(--vc-neutral-bg); }
.vc-zone-avoid { color: var(--vc-danger);  background: var(--vc-danger-bg); }

.vc-article-table-wrap { overflow-x: auto; margin: 14px 0 22px; }
.vc-article table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vc-article th, .vc-article td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--vc-divider); vertical-align: top; }
.vc-article th { font-family: var(--vc-font-heading); color: var(--vc-text); background: var(--vc-bg-alt); }
.vc-article td:first-child { font-weight: 600; color: var(--vc-text); white-space: nowrap; }
/* Keeps a pada range like "N3–N5" from splitting at the dash. */
.vc-nowrap { white-space: nowrap; }

.vc-article-cta {
  background: var(--vc-panel);
  border: 1px solid var(--vc-panel-border);
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow);
  padding: 26px 28px;
  margin: 48px 0 0;
}
.vc-article-cta h2 { margin-top: 0; }
.vc-article-cta .vc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 600px) {
  .vc-article { padding: 40px 20px 64px; }
  /* Four columns at 350px: let the room name wrap and tighten the cells so
     the zone lists get the width, instead of forcing a sideways scroll. */
  .vc-article table { font-size: 13px; }
  .vc-article th, .vc-article td { padding: 8px 6px; }
  .vc-article td:first-child { white-space: normal; }
  .vc-article h2 { font-size: 22px; }
  .vc-article-cta .vc-btn { width: 100%; }
}

/* --------------------------------------------------------------- index */

.vc-guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.vc-guide-card {
  display: block;
  background: var(--vc-panel);
  border: 1px solid var(--vc-panel-border);
  border-radius: var(--vc-radius);
  padding: 26px 26px 24px;
  color: inherit;
  text-decoration: none;
}
.vc-guide-card:hover { box-shadow: var(--vc-shadow); border-color: var(--vc-primary); }
.vc-guide-card h2 { font-size: 21px; margin: 0 0 8px; }
.vc-guide-card p { font-size: 15px; margin: 0 0 14px; color: var(--vc-text-medium); }
.vc-guide-card span { font-size: 13px; color: var(--vc-text-light); }
.vc-guide-more { margin-top: 28px; color: var(--vc-text-light); font-size: 14px; }