/* ── Manual page — page-specific styling only ── */

#manual-hero {
    padding: 20px 48px;
    text-align: center;
}

#manual-main {
    padding: 40px 48px 120px;
}

.manual-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 8px;
}

.manual-note {
    text-align: center;
    color: var(--fgm);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 40px;
}

.manual-note a {
    color: var(--pb);
    text-decoration: none;
    border-bottom: 1px solid var(--border-p);
    transition: border-color .2s ease, color .2s ease;
}

.manual-note a:hover {
    color: var(--fg);
    border-color: var(--pb);
}

/* ── Gallery grid: 2 columns x 3 rows desktop ── */
.manual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
}

.manual-fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.manual-imgbox {
    position: relative;
    /* 4:3 is only a placeholder box (no real image loaded yet, so there's
       nothing to size against). Once .has-img is added by manual.js, the
       box switches to sizing itself off the actual image below instead of
       forcing every photo into the same crop. */
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--b);
    background: #0c0c16;
    cursor: default;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.manual-imgbox.has-img {
    aspect-ratio: auto;
}

.manual-imgbox.has-img {
    cursor: pointer;
}

.manual-imgbox.has-img:hover {
    border-color: var(--border-p);
    box-shadow: 0 0 0 1px var(--border-p), 0 20px 50px -20px rgba(160,120,255,.35);
    transform: translateY(-2px);
}

/* Tap/press feedback — the imgbox is a real pressable trigger (opens the
   lightbox), so it should give the same kind of feedback a button gives,
   independent of hover capability (mouse press or touch tap alike). */
.manual-imgbox.has-img:active {
    transform: scale(.98);
    transition: transform .15s cubic-bezier(0.23, 1, 0.32, 1);
}

.manual-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, var(--pd), transparent 60%),
                linear-gradient(160deg, rgba(160,120,255,.14), rgba(8,8,15,.9));
}

.manual-placeholder span {
    color: var(--fgd);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.manual-imgbox img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

/* Once loaded, the box (aspect-ratio:auto above) sizes itself off the
   image's own intrinsic proportions, so the img can leave absolute/cover
   behind and just render at its natural aspect ratio inside — nothing
   gets cropped to fit an arbitrary 4:3 frame anymore. */
.manual-imgbox.has-img img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
}

/* Positioned elements paint above static ones regardless of DOM order, so
   with the real img now static (above) the still-absolutely-positioned
   placeholder would otherwise cover it back up. */
.manual-imgbox.has-img .manual-placeholder {
    display: none;
}

.manual-imgbox.has-img:hover img {
    transform: scale(1.04);
}

.manual-fig figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 2px;
}

.step-label {
    color: var(--pb);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
}

.manual-fig figcaption {
    color: var(--fgm);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
}

/* ── Lightbox ──
   Two-class open sequence (.pre-open sets display:flex first; .open is
   added a frame later by manual.js) so the browser actually has a
   rendered "opacity:0" frame to transition FROM — toggling display:none
   straight to opacity:1 in one step gives the UA no prior box to animate
   against and the fade never plays, it just pops. The image also scales
   in from .96 rather than fading alone from nothing, and eases out
   (strong custom curve, matching the .reveal curve used site-wide)
   rather than the weak default `ease`. Modal-style content stays
   centered — no trigger-anchored transform-origin needed here. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.9);
    opacity: 0;
    transition: opacity .25s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: zoom-out;
    padding: 40px;
}

.lightbox.pre-open {
    display: flex;
}

.lightbox.open {
    opacity: 1;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    object-fit: contain;
    transform: scale(.96);
    transition: transform .25s cubic-bezier(0.23, 1, 0.32, 1);
}

.lightbox.open img {
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .lightbox {
        transition: opacity .2s ease;
    }
    .lightbox img {
        transform: none;
        transition: none;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .manual-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 860px) {
    #manual-hero { padding: 130px 32px 32px; }
    #manual-main { padding: 32px 32px 90px; }
}

@media (max-width: 430px) {
    #manual-hero { padding: 120px 20px 28px; }
    #manual-main { padding: 28px 20px 70px; }
    .manual-imgbox { border-radius: 12px; }
    .lightbox { padding: 16px; }
}

/* Leftover Gutenberg block structure (see the matching comment in
   home.css): #manual-hero and #manual-main are each direct children of
   the WP page template's .wp-block-column, which gives every direct
   child an automatic margin-bottom (~30px) on top of whatever spacing
   each section already declares for itself — stacking into a much
   bigger, asymmetric gap between the hero subhead and the gallery below
   than intended. */
.wp-block-columns .wp-block-column > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* .sec-sub's own 64px bottom margin (meant for the homepage, where it
   precedes a large section) has nothing to do here — #manual-hero's own
   padding-bottom already provides the gap before #manual-main. */
#manual-hero .sec-sub {
    margin-bottom: 0 !important;
}

@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --p: #2c3ef0;
    --pb: #2c3ef0;
    --pd: rgba(44, 62, 240, .07);
    --border-p: rgba(44, 62, 240, .28);
    --fg: #12141a;
    --fgm: rgba(18, 20, 26, .62);
    --fgd: rgba(18, 20, 26, .42);
    --b: rgba(18, 20, 26, .10);
    --s: #2c3ef0;
    --sb: #2c3ef0;
    --sd: rgba(44, 62, 240, .07);
    --border-s: rgba(44, 62, 240, .28);
    --bg-soft: #f4f5f7;
    --accent-soft2: rgba(44, 62, 240, .13);
}

body {
    background: #ffffff;
    color: var(--fg);
    font-family: 'Outfit', system-ui, sans-serif;
}

#cglow, #cdot { display: none }

.sec-label { color: var(--p) }
.sec-title { color: var(--fg); font-weight: 600 }
.sec-sub { color: var(--fgm) }

.btn-p {
    background: var(--p);
    border: 1px solid var(--p);
    color: #fff;
}
@media (hover: hover) and (pointer: fine) {
    .btn-p:hover { background: #212fc7; border-color: #212fc7 }
}
.btn-g {
    background: transparent;
    border: 1px solid var(--b);
    color: var(--fgm);
}
@media (hover: hover) and (pointer: fine) {
    .btn-g:hover { border-color: var(--fgd); color: var(--fg) }
}

.manual-imgbox {
    background: var(--bg-soft);
}
.manual-imgbox.has-img:hover {
    box-shadow: 0 0 0 1px var(--border-p), 0 20px 50px -20px rgba(44, 62, 240, .25);
}
.manual-placeholder {
    background: radial-gradient(circle at 30% 20%, var(--pd), transparent 60%),
                linear-gradient(160deg, rgba(44, 62, 240, .06), var(--bg-soft));
}