/* =========================================================================
   GUIDE — shared article layout for the /resources/ guide pages.
   Loads after aurora.css (shared Aurora primitives: .ap-aurora, .glass,
   .ap-btn, .ap-subscribe, .ap-news, .eyebrow, .ap-wrap …) and only styles
   what guides add: the compact hero, long-form article typography, numbered
   step cards, callouts, tables and the checklist.
   ========================================================================= */

/* ------------------------------------------------------------------ hero */
.ap-ghero {
  position: relative;
  overflow: hidden;
  padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.ap-ghero__back {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
  text-decoration: none;
  margin-bottom: 1.6rem;
  transition: color .2s ease;
}
.ap-ghero__back:hover { color: var(--ap-green-ink); }

.ap-ghero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: .55em 0 .5em;
  max-width: 21ch;
}

.ap-ghero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: var(--ap-ink-soft);
  max-width: 62ch;
}

.ap-ghero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.4rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ap-ink-faint);
}

/* --------------------------------------------------------------- article */
.ap-article {
  position: relative;
  padding: 0 0 clamp(2rem, 5vw, 3.5rem);
}

.ap-article__body {
  max-width: 46rem; /* ~72ch reading measure */
}

.ap-article__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 2.6em 0 .7em;
}

.ap-article__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  margin: 1.9em 0 .5em;
}

.ap-article__body p,
.ap-article__body li {
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--ap-ink-soft);
}
.ap-article__body p { margin: 0 0 1.15em; }

.ap-article__body strong { color: var(--ap-ink); }

.ap-article__body a {
  color: var(--ap-green-ink);
  text-decoration: underline;
  text-decoration-color: rgba(18, 185, 116, .35);
  text-underline-offset: 3px;
}
.ap-article__body a:hover { text-decoration-color: currentColor; }

.ap-article__body ul,
.ap-article__body ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.ap-article__body li { margin-bottom: .45em; }
.ap-article__body li::marker { color: var(--ap-green); font-weight: 700; }

/* Source / citation footnote */
.ap-article__source {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ap-ink-faint);
  border-left: 2px solid var(--ap-line);
  padding-left: .9rem;
  margin: 1.4em 0;
}

/* ------------------------------------------------- numbered step cards */
.ap-gstep {
  position: relative;
  border-radius: var(--ap-radius);
  padding: 1.5rem 1.6rem 1.35rem 1.6rem;
  margin: 1.6rem 0;
  overflow: hidden;
}

.ap-gstep__num {
  position: absolute;
  right: .55rem;
  top: -1.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(18, 185, 116, .30);
  pointer-events: none;
  user-select: none;
}

.ap-gstep h3 { margin-top: 0 !important; padding-right: 3.5rem; }
.ap-gstep p:last-child { margin-bottom: 0; }

.ap-gstep__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-green-ink);
  margin-bottom: .5rem;
}

/* --------------------------------------------------------------- callout */
.ap-callout {
  border-radius: var(--ap-radius);
  border: 1px solid rgba(18, 185, 116, .28);
  background: linear-gradient(135deg, rgba(61, 220, 151, .10), rgba(15, 184, 176, .07));
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
}
.ap-callout p { margin: 0; }
.ap-callout p + p { margin-top: .7em; }
.ap-callout__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-green-ink);
  margin-bottom: .45rem;
}

/* ----------------------------------------------------------------- table */
.ap-gtable { overflow-x: auto; margin: 1.6rem 0; }
.ap-gtable table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .97rem;
  line-height: 1.55;
}
.ap-gtable th,
.ap-gtable td {
  text-align: left;
  vertical-align: top;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--ap-line);
  color: var(--ap-ink-soft);
}
.ap-gtable th {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
.ap-gtable td:first-child { font-weight: 600; color: var(--ap-ink); white-space: nowrap; }

/* ------------------------------------------------------------- checklist */
.ap-gcheck {
  border-radius: var(--ap-radius);
  margin: 1.6rem 0;
  padding: 1.5rem 1.6rem;
}
.ap-gcheck ul { list-style: none; margin: 0; padding: 0; }
.ap-gcheck li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .7em;
}
.ap-gcheck li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 6px;
  border: 2px solid var(--ap-green);
  background: rgba(61, 220, 151, .10);
}
.ap-gcheck li::after {
  content: "";
  position: absolute;
  left: .30rem;
  top: .48em;
  width: .55rem;
  height: .3rem;
  border-left: 2px solid var(--ap-green-ink);
  border-bottom: 2px solid var(--ap-green-ink);
  transform: rotate(-45deg);
  opacity: .85;
}

/* ---------------------------------------------------------- small screens */
@media (max-width: 640px) {
  .ap-gstep { padding: 1.25rem 1.15rem 1.1rem; }
  .ap-gstep__num { font-size: 4rem; }
}