/* ══════════════════════════════════════════
   PRODUCT GUIDES — CommunityDX
   Neobrutalism on the brand palette: flat cream canvas, white
   surfaces, thick navy borders, hard (zero-blur) navy shadows.
   Shared reset, buttons, header, footer live in layout.css.
   ══════════════════════════════════════════ */

.guides-layout {
  /* Matches .header-inner (1440 / 72px) so the docs columns line up with
     the logo and nav above them. */
  --guides-header-height: 69px;
  --guides-sticky-top: calc(var(--guides-header-height) + var(--space-lg));

  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-2xl) 72px var(--space-4xl);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas: "nav article";
  gap: var(--space-xl);
  align-items: start;
}

/* Only guide articles carry an "On this page" column. */
.guides-layout--toc {
  grid-template-columns: 240px minmax(0, 1fr) 200px;
  grid-template-areas: "nav article toc";
}

.guides-nav { grid-area: nav; }
.guide,
.guides-main { grid-area: article; }
.guide-toc { grid-area: toc; }

/* Anchor jumps must clear the sticky site header. html already sets
   scroll-behavior: smooth. */
.guide__section {
  scroll-margin-top: calc(var(--guides-header-height) + var(--space-md));
}

/* ── Sidebar nav ── */

.guides-nav {
  position: sticky;
  top: var(--guides-sticky-top);
  max-height: calc(100vh - var(--guides-sticky-top) - var(--space-lg));
  overflow-y: auto;
  background: var(--color-white);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow-deep);
  padding: var(--space-md);
}

.guides-nav__home {
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neo-ink);
  padding: var(--space-sm);
  border-bottom: 2px solid var(--neo-ink);
  margin-bottom: var(--space-md);
}

.guides-nav__home:hover {
  color: var(--color-brand-teal-deep);
}

.guides-nav__home.is-active {
  background: var(--neo-ink);
  color: var(--color-white);
}

.guides-nav__group + .guides-nav__group {
  margin-top: var(--space-lg);
}

.guides-nav__product {
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
  padding: var(--space-sm);
  border-left: 4px solid transparent;
}

.guides-nav__product:hover,
.guides-nav__product.is-active {
  border-left-color: var(--color-brand-teal);
  background: var(--color-bg);
}

.guides-nav__list {
  list-style: none;
  margin-top: var(--space-xs);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-gray-20);
}

.guides-nav__link {
  display: block;
  padding: 7px var(--space-sm);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--color-gray-90);
  border-left: 3px solid transparent;
}

.guides-nav__link:hover {
  color: var(--neo-ink);
  border-left-color: var(--color-brand-teal);
  background: var(--color-bg);
}

.guides-nav__link.is-active {
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
  border-left-color: var(--color-cta);
  background: var(--color-bg);
}

.guides-nav__empty {
  padding: 7px var(--space-sm) 7px var(--space-lg);
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-60);
  font-style: italic;
}

/* ── On this page ── */

.guide-toc {
  position: sticky;
  top: var(--guides-sticky-top);
  max-height: calc(100vh - var(--guides-sticky-top) - var(--space-lg));
  overflow-y: auto;
  background: var(--color-white);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow);
  padding: var(--space-md);
}

.guide-toc__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neo-ink);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--neo-ink);
  margin-bottom: var(--space-sm);
}

.guide-toc__list {
  list-style: none;
}

.guide-toc__link {
  display: block;
  padding: 6px var(--space-sm);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--color-gray-60);
  border-left: 3px solid var(--color-gray-20);
}

.guide-toc__link:hover {
  color: var(--neo-ink);
  border-left-color: var(--color-brand-teal);
  background: var(--color-bg);
}

.guide-toc__link.is-current {
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
  border-left-color: var(--color-cta);
  background: var(--color-bg);
}

/* ── Article surface ── */

.guide {
  /* Figures sit beside their steps whenever the article itself is wide
     enough — which depends on how many nav columns are showing, not on
     the viewport. See the @container rule on .guide-row. */
  container-type: inline-size;
  background: var(--color-white);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow-deep);
  padding: var(--space-2xl);
}

.guide__eyebrow {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-brand-teal-deep);
  margin-bottom: var(--space-sm);
}

.guide__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--neo-ink);
}

.guide__lede {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-90);
  margin-top: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: var(--neo-border-width) solid var(--neo-ink);
}

.guide__section {
  margin-top: var(--space-2xl);
}

.guide__section > h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--neo-ink);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--neo-ink);
  margin-bottom: var(--space-md);
}

.guide__section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.guide__section p,
.guide__section li {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-90);
}

.guide__section p + p,
.guide__section > * + p {
  margin-top: var(--space-md);
}

.guide__section strong {
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
}

