/**
 * Crescita Studio — Guides (/risorse/) reading layout.
 *
 * Loaded only on single guide posts (see crescita_risorse_enqueue). Landing
 * pages keep their edge-to-edge layout; a guide is a single constrained
 * reading column. Uses the Brand Kit tokens only (tokens.css); introduces no
 * new colours, fonts or scales. The H1, headings and buttons keep their
 * sitewide treatment from components.css and are not restyled here.
 */

/* ── The reading column ─────────────────────────────────────────── */

.crescita-guide {
  background: var(--color-bg);
}

.crescita-guide__article {
  max-width: var(--width-text);      /* 720px reading measure */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-block: clamp(2.5rem, 6vw, var(--space-2xl));
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */

.crescita-guide__breadcrumb {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.crescita-guide__breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.crescita-guide__breadcrumb a:hover,
.crescita-guide__breadcrumb a:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
}

/* ── Title and meta ─────────────────────────────────────────────── */

.crescita-guide__head {
  margin-bottom: var(--space-xl);
}

.crescita-guide__title {
  margin: 0 0 var(--space-md);
}

.crescita-guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.crescita-guide__byline {
  font-weight: var(--weight-heading-strong);
}

/* ── Prose ──────────────────────────────────────────────────────── */

.crescita-guide__content {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-body);
}

/* Vertical rhythm: space comes from the top of block elements so the
   first child sits flush under the meta and runs of text breathe evenly. */
.crescita-guide__content > * {
  margin-block: 0 var(--space-md);
}

.crescita-guide__content > h2 {
  font-size: var(--text-h2);
  margin-block: var(--space-xl) var(--space-sm);
}

.crescita-guide__content > h3 {
  font-size: var(--text-h3);
  margin-block: var(--space-lg) var(--space-sm);
}

.crescita-guide__content > :first-child {
  margin-top: 0;
}

.crescita-guide__content a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.crescita-guide__content a:hover,
.crescita-guide__content a:focus-visible {
  text-decoration-thickness: 2px;
}

.crescita-guide__content ul,
.crescita-guide__content ol {
  padding-left: 1.35em;
}

.crescita-guide__content li {
  margin-block: 0 var(--space-2xs);
}

.crescita-guide__content li::marker {
  color: var(--crescita-fog);
}

.crescita-guide__content blockquote {
  margin-inline: 0;
  padding-left: var(--space-md);
  /* Conventional blockquote indent marker, not a card side-tab accent: a 3px
     rule in the low-contrast neutral --color-border on a <blockquote> in body
     prose. impeccable-disable-line side-tab */
  border-left: 3px solid var(--color-border);
  color: var(--color-text-secondary);
}

.crescita-guide__content strong {
  font-weight: var(--weight-heading-strong);
}

.crescita-guide__content hr {
  border: 0;
  border-top: var(--border-hairline);
  margin-block: var(--space-xl);
}

/* Images inside a guide sit within the reading measure and keep the
   architectural corner radius. max-width isn't reset globally outside
   home.css/diagnosi.css, so a supportive image authored at a wider
   intrinsic size (e.g. 720x405) would overflow the 720px column without
   this. */
.crescita-guide__content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
}

.crescita-guide__content figure {
  margin: 0;
}

.crescita-guide__content figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-align: center;
}

/* An in-content "next reading" list, when a guide includes one. It is
   authored in the content (editorial, hand-picked — never an automatic
   related-posts widget), so this only gives it a calm, bounded frame. */
.crescita-guide__content .crescita-guide-more {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-bg-alt);
  border-radius: var(--radius-card);
}

.crescita-guide__content .crescita-guide-more > :last-child {
  margin-bottom: 0;
}