/* ================================================================
   frontstage/museum-app.php — pagina-eigen stijl.
   Vereist css/shared/tokens.css + css/shared/base.css + css/ig-landing.css
   ervoor (nav/modal/knop-componenten komen uit ig-landing.css, gedeeld
   met index.php via inc/nav.php + inc/modals.php).
   ================================================================ */

.wrap { max-width: 68rem; margin: 0 auto; padding-inline: 1.5rem; }

/* ── Type scale ── */
.ma-eyebrow {
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--teal); margin-bottom: .6rem;
}
.ma-h1 {
    font-size: clamp(2rem, 5.2vw, 3.1rem); font-weight: 700; letter-spacing: -.03em;
    line-height: 1.08; text-wrap: balance;
}
.ma-h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 700; letter-spacing: -.025em;
    line-height: 1.15; text-wrap: balance;
}
.ma-lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 38rem; margin-top: 1rem; }
.ma-body { color: var(--ink-soft); max-width: 40rem; }
.ma-body + .ma-body { margin-top: .9rem; }

/* ── Section rhythm ── */
.ma-section { padding: 4.5rem 0; }
.ma-section.ma-bg-sand { background: var(--sand); }
.ma-section-head { max-width: 40rem; margin-bottom: 2.5rem; }

/* ── Hero ── */
.ma-hero {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
    display: grid; gap: 2.5rem; align-items: start;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) { .ma-hero { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.ma-cta {
    margin-top: 1.75rem; display: inline-flex; align-items: center; gap: .5rem;
    background: var(--teal); color: #fff; border: none; border-radius: var(--radius);
    padding: .8rem 1.5rem; font-size: .95rem; font-weight: 600; cursor: pointer;
    text-decoration: none;
}
.ma-cta:hover { background: var(--teal-deep); }

/* ── Real photos ── */
.ma-photo-frame {
    border-radius: calc(var(--radius) * 1.3);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(28, 43, 45, .18);
}
.ma-photo-frame img { width: 100%; display: block; }
.ma-photo-frame + .ma-photo-frame { margin-top: 1rem; }

/* Staggered row on desktop, endless looping slider on mobile */
.ma-strip { margin-top: 2.5rem; }
.ma-strip-desktop { display: none; }
.ma-strip-mobile { overflow: hidden; }
.ma-strip-track {
    display: flex; gap: 1rem; width: max-content;
    animation: ma-marquee 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ma-strip-track { animation: none; } }
.ma-strip-mobile .ma-strip-item { flex: 0 0 auto; width: 150px; }
.ma-strip-item img {
    width: 100%; display: block; border-radius: calc(var(--radius) * .9);
    box-shadow: 0 10px 28px rgba(28, 43, 45, .16);
}
@keyframes ma-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (min-width: 780px) {
    .ma-strip-desktop {
        display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
        gap: 1.75rem; padding-top: .5rem;
    }
    .ma-strip-desktop .ma-strip-item { width: 190px; }
    .ma-strip-item-up   { transform: translateY(-1.5rem); }
    .ma-strip-item-down { transform: translateY(1.5rem); }
    .ma-strip-mobile { display: none; }
}

/* ── Entry paths (QR vs. overview page) ── */
.ma-paths { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 640px) { .ma-paths { grid-template-columns: 1fr 1fr; } }
.ma-path-card {
    background: var(--bg); border: 1px solid var(--sand-line); border-radius: calc(var(--radius) * 1.2);
    padding: 1.5rem;
}
.ma-section.ma-bg-sand .ma-path-card { background: var(--bg); }
.ma-path-label {
    display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--teal-deep); background: var(--teal-tint); padding: .2em .6em; border-radius: 5px; margin-bottom: .8rem;
}
.ma-path-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .5rem; }
.ma-path-card p { font-size: .9rem; color: var(--ink-soft); }
.ma-path-card a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.ma-path-list { margin-top: .9rem; display: flex; flex-direction: column; gap: .8rem; }
.ma-path-list li { list-style: none; }
.ma-path-list b { display: block; color: var(--ink); font-weight: 600; font-size: .9rem; }
.ma-path-list p { margin-top: .2rem; font-size: .85rem; opacity: .7; }

/* ── Feature grid ── */
.ma-features { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 640px) { .ma-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ma-features { grid-template-columns: repeat(3, 1fr); } }
.ma-feature-card {
    background: var(--bg); border: 1px solid var(--sand-line); border-radius: calc(var(--radius) * 1.2);
    padding: 1.4rem;
}
.ma-feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: -.01em; }
.ma-feature-card p { font-size: .88rem; color: var(--ink-soft); }
.ma-section.ma-bg-sand .ma-feature-card { background: var(--bg); }

/* ── Steps ── */
.ma-steps { counter-reset: ma-step; display: grid; gap: 1.5rem; margin-top: 2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .ma-steps { grid-template-columns: repeat(4, 1fr); } }
.ma-step { counter-increment: ma-step; }
.ma-step::before {
    content: counter(ma-step, decimal-leading-zero);
    display: block; font-size: .78rem; font-weight: 700; color: var(--teal);
    letter-spacing: .08em; margin-bottom: .5rem;
}
.ma-step h3 { font-size: .98rem; font-weight: 700; margin-bottom: .4rem; }
.ma-step p { font-size: .85rem; color: var(--ink-soft); }

/* ── Stat strip ── */
.ma-stats { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; }
@media (min-width: 780px) { .ma-stats { grid-template-columns: repeat(4, 1fr); } }
.ma-stat { border-top: 2px solid var(--teal); padding-top: .7rem; }
.ma-stat-label { font-size: .84rem; font-weight: 600; color: var(--ink); }
.ma-stat-sub { font-size: .78rem; color: var(--ink-soft); margin-top: .2rem; }

/* ── Split (content-system section) ── */
.ma-split { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .ma-split { grid-template-columns: .95fr 1.05fr; } }

/* ── Closing CTA ── */
.ma-closing { background: var(--teal); color: #fff; text-align: center; padding: 5rem 0; }
.ma-closing .ma-h2 { color: #fff; }
.ma-closing p { color: rgba(255,255,255,.82); max-width: 34rem; margin: .9rem auto 0; }
.ma-closing .ma-cta { background: #fff; color: var(--teal-deep); margin-top: 1.75rem; }
.ma-closing .ma-cta:hover { background: var(--teal-tint); }