/* Revit add-in op maat — pagina-stijl (prefix ra-). Ontwerp: "Spation Revit Add-in op maat". */

/* Het ontwerp rekent met de standaard regelhoogte; plakhoogtes (--banner-h / --sticky-h) zet site.js */
.ra {
    --ra-anchor: var(--sticky-h);
    line-height: normal;
}

/* --- Productbalk -------------------------------------------- */
.ra-subnav {
    position: sticky; top: var(--banner-h); z-index: 30;
    background: var(--navy-2); border-bottom: 1px solid var(--navy-line);
}
.ra-subnav__inner {
    display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
    gap: 12px clamp(20px, 3vw, 32px);
    padding-top: 10px; padding-bottom: 10px;
    overflow-x: auto; scrollbar-width: none;
}
.ra-subnav__inner::-webkit-scrollbar { display: none; }
.ra-subnav__left { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 16px clamp(20px, 3vw, 32px); white-space: nowrap; }
.ra-subnav__title { font: 600 clamp(16px, 2vw, 18px) var(--font-display); color: var(--on-dark); }
.ra-subnav__links { display: flex; flex-wrap: nowrap; gap: 12px clamp(16px, 2.2vw, 24px); font-size: 14px; color: var(--on-dark-2); }
.ra-subnav__cta {
    flex: none; white-space: nowrap;
    padding: 9px 16px; border-radius: 10px;
    background: var(--orange); color: var(--navy);
    font-size: clamp(14px, 1.7vw, 15px); font-weight: 600;
}

/* --- Hero --------------------------------------------------- */
.ra-hero { background: var(--navy); color: var(--on-dark); }
.ra-hero__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: clamp(28px, 4vw, 56px); align-items: center;
    padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(52px, 8.5vw, 104px);
}
.ra-hero__copy { display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 28px); animation: rise .8s ease-out both; }
.ra-hero__note { font: 400 14px var(--font-mono); color: var(--on-dark-3); }
.ra-hero__media { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; animation: rise 1s .15s ease-out both; }
.ra-hero__shot { border-radius: 12px; overflow: hidden; background: #3b4453; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.ra-hero__shot img { display: block; width: 100%; height: auto; }
.ra-hero__caption { font: 400 13px var(--font-mono); color: var(--on-dark-3); }

/* --- 01 Voorbeelden ----------------------------------------- */
.ra-actie {
    display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px);
    padding-top: var(--section-y); padding-bottom: var(--section-y);
    scroll-margin-top: var(--ra-anchor);
}
.ra-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px clamp(28px, 4vw, 48px); }
.ra-head__copy { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.ra-head__text { max-width: 400px; font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

.ra-demo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.ra-demo__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; }
.ra-tabs { display: flex; flex-direction: column; gap: 8px; }
.ra-tab {
    width: 100%; margin: 0; padding: 18px 20px;
    display: flex; align-items: flex-start; gap: 14px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--card); color: var(--navy); text-align: left;
    transition: background-color .25s, border-color .25s;
}
.ra-tab__icon { width: 24px; padding-top: 2px; font-size: 20px; text-align: center; color: var(--blue); }
.ra-tab__body { display: flex; flex-direction: column; gap: 4px; }
.ra-tab__name { font: 600 clamp(16px, 2vw, 18px) var(--font-display); color: var(--navy); }
.ra-tab__text { font-size: clamp(14px, 1.7vw, 15px); line-height: 1.45; color: var(--text-2); }
.ra-tab.is-active { background: var(--navy); border-color: var(--navy); }
.ra-tab.is-active .ra-tab__icon { color: var(--orange); }
.ra-tab.is-active .ra-tab__name { color: var(--on-dark); }
.ra-tab.is-active .ra-tab__text { color: var(--on-dark-2); }
.ra-demo__caption { padding: 6px 4px; font: 400 13px var(--font-mono); color: var(--text-3); }