.guide__section a {
  color: var(--color-brand-teal-deep);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.guide__section a:hover {
  color: var(--color-white);
  background: var(--color-brand-teal-deep);
  text-decoration-color: transparent;
}

/* Bulleted prose lists (layout.css strips list styling globally) */
.guide-list {
  list-style: square;
  padding-left: var(--space-lg);
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

.guide-list > li::marker {
  color: var(--color-brand-teal);
}

/* Numbered steps with opaque navy badges */
.guide-steps {
  list-style: none;
  counter-reset: guide-step;
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-md);
}

.guide-steps > li {
  counter-increment: guide-step;
  position: relative;
  padding-left: 44px;
  min-height: 30px;
}

.guide-steps > li::before {
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--neo-ink);
  color: var(--color-white);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-sm);
}

.guide-steps .guide-list {
  margin-top: var(--space-sm);
}

/* ── Step + image row ── */

.guide-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-md);
}

@container (min-width: 620px) {
  .guide-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  }
}

.guide-row > .guide-figure {
  margin-top: 0;
}

.guide-figure {
  margin-top: var(--space-lg);
}

.guide-figure__img,
.guide-figure__placeholder {
  width: 100%;
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow);
  background: var(--color-bg);
}

.guide-figure__placeholder {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--color-gray-60);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  padding: var(--space-md);
}

/* Unstyled button wrapper so the screenshot is keyboard-focusable. */
.guide-figure__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

/* Full-viewport image viewer; guides.js sets the background-image. */
.guide-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: var(--space-lg);
  background-color: rgba(23, 44, 61, 0.92);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-origin: content-box;
  cursor: zoom-out;
}

.guide-lightbox.is-open {
  display: block;
}

.guide-figure__caption {
  margin-top: var(--space-sm);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--color-gray-60);
}

/* ── Callout (limits, notes, troubleshooting summaries) ── */

.guide-callout {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow-subtle);
}

.guide-callout__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--neo-ink);
  margin-bottom: var(--space-sm);
}

.guide-callout .guide-list {
  margin-top: 0;
}

.guide-callout .guide-list + .guide-callout__title {
  margin-top: var(--space-md);
}

/* ── Prev / next pager ── */

.guide-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--neo-border-width) solid var(--neo-ink);
}

.guide-pager__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 48%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.guide-pager__link--next {
  margin-left: auto;
  text-align: right;
}

.guide-pager__link:hover {
  box-shadow: var(--neo-shadow-deep);
  transform: translate(-2px, -2px);
}

.guide-pager__dir {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-brand-teal-deep);
}

.guide-pager__title {
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
}

/* ── Landing + product overview ── */

.guides-intro {
  margin-bottom: var(--space-xl);
}

.guides-intro__eyebrow {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-brand-teal-deep);
  margin-bottom: var(--space-sm);
}

.guides-intro__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--neo-ink);
}

.guides-intro__text {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-90);
  margin-top: var(--space-md);
  max-width: 70ch;
}

.guides-product {
  background: var(--color-white);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow-deep);
  padding: var(--space-xl);
}

.guides-product + .guides-product {
  margin-top: var(--space-xl);
}

.guides-product__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
}

.guides-product__title a:hover {
  color: var(--color-brand-teal-deep);
}

.guides-product__blurb {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-90);
  margin-top: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--neo-ink);
  max-width: 70ch;
}

.guides-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.guides-card {
  display: block;
  height: 100%;
  padding: var(--space-md);
  background: var(--color-white);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.guides-card:hover {
  box-shadow: var(--neo-shadow-deep);
  transform: translate(-2px, -2px);
}

.guides-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--neo-ink);
}

.guides-card__summary {
  margin-top: var(--space-xs);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: var(--color-gray-90);
}

.guides-empty {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-bg);
  border: var(--neo-border-width) solid var(--neo-ink);
  box-shadow: var(--neo-shadow-subtle);
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-90);
}

.guides-product__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ── Focus ── */

.guides-layout a:focus-visible {
  outline: 3px solid var(--color-brand-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .guide-pager__link:hover,
  .guides-card:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* Not enough room for three columns: the TOC drops under the product nav
   rather than disappearing, since both are navigation. */
@media (max-width: 1200px) {
  .guides-layout--toc {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "nav article"
      "toc article";
    align-content: start;
  }

  .guide-toc {
    position: static;
    max-height: none;
  }
}

@media (max-width: 1024px) {
  .guides-layout,
  .guides-layout--toc {
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "article";
    padding: var(--space-xl) var(--space-2xl) var(--space-3xl);
  }

  .guides-layout--toc {
    grid-template-areas:
      "nav"
      "toc"
      "article";
  }

  .guides-nav {
    position: static;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .guides-layout {
    padding: var(--space-lg) 20px var(--space-2xl);
    gap: var(--space-lg);
  }

  .guide,
  .guides-product {
    padding: var(--space-lg);
  }

  .guide-pager {
    flex-direction: column;
  }

  .guide-pager__link {
    max-width: none;
  }

  .guide-pager__link--next {
    margin-left: 0;
    text-align: left;
  }
}