/*
  Template B ("modern" multi-section case studies) — used by the newer,
  design-agency-style PDFs (government/corporate/education accounts).
  All rules scoped under .vb-case--modern; only depends on tokens from base.css.
*/

.vb-case--modern .vb-case__sheet { padding-bottom: 40px; }

.vb-case--modern .vbm-banner {
    display: block;
    line-height: 0;
    position: relative;
    container-type: inline-size;
}
.vb-case--modern .vbm-banner img { width: 100%; height: auto; display: block; }

/*
  "CASE STUDY" is real text baked into the source PDF's blue banner
  stripe, not part of the shared banner image asset (which is blank),
  so it's rebuilt here as an overlay. Position/size come from the exact
  text bbox measured in a source PDF (as a fraction of the banner
  image's own placement rect) and font-size uses container query units
  (cqw) so it scales with the banner's own rendered width at any
  viewport, matching how position/size were derived — no separate
  mobile override needed.
*/
.vb-case--modern .vbm-banner__title {
    position: absolute;
    left: 35.7%;
    top: 21.08%;
    height: 21.76%;
    display: flex;
    align-items: center;
    font-size: 4.46cqw;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: #8cb3e3;
    line-height: 1;
    white-space: nowrap;
}

.vb-case--modern .vbm-hero { padding: 28px 50px 0; }
.vb-case--modern .vbm-title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--vbcs-navy);
    text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: 6px;
}
.vb-case--modern .vbm-tagline {
    font-style: italic;
    font-size: 16px;
    color: var(--vbcs-muted);
    margin-bottom: 28px;
}

.vb-case--modern .vbm-body { padding: 0 50px; display: flex; gap: 40px; align-items: flex-start; }
.vb-case--modern .vbm-col { flex: 1; min-width: 0; }
.vb-case--modern .vbm-col--right { border-left: 2px solid var(--vbcs-rule); padding-left: 40px; }

.vb-case--modern .vbm-block { margin-bottom: 20px; }
.vb-case--modern .vbm-label {
    font-size: 15px; font-weight: bold; color: var(--vbcs-ink); margin-bottom: 6px;
}
.vb-case--modern .vbm-text { font-size: 14.5px; color: var(--vbcs-text); line-height: 1.6; }
.vb-case--modern .vbm-text p { margin-bottom: 8px; }
.vb-case--modern .vbm-text p:last-child { margin-bottom: 0; }

.vb-case--modern .vbm-list {
    list-style: none; padding: 0; margin: 0; font-size: 14.5px; color: var(--vbcs-text); line-height: 1.6;
}
.vb-case--modern .vbm-list li {
    position: relative; padding-left: 18px; margin-bottom: 8px;
}
.vb-case--modern .vbm-list li:last-child { margin-bottom: 0; }
.vb-case--modern .vbm-list li::before {
    content: "•"; position: absolute; left: 0; color: var(--vbcs-accent); font-weight: bold;
}

/*
  Like the classic template, photos keep their true aspect ratio and are
  sized from their real placement in the source PDF (width emitted inline
  by the generator). No fixed heights, so no letterboxed gray bands and
  no cropping — and sizing is per-page, so pages can't affect each other.
*/
.vb-case--modern .vbm-photo {
    width: 100%; border-radius: 2px; margin-bottom: 20px; line-height: 0;
}
.vb-case--modern .vbm-photo img { display: block; width: 100%; height: auto; }

.vb-case--modern .vbm-overview-title {
    font-style: italic; font-weight: bold; font-size: 15px; color: var(--vbcs-ink); margin-bottom: 8px;
}

.vb-case--modern .vbm-quote {
    border-left: 3px solid var(--vbcs-accent);
    padding: 4px 0 4px 18px;
    font-style: italic;
    font-size: 15px;
    color: var(--vbcs-ink);
}
.vb-case--modern .vbm-quote cite {
    display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--vbcs-muted);
}

/* Companion photo tucked into the left text column below Features,
   matching how some source PDFs place a second page-1 photo. */
.vb-case--modern .vbm-companion-photo {
    margin-top: 8px; border-radius: 2px; line-height: 0;
}
.vb-case--modern .vbm-companion-photo img {
    display: block; width: 100%; height: auto;
}

/* A pull-quote paired with its own photo, mirroring the source PDF's
   two-up composition on the page it appears on. */
.vb-case--modern .vbm-quote-row {
    padding: 30px 50px 0;
    display: flex; gap: 40px; align-items: center;
}
.vb-case--modern .vbm-quote-row .vbm-photo { flex: 1; margin-bottom: 0; }
.vb-case--modern .vbm-quote-row .vbm-quote { flex: 1; }

.vb-case--modern .vbm-mission {
    padding: 30px 50px 0;
}
.vb-case--modern .vbm-mission-title {
    font-size: 22px; font-weight: 600; color: var(--vbcs-navy); margin-bottom: 10px;
}

/*
  Gallery is a vertical stack of ROWS (one per visual row in the source
  PDF). Each row carries its own left indent (margin-left, from that
  row's real PDF left_pct) so a staggered/zigzag layout — a photo
  starting flush-left, the next one indented to the right, as several
  source PDFs actually use — is reproduced instead of flattened to a
  uniform flush-left grid.
*/
.vb-case--modern .vbm-gallery { padding: 30px 50px 0; }
.vb-case--modern .vbm-gallery-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 18px;
    margin-top: 16px;
}
.vb-case--modern .vbm-gallery-row:first-child { margin-top: 0; }
.vb-case--modern .vbm-gallery__item {
    flex: 0 0 auto;          /* never grow: no stretched box to center inside */
    border-radius: 2px;
    line-height: 0;
}
.vb-case--modern .vbm-gallery__item img { display: block; width: 100%; height: auto; }

/*
  Section-label bands (OFFICES / RECEPTION / CONFERENCE / ...). In the
  source PDFs these are real text on a filled colored band, so they're
  rebuilt here as text with a background — not extracted as an image,
  which previously sliced the letters in half.
*/
.vb-case--modern .vbm-section-label {
    width: 100%;
    margin-top: 16px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.25;
    padding: 12px 18px;
}
.vb-case--modern .vbm-gallery > .vbm-section-label:first-child { margin-top: 0; }

.vb-case--modern .vbm-footer {
    padding: 30px 50px 0;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px; color: var(--vbcs-muted);
}
.vb-case--modern .vbm-footer__tag { font-weight: bold; letter-spacing: 0.3px; }

@media (max-width: 768px) {
    .vb-case--modern .vbm-hero { padding: 22px 20px 0; }
    .vb-case--modern .vbm-title { font-size: 22px; }
    .vb-case--modern .vbm-body { padding: 0 20px; flex-direction: column; gap: 20px; }
    .vb-case--modern .vbm-col--right { border-left: none; border-top: 2px solid var(--vbcs-rule); padding-left: 0; padding-top: 20px; }
    /* stack photos full-width on phones, overriding the PDF-derived
       inline width so they stay readable at narrow viewports */
    .vb-case--modern .vbm-gallery { flex-direction: column; }
    .vb-case--modern .vbm-gallery__item { width: 100% !important; }
    .vb-case--modern .vbm-quote-row { padding: 24px 20px 0; flex-direction: column; gap: 16px; align-items: stretch; }
    .vb-case--modern .vbm-mission { padding: 24px 20px 0; }
    .vb-case--modern .vbm-gallery { padding: 24px 20px 0; }
    .vb-case--modern .vbm-footer { padding: 24px 20px 0; }
}