.ra-panel {
    flex: 2 1 520px; min-width: min(100%, 520px);
    display: flex; flex-direction: column; gap: 16px;
    padding: clamp(18px, 3vw, 32px); border-radius: 20px;
    background: var(--navy); color: var(--on-dark);
}
.ra-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font: 400 14px var(--font-mono); }
.ra-panel__name { color: var(--blue-pale); }
.ra-panel__status { color: var(--orange); }
.ra-stage { flex: 1; display: grid; min-height: clamp(280px, 36vw, 380px); }
.ra-layer { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.ra-layer.is-active { opacity: 1; visibility: visible; }

/* Sheets */
.ra-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 10px; }
.ra-sheet {
    display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px;
    background: var(--surface-soft); color: var(--navy);
    transition: opacity .4s, transform .4s;
}
.ra-sheet.is-off { opacity: .08; transform: translateY(8px); }
.ra-sheet__paper {
    aspect-ratio: 1.414 / 1; display: grid; grid-template-columns: 1fr 22%;
    border: 1px solid var(--line-strong); border-radius: 3px; background: var(--white);
}
.ra-sheet__view { margin: 12%; border: 1px solid #9aa8bb; }
.ra-sheet__block { display: flex; align-items: flex-end; padding: 3px; border-left: 1px solid var(--line-strong); }
.ra-sheet__block div { width: 100%; height: 30%; background: var(--line); }
.ra-sheet__label { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ra-sheet__label b { font: 600 12px var(--font-mono); color: var(--blue-dark); }
.ra-sheet__label span { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }

/* Maatvoering: plattegrond met maatlijnen (posities in % van het vlak) */
.ra-plan-wrap { display: flex; align-items: center; justify-content: center; }
.ra-plan { position: relative; width: min(100%, 520px); aspect-ratio: 1.6 / 1; }
.ra-plan > div { position: absolute; }
.ra-plan__outline { left: 14%; top: 22%; right: 4%; bottom: 4%; border: 6px solid var(--on-dark-4); }
.ra-plan__wall { top: 22%; bottom: 4%; width: 6px; background: var(--on-dark-4); }
.ra-plan__wall--1 { left: calc(14% + 30% * .82); }
.ra-plan__wall--2 { left: calc(14% + 70% * .82); }
.ra-plan__opening {
    top: calc(22% - 3px); height: 12px; background: var(--navy);
    border-left: 2px solid var(--blue-pale); border-right: 2px solid var(--blue-pale);
}
.ra-plan__opening--1 { left: calc(14% + 10% * .82); width: 12%; }
.ra-plan__opening--2 { left: calc(14% + 80% * .82); width: 10%; }
.ra-dim {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--orange); border-top: 0;
    transition: opacity .4s;
}
.ra-dim.is-off { opacity: 0; }
.ra-dim span {
    padding: 0 4px; background: var(--navy);
    font: 500 clamp(10px, 1.3vw, 12px) var(--font-mono); color: var(--orange);
    transform: translateY(60%);
}
.ra-dim--1 { left: 14%; top: 6%; width: 82%; height: 10%; }
.ra-dim--1 span { transform: translateY(55%); }
.ra-dim--2 { left: 14%; top: 13%; width: calc(82% * .3); height: 6%; }
.ra-dim--3 { left: calc(14% + 82% * .3); top: 13%; width: calc(82% * .4); height: 6%; }
.ra-dim--4 { left: calc(14% + 82% * .7); top: 13%; width: calc(82% * .3); height: 6%; }
.ra-dim--5 { left: 2%; top: 22%; width: 7%; height: 74%; border-top: 2px solid var(--orange); }
.ra-dim--5 span { transform: rotate(-90deg); }

/* Nummeren */
.ra-rooms-wrap { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ra-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ra-room {
    aspect-ratio: 1.25 / 1; padding: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 2px solid var(--navy-line); border-radius: 6px; background: var(--navy-2);
    text-align: center; transition: border-color .3s;
}
.ra-room span { font-size: clamp(11px, 1.4vw, 13px); color: var(--on-dark-4); overflow-wrap: anywhere; }
.ra-room b { font: 600 clamp(13px, 1.8vw, 17px) var(--font-mono); color: var(--text-3); transition: color .3s; }
.ra-room.is-done b { color: var(--orange); }
.ra-room.is-at { border-color: var(--orange); }
.ra-rooms__caption { font: 400 13px var(--font-mono); color: var(--on-dark-3); }

/* --- 02 Hoe het werkt --------------------------------------- */
.ra-werking { background: var(--blue-tint); scroll-margin-top: var(--ra-anchor); }
.ra-werking__inner { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); padding-top: var(--section-y); padding-bottom: var(--section-y); }
.ra-werking__head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.ra-steps {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px;
}
.ra-step {
    display: flex; flex-direction: column; gap: 10px;
    padding: clamp(20px, 2.6vw, 28px); border: 1px solid #c9d8ea; border-radius: 18px; background: var(--card);
}
.ra-step__nr { font: 600 clamp(32px, 4.4vw, 48px)/1 var(--font-display); color: var(--blue); }
.ra-step__title { font: 600 clamp(18px, 2.4vw, 22px) var(--font-display); }
.ra-step__text { line-height: 1.5; color: var(--text-2); }

/* --- Blauwe band -------------------------------------------- */
.ra-band { background: var(--blue); color: var(--on-dark); }
.ra-band__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(28px, 4vw, 56px); align-items: center;
    padding-top: clamp(52px, 8.5vw, 104px); padding-bottom: clamp(52px, 8.5vw, 104px);
}
.ra-band__title { font: 600 clamp(28px, 5vw, 48px)/1.08 var(--font-display); letter-spacing: -1.5px; text-wrap: balance; }
.ra-band__text { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: #e4eefa; text-wrap: pretty; }

/* --- Kennismaken -------------------------------------------- */
.ra-contact-wrap { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.ra-contact {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(28px, 4vw, 56px);
    padding: clamp(24px, 4vw, 56px); border-radius: 20px;
    background: var(--navy); color: var(--on-dark);
    scroll-margin-top: var(--ra-anchor);
}
.ra-contact__intro { display: flex; flex-direction: column; gap: 18px; }
.ra-contact__kicker { font-size: 14px; }
.ra-contact__title { font: 600 clamp(26px, 4.2vw, 42px)/1.08 var(--font-display); text-wrap: balance; }
.ra-contact__list {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 12px;
    font-size: clamp(15px, 1.8vw, 16px); color: var(--on-dark-2);
}
.ra-contact__list li { display: flex; align-items: center; gap: 12px; }
.ra-contact__list li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--orange); }
.ra-contact__direct { margin-top: auto; font-size: 14px; color: var(--on-dark-3); }
.ra-contact__side { display: flex; flex-direction: column; gap: 12px; }
.ra-form { gap: 12px; }
.ra-contact__btn { min-height: 0; padding: 16px; font-size: clamp(15px, 1.9vw, 17px); }
.ra-contact__note { font-size: 14px; color: var(--on-dark-3); text-align: center; }