/*
 * DiviTorque — Modules index (C5 index), single module (C5), demo (C6).
 * Built from semantic tokens + global components. Source: 03-DESIGN-GUIDE.md C5/C6.
 * Reuses .grid, .mod, .mesh, .dt-demo-card, .dt-link, .dt-breadcrumb (global.css).
 */

/* ─── Modules index ───────────────────────────────────────────────── */
.dt-mi-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(24px, 4vw, 40px); text-align: center; }
.dt-mi-hero .dt-eyebrow { margin-bottom: 14px; }
.dt-mi-hero__title { font-size: var(--text-3xl); font-weight: var(--fw-semi); line-height: var(--lh-display); letter-spacing: -.022em; }
.dt-mi-hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 48ch; margin: 16px auto 0; }
.dt-mi-grid-wrap { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 80px); }
.dt-mi-card__name { font-size: var(--text-base); font-weight: var(--fw-semi); letter-spacing: -.01em; margin: 0; }

/* ─── Single module: manual content area (editor body) ────────────── */
.dt-mp-content { padding: clamp(32px, 5vw, 56px) 0; }
/* use the default page container width — don't force the narrow reading column */
.dt-mp-content .dt-page__content { max-width: none; margin-inline: 0; }
.dt-mp-content .dt-page__content > :first-child { margin-top: 0; }

/* ─── Single module hero ──────────────────────────────────────────── */
.dt-sm-intro { padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 5vw, 56px); }
.dt-sm-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.dt-sm-intro__icon { margin-bottom: 20px; }
.dt-sm-intro__cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dt-sm-intro__cta .dt-link { margin-top: 0; }

/* ─── Highlights ──────────────────────────────────────────────────── */
.dt-sm-highlights { padding: clamp(40px, 6vw, 72px) 0; background: var(--color-surface); }
.dt-sm-highlights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dt-sm-highlight { padding: 24px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.dt-sm-highlight__h { font-size: var(--text-base); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.dt-sm-highlight p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 8px; }

/* ─── How it works ────────────────────────────────────────────────── */
.dt-sm-how { padding: clamp(48px, 7vw, 88px) 0; }
.dt-sm-how__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); text-align: center; margin-bottom: 36px; }
.dt-sm-how__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.dt-sm-how__steps li { position: relative; }
.dt-sm-how__n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-on-action); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.dt-sm-how__h { font-size: var(--text-lg); font-weight: var(--fw-semi); letter-spacing: -.01em; margin: 14px 0 8px; }
.dt-sm-how__steps p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ─── Specs (mono list) ───────────────────────────────────────────── */
.dt-sm-specs { padding: 0 0 clamp(48px, 7vw, 88px); }
.dt-sm-specs__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); text-align: center; margin-bottom: 28px; }
.dt-sm-specs__list { max-width: 560px; margin: 0 auto; display: grid; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.dt-sm-specs__list div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.dt-sm-specs__list div:last-child { border-bottom: 0; }
.dt-sm-specs__list dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.dt-sm-specs__list dd { margin: 0; font-weight: var(--fw-med); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* ─── Related ─────────────────────────────────────────────────────── */
/* Related modules — a clearly-separate band (kicker + heading + sub), so it
   reads as "more modules", never as part of the demo above it. */
.dt-sm-related { padding: clamp(48px, 7vw, 88px) 0; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.dt-sm-related__head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 40px); text-align: center; }
.dt-sm-related__kicker { margin-bottom: 10px; }
.dt-sm-related__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); letter-spacing: -.02em; }
.dt-sm-related__sub { margin-top: 10px; color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-body); }

/* ─── Module masthead — clean editorial: eyebrow · title · value · breadcrumb ── */
.dt-mod-head { border-bottom: 1px solid var(--color-border); padding: clamp(52px, 8vw, 104px) 0 clamp(30px, 4vw, 48px); }
.dt-mod-head__eyebrow { margin-bottom: 14px; }
.dt-mod-head__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--fw-semi); letter-spacing: -.025em; line-height: 1.08; }
.dt-mod-head__sub { margin-top: 16px; max-width: 60ch; font-size: var(--text-lg); line-height: var(--lh-body); color: var(--color-text-muted); }
/* Breadcrumb sits quietly at the foot of the heading — a light meta row. */
.dt-mod-head__main .dt-breadcrumb { margin: clamp(28px, 4vw, 40px) 0 0; padding-top: 18px; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
	.dt-sm-intro__grid { grid-template-columns: 1fr; }
	.dt-sm-highlights__grid { grid-template-columns: 1fr; }
	.dt-sm-how__steps { grid-template-columns: 1fr; gap: 28px; }
}