/* ============================================================================
   ZakERP site - product tour and customisation pages.
   ========================================================================== */

/* --------------------------------------------------------- module block -- */
.mod {
    padding-block: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
    border-top: 1px solid var(--border);
    scroll-margin-top: calc(var(--nav-h) + 1.4rem);
}
.mod:first-of-type { border-top: 0; }

.mod-grid {
    display: grid; gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
}
@media (max-width: 900px) { .mod-grid { grid-template-columns: 1fr; } }

.mod-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.mod-ico {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.3rem;
    color: #fff; background: var(--grad-brand); box-shadow: var(--glow);
}
.mod-ico.v2 { background: var(--grad-warm); box-shadow: 0 12px 32px rgba(168,85,247,.32); }
.mod-ico.v3 { background: var(--grad-mint); box-shadow: 0 12px 32px rgba(67,233,123,.28); color: #06281a; }
.mod-head h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); margin: 0; }
.mod-head .kicker {
    font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3); display: block; margin-bottom: .3rem;
}
.mod p { font-size: 1rem; line-height: 1.75; }
.mod p + p { margin-top: .9rem; }

/* the right-hand evidence column */
.mod-eq { display: grid; gap: 1.1rem; }
.eq-box {
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); padding: 1.25rem 1.35rem;
}
:root[data-theme="light"] .eq-box { box-shadow: var(--shadow-sm); }
.eq-box h4 {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--font); font-size: .74rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: .85rem;
}
.eq-box h4 i { font-size: .9rem; }

.taglist { display: flex; flex-wrap: wrap; gap: .4rem; }
.taglist span {
    font-size: .8rem; padding: .26rem .6rem; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
}
.taglist span.hi { color: var(--brand-light); border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
:root[data-theme="light"] .taglist span.hi { color: var(--brand-dark); }
.taglist span.more { background: none; border-style: dashed; color: var(--ink-3); }

.eq-note {
    margin-top: .9rem; padding-top: .85rem; border-top: 1px dashed var(--border);
    font-size: .89rem; color: var(--ink-2); line-height: 1.6;
}
.eq-note b { color: var(--ink); }

/* ------------------------------------------------------- module jump bar -- */
.jump { position: sticky; top: var(--nav-h); z-index: 60; background: var(--bg); border-bottom: 1px solid var(--border); }
.jump .wrap { display: flex; gap: .3rem; overflow-x: auto; padding-block: .6rem; scrollbar-width: none; }
.jump .wrap::-webkit-scrollbar { display: none; }
.jump a {
    white-space: nowrap; padding: .42rem .8rem; border-radius: var(--r-full);
    font-size: .86rem; font-weight: 500; color: var(--ink-2);
    border: 1px solid transparent; transition: all .2s;
}
.jump a:hover { color: var(--ink); background: var(--surface-2); }
.jump a.active { color: var(--brand-light); border-color: color-mix(in srgb, var(--brand) 38%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); }
:root[data-theme="light"] .jump a.active { color: var(--brand-dark); }

/* ------------------------------------------------------- DSL type table -- */
.dsl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.dsl-card {
    border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
    padding: 1.2rem 1.3rem; transition: border-color .25s, transform .25s var(--ease);
}
.dsl-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.dsl-card code {
    font-family: var(--font-mono); font-size: .84rem; font-weight: 600;
    color: var(--brand-light); display: block; margin-bottom: .5rem;
}
:root[data-theme="light"] .dsl-card code { color: var(--brand-dark); }
.dsl-card p { font-size: .92rem; margin: 0; line-height: 1.6; }

/* ------------------------------------------------------- before / after -- */
.ba { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.ba > div { display: flex; flex-direction: column; }
.ba .code { flex: 1; }
.ba-label {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.ba-label i { font-size: .95rem; }

/* the "what you get" panel that sits beside a code sample */
.gets { list-style: none; padding: 0; display: grid; gap: .7rem; }
.gets li { display: flex; gap: .7rem; font-size: .95rem; color: var(--ink-2); line-height: 1.6; }
.gets li i { color: var(--mint); margin-top: .2rem; flex-shrink: 0; }
.gets li b { color: var(--ink); font-weight: 600; }

@media print {
    .jump { display: none !important; }
    .mod { break-inside: avoid; }
}