/* ------------------------------------------------------------------------------------
   Onfinity brochures pages, both locales (brochures.php and in/brochures.php): the cards,
   the lead form as a white panel, the phone row. Loaded after va-2026.css (root) or
   in-2026.css (India); colours from the shared tokens. Built by tools/build_brochure_pages.py.
   ------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------- brochures page (18 Sep 2026)
   A card per brochure: its own cover (rendered from the PDF, the upper part), the tag line,
   a name, two sentences, the download button that opens the lead form, and the link to
   the page the brochure was written from. Three across; two on a tablet; one on a phone. */
.va-inBro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:4px}
@media(max-width:900px){.va-inBro{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.va-inBro{grid-template-columns:1fr}}
.va-inBroCard{background:var(--va-pg);border:1px solid var(--va-line);border-radius:8px;overflow:hidden;
              display:flex;flex-direction:column;min-width:0;box-shadow:0 10px 30px -22px rgba(11,61,79,.35)}
.va-inBroCover{display:block;position:relative;aspect-ratio:560/400;overflow:hidden;background:#0e1a21;
               border-bottom:1px solid var(--va-line)}
.va-inBroCover img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;
                   transition:transform .35s ease}
.va-inBroCard:hover .va-inBroCover img{transform:scale(1.025)}
.va-inBroCover:focus{outline:2px solid var(--va-amber);outline-offset:-2px}
.va-inBroBody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.va-inBroBody .va-inBroTag{font-size:9.5px;margin:0 0 2px}
.va-inBroBody h3{font-size:17px;font-weight:700;color:var(--va-ink);margin:0;letter-spacing:-.01em;line-height:1.3}
.va-inBroBody p{font-size:13.5px;color:var(--va-body);line-height:1.6;margin:0}
.va-inBroBody .va-inBroActs{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.va-inBroActs a{font-size:13px;font-weight:600;color:var(--va-blue)}
/* the download button is a <button>, so Bootstrap's button reset does not apply */
button.va-btnA{border:0;cursor:pointer;font-family:inherit;line-height:1.2;-webkit-appearance:none;appearance:none}
.va-btnA.va-inBroDl{padding:10px 14px;font-size:11.5px;margin:0}
@media(prefers-reduced-motion:reduce){.va-inBroCover img{transition:none}.va-inBroCard:hover .va-inBroCover img{transform:none}}

/* The brochure lead form on the 2026 page: a white panel instead of the old translucent
   dark overlay (custom.css #brochure-form), sized by its content so the reCAPTCHA and the
   button are never cut off, and the title in the brochure's own case. */
#brochure-form.va-inGate{background:rgba(10,20,28,.62)}
#brochure-form.va-inGate .modal-dialog{display:block;position:relative;height:auto;top:auto;bottom:auto;
                                       width:min(900px,94vw);margin:36px auto}
#brochure-form.va-inGate .modal-content{background:var(--va-pg);color:var(--va-ink);border-radius:8px;
                                        box-shadow:0 30px 80px rgba(0,0,0,.4);padding:6px 10px 10px}
#brochure-form.va-inGate .modal-header{color:var(--va-ink);border-bottom:1px solid var(--va-line);padding:18px 22px 14px}
#brochure-form.va-inGate .modal-title,#brochure-form.va-inGate h5#brochure-formLabel{font-size:19px;font-weight:700;letter-spacing:-.01em;text-transform:none!important;color:var(--va-ink)}
#brochure-form.va-inGate .modal-header h6{font-family:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;font-size:10.5px;
                                          letter-spacing:.16em;text-transform:uppercase;color:var(--va-blue);margin:8px 0 0}
