/*
  Template A ("classic" one-pager) — used by the 2018-2019 era case studies.
  All rules scoped under .vb-case--classic; only depends on tokens from base.css.
*/

.vb-case--classic .vb-case__sheet { padding: 40px 50px; }

.vb-case--classic .vbc-header { text-align: center; margin-bottom: 30px; }
.vb-case--classic .vbc-header__logo { display: inline-block; margin-bottom: 25px; }
.vb-case--classic .vbc-header__logo img {
    max-width: 220px; max-height: 90px; width: auto; height: auto;
    display: block; margin: 0 auto;
}

.vb-case--classic .vbc-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--vbcs-ink);
    border-bottom: 2px solid var(--vbcs-rule);
    padding-bottom: 8px;
    margin-bottom: 30px;
}
.vb-case--classic .vbc-title span { font-weight: normal; color: var(--vbcs-muted); }

.vb-case--classic .vbc-row { display: flex; gap: 35px; align-items: flex-start; margin-bottom: 14px; }
.vb-case--classic .vbc-col { flex: 1; min-width: 0; }

/*
  Client + Scope of Services + client logo are ONE row: in the source
  PDF the logo sits in the right column spanning roughly the same
  vertical range as the Client AND Scope text combined (an independent
  column flow), not just next to "Client" alone. Nesting Scope inside
  this same row lets the left column keep flowing at its own natural
  height — the logo can be taller than "Client" alone without pushing
  "Scope of Services" down (that bug produced a large empty gap).
*/
.vb-case--classic .vbc-row--client { align-items: flex-start; }
.vb-case--classic .vbc-label--scope { margin-top: 14px; }
.vb-case--classic .vbc-row--client .vbc-col--logo {
    display: block;
}
.vb-case--classic .vbc-client-logo { line-height: 0; }
.vb-case--classic .vbc-client-logo img {
    display: block; width: 100%; height: auto;
}

.vb-case--classic .vbc-label { font-size: 14.5px; font-weight: bold; color: var(--vbcs-ink); margin-bottom: 4px; }
.vb-case--classic .vbc-text { font-size: 14px; color: var(--vbcs-text); line-height: 1.6; }
.vb-case--classic .vbc-text p { margin-bottom: 6px; }
.vb-case--classic .vbc-text p:last-child { margin-bottom: 0; }

.vb-case--classic .vbc-list { list-style: disc; padding-left: 18px; font-size: 14px; color: var(--vbcs-text); line-height: 1.6; margin: 0; }
.vb-case--classic .vbc-list li { margin-bottom: 8px; }
.vb-case--classic .vbc-list li:last-child { margin-bottom: 0; }

.vb-case--classic .vbc-row--main { align-items: stretch; }
.vb-case--classic .vbc-row--main .vbc-col--right {
    border-left: 2px solid var(--vbcs-rule); padding-left: 35px;
}

.vb-case--classic .vbc-overview-title { font-size: 14.5px; font-weight: bold; color: var(--vbcs-ink); margin-bottom: 10px; }
.vb-case--classic .vbc-overview-text { font-size: 14px; color: var(--vbcs-text); line-height: 1.7; text-align: justify; }

/*
  Gallery images reproduce their real placement from the source PDF:
  the generator emits each item's width as the same percentage of the
  sheet that the image occupies of the PDF page, and images keep their
  natural aspect ratio (height: auto). No fixed heights, no cropping,
  no letterboxing, and never centered — photos stay left-aligned like
  the source documents. This means one page's image sizing can't affect
  another's, because the size comes from that page's own PDF geometry.
*/
.vb-case--classic .vbc-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px 18px;
    margin-bottom: 0;
}
.vb-case--classic .vbc-gallery__item {
    flex: 0 0 auto;          /* never grow: no stretched box to center inside */
    border-radius: 2px;
    line-height: 0;
}
.vb-case--classic .vbc-gallery__item img {
    display: block;
    width: 100%;
    height: auto;            /* preserve the photo's true aspect ratio */
}

@media (max-width: 1024px) and (min-width: 769px) {
    .vb-case--classic .vbc-header { }
    .vb-case--classic .vb-case__sheet { padding: 30px 35px; }
    .vb-case--classic .vbc-row { gap: 25px; }
    .vb-case--classic .vbc-row--main .vbc-col--right { padding-left: 25px; }
}

@media (max-width: 768px) {
    .vb-case--classic .vb-case__sheet { padding: 25px 20px; }
    .vb-case--classic .vbc-header__logo img { max-width: 180px; max-height: 75px; }
    .vb-case--classic .vbc-title { font-size: 15px; }
    .vb-case--classic .vbc-row { flex-direction: column; gap: 12px; align-items: stretch; }
    .vb-case--classic .vbc-row--client { align-items: stretch; }
    .vb-case--classic .vbc-client-logo { width: 100% !important; max-width: 300px; }
    .vb-case--classic .vbc-row--main { align-items: stretch; }
    .vb-case--classic .vbc-row--main .vbc-col--right {
        border-left: none; border-top: 2px solid var(--vbcs-rule);
        padding-left: 0; padding-top: 20px; margin-top: 5px;
    }
    .vb-case--classic .vbc-row { margin-bottom: 12px; }
    .vb-case--classic .vbc-label { font-size: 13px; }
    .vb-case--classic .vbc-text, .vb-case--classic .vbc-list, .vb-case--classic .vbc-overview-text { font-size: 13px; }
    /* stack photos full-width on phones, overriding the PDF-derived
       inline width so they stay readable at narrow viewports */
    .vb-case--classic .vbc-gallery { flex-direction: column; }
    .vb-case--classic .vbc-gallery__item { width: 100% !important; }
}

@media (max-width: 480px) {
    .vb-case--classic .vb-case__sheet { padding: 20px 15px; }
    .vb-case--classic .vbc-header__logo img { max-width: 150px; max-height: 65px; }
    .vb-case--classic .vbc-title { font-size: 14px; }
}