#brochure-form.va-inGate .modal-header .close{color:var(--va-ink)!important;opacity:.7;font-size:26px}
#brochure-form.va-inGate .modal-body{color:var(--va-body);padding:18px 22px 10px}
#brochure-form.va-inGate .modal-body p{font-size:14px;line-height:1.55;margin-bottom:16px}
#brochure-form.va-inGate label.col-form-label{color:var(--va-wmut)}
#brochure-form.va-inGate .form-control{color:var(--va-ink);border:1px solid var(--va-line)!important;box-shadow:none;background-image:none}
#brochure-form.va-inGate .form-control:focus{border-color:var(--va-blue)!important}
#brochure-form.va-inGate span.countryflag{border-bottom:0;border:1px solid var(--va-line);border-right:0;border-radius:4px 0 0 4px}
#brochure-form.va-inGate form#brochure-form-id .interest-select{align-items:flex-start;gap:9px;padding-top:2px;margin-bottom:4px}
#brochure-form.va-inGate .interest-select input{margin:5px 0 0!important;flex:none}
#brochure-form.va-inGate .interest-select p{display:block;font-size:13px;margin:0;line-height:1.5}
#brochure-form.va-inGate .interest-select a{color:var(--va-blue)}
#brochure-form.va-inGate #errrr_submit{color:var(--va-wred);font-weight:600;min-height:0;margin:0 0 6px}
#brochure-form.va-inGate #brochure-form-submit,#brochure-form.va-inGate #brochure-form-open{background:var(--va-amber);color:#25313a;
    font-weight:700;letter-spacing:.045em;text-transform:uppercase;font-size:12.5px;padding:13px 22px;border-radius:3px;box-shadow:none;margin:6px 0 10px}
#brochure-form.va-inGate #brochure-form-submit:hover,#brochure-form.va-inGate #brochure-form-open:hover{background:#ffb838;color:#25313a}
#brochure-form.va-inGate #brochure-form-done p{font-size:15px;color:var(--va-ink)}
/* The phone row. custom.css builds it from absolute positions (the flag over the group, a
   transparent select over the flag, the code and the number floated by pixel offsets), which
   spilled past the panel here. In the gate it is one flex row: flag, code, number. The
   selectors carry form#brochure-form-id because the old rules do. */
#brochure-form.va-inGate form#brochure-form-id .form-group.label-floating{display:flex;align-items:stretch;position:relative;margin:0 0 7px}
#brochure-form.va-inGate form#brochure-form-id span.countryflag{position:static;width:48px;height:50px;flex:none;display:flex;align-items:center;
    justify-content:center;padding:0;margin:0;background:var(--va-pg);border:1px solid var(--va-line);border-right:0;border-radius:4px 0 0 4px;
    background-image:none;box-shadow:none;bottom:auto}
#brochure-form.va-inGate form#brochure-form-id span.countryflag img{width:22px;height:auto;display:block}
#brochure-form.va-inGate form#brochure-form-id span.countryflag:after{position:static;color:var(--va-wmut);margin-left:5px;font-size:12px}
#brochure-form.va-inGate form#brochure-form-id select#country_code{position:absolute;left:0;top:0;width:48px;height:50px;opacity:0;cursor:pointer;margin:0;padding:0;z-index:2}
#brochure-form.va-inGate form#brochure-form-id input#work_phone_code{position:static;width:64px;flex:none;margin:0;padding:0 6px!important;text-align:center;
    border-radius:0;height:50px;background:var(--va-sunk)!important;color:var(--va-ink);left:auto;top:auto}
#brochure-form.va-inGate form#brochure-form-id input#work_phone{position:static;flex:1 1 auto;width:auto;min-width:0;left:auto;margin:0;padding:0 12px!important;
    height:50px;border-radius:0 4px 4px 0;background-image:none}
#brochure-form.va-inGate .form-control-feedback,#brochure-form.va-inGate .material-input{display:none}
#brochure-form.va-inGate .modal-body{overflow-x:hidden}
@media(max-width:767px){
  #brochure-form.va-inGate .modal-dialog{width:auto;margin:12px}
  #brochure-form.va-inGate .modal-content{padding:0 0 6px}
  #brochure-form.va-inGate .modal-header{padding:16px 14px 12px}
  #brochure-form.va-inGate .modal-body,#brochure-form.va-inGate .modal-content .modal-body{padding:14px 14px 8px}
}

/* two cards across, for the short first group on the global page */
.va-inBro.va-inBro2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
@media(max-width:560px){.va-inBro.va-inBro2{grid-template-columns:1fr}}
.va-broRuns{margin-top:22px}