/*
 * vk-layout 09.11.2026 — Roman QA/QC: service pages fill the container.
 * Scope: Family Law service pages (.vl-ds-page--family-service) and the
 * Motorcycle Accidents hero. Presentation only: no text, link, form field or
 * metadata changes. Loaded after ds-pages.css / app.css (static file, no Vite).
 */

/* 1. Family Law is a service, not a blog article: no "On this page" index. */
.vl-ds-page--family-service .vl-editorial-index {
  display: none;
}

/* 2. Family chapters: one full-width heading, then its introduction.
      Keep text together so a neighbouring photo cannot stretch two grid rows. */
.vl-ds-page--family-service .vl-story {
  display: block;
}
.vl-ds-page--family-service .vl-story__lead,
.vl-ds-page--family-service .vl-story__copy {
  display: block;
  min-width: 0;
  max-width: none;
}
.vl-ds-page--family-service .vl-story__copy > .vl-h2 {
  margin: 0;
  max-width: none;
  text-wrap: pretty;
}
.vl-ds-page--family-service .vl-story__copy > .vl-story__intro {
  margin-top: 14px;
  max-width: none;
}
.vl-ds-page--family-service .vl-story__cards {
  margin-top: 24px;
}
/* A photo shares one row with the grouped heading and intro. The card row
   follows outside that lead row and still uses the full content width. */
.vl-ds-page--family-service .vl-story--media > .vl-story__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: 32px;
}
.vl-ds-page--family-service .vl-story__photo {
  margin: 0;
  max-width: none;
  min-width: 0;
}
.vl-ds-page--family-service .vl-story__photo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.vl-ds-page--family-service .testimonials--service.section {
  padding-block: 32px;
}

/* 3. Cards: equal height in a row; 3 (or 5+) cards sit in three columns,
      2 or 4 in two. Only a card that holds a table spans the row. */
.vl-ds-page--family-service .vl-story__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}
.vl-ds-page--family-service .vl-story__cards:has(> .vl-story__card:nth-child(3):last-child),
.vl-ds-page--family-service .vl-story__cards:has(> .vl-story__card:nth-child(5)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vl-ds-page--family-service .vl-story__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.vl-ds-page--family-service .vl-story__card--wide:not(:has(table)):not(:only-child) {
  grid-column: auto;
}
.vl-ds-page--family-service .vl-story__card:has(table),
.vl-ds-page--family-service .vl-story__card:only-child {
  grid-column: 1 / -1;
}

/* 4. Tables: full width of their column on desktop, readable words. */
.vl-ds-page--family-service .vl-prose table {
  display: table;
  width: 100%;
  table-layout: auto;
}
.vl-ds-page--family-service .vl-prose :is(th, td) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

@media (max-width: 1000px) {
  .vl-ds-page--family-service .vl-story--media > .vl-story__lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .vl-ds-page--family-service .vl-story__photo {
    max-width: 520px;
  }
  /* Tablet: two card columns, also beside a photo (beats ds-pages
     `.vl-ds .vl-story--media .vl-story__cards`, 0-3-0, which forces one). */
  .vl-ds.vl-ds-page--family-service .vl-story__cards,
  .vl-ds-page--family-service .vl-story__cards:has(> .vl-story__card:nth-child(3):last-child),
  .vl-ds-page--family-service .vl-story__cards:has(> .vl-story__card:nth-child(5)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: one column; a table scrolls inside itself, words are not split. */
@media (max-width: 760px) {
  .vl-ds.vl-ds-page--family-service .vl-story__cards,
  .vl-ds-page--family-service .vl-story__cards:has(> .vl-story__card:nth-child(3):last-child),
  .vl-ds-page--family-service .vl-story__cards:has(> .vl-story__card:nth-child(5)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .vl-ds-page--family-service .vl-story__card {
    height: auto;
  }
  .vl-ds-page--family-service .vl-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vl-ds-page--family-service .vl-prose :is(th, td) {
    min-inline-size: 11rem;
  }
}

/* 5. Toronto Motorcycle Accident Lawyers: the hero gets the page's own
      approved photo (/assets/pages/photo-4da36ffbb6f4366b.webp, already on
      this page with alt "Motorcycle Accident — Verkhovets Law"). Decorative
      repeat, so no new alt text. Scoped to the page that holds this photo. */
.design-page:has(img[src$="/photo-4da36ffbb6f4366b.webp"]) > .design-hero > .container {
  position: relative;
}
.design-page:has(img[src$="/photo-4da36ffbb6f4366b.webp"]) > .design-hero > .container::after {
  content: "";
  position: absolute;
  /* Height of the hero copy, width from the photo's own ratio. */
  inset-block: 0;
  right: 0;
  width: auto;
  max-width: 38%;
  aspect-ratio: 260 / 220;
  border-radius: 12px;
  background: url("/assets/pages/photo-4da36ffbb6f4366b.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255 255 255 / 0.14);
}
/* app.css makes .design-content full width at <=1439px: keep the designed
   58% copy column beside the photo down to 1200px. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .design-page:has(img[src$="/photo-4da36ffbb6f4366b.webp"]) > .design-hero .design-content {
    width: 58%;
  }
}
/* app.css makes the hero copy full width at <=1199px, so the photo leaves
   absolute positioning there and follows the copy instead of covering it. */
@media (max-width: 1199px) {
  .design-page:has(img[src$="/photo-4da36ffbb6f4366b.webp"]) > .design-hero > .container::after {
    position: static;
    display: block;
    width: min(100%, 420px);
    max-width: none;
    margin-top: 24px;
  }
}

/*
 * 6. Legacy service pages (site.content, page_type "injury": 22 local
 *    practice-area pages; class .content-block-page--service from
 *    site/content.blade.php). Text blocks already use the whole container;
 *    these rules remove the remaining empty columns. Blog, legal, team and
 *    other content pages do not get the class and are not affected.
 */
/* Intro of a two-column block: whole container, not 820px. */
.content-block-page--service .content-block-lead {
  width: auto;
}
/* "Have you been injured recently?" blocks: the first column holds only the
   firm's logo (no heading, list or table, at most two paragraphs), so it
   takes the logo's width and the text takes the rest of the container
   instead of a 50/50 split with an empty half. */
@media (min-width: 901px) {
  .content-block-page--service .content-block-columns:has(> .content-block-prose:first-child img):not(:has(> .content-block-prose:first-child > :is(h1, h2, h3, h4, h5, h6, ul, ol, table, blockquote, p:nth-of-type(3)))) {
    grid-template-columns: fit-content(200px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 40px);
  }
  .content-block-page--service .content-block-columns:has(> .content-block-prose:first-child img):not(:has(> .content-block-prose:first-child > :is(h1, h2, h3, h4, h5, h6, ul, ol, table, blockquote, p:nth-of-type(3)))) > .content-block-prose:first-child img {
    max-width: 200px;
  }
}
/* Images with a fixed inline width/height (1920x397 from the old CMS) keep
   their ratio once max-width scales them to the container. */
.content-block-page--service .content-block-prose img {
  height: auto !important;
}
/* Tables: full width of the column on desktop, scroll inside on phones. */
@media (min-width: 768px) {
  .content-block-page--service .content-block-prose table {
    display: table;
  }
}
.content-block-page--service .content-block-prose :is(th, td) {
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 767px) {
  .content-block-page--service .content-block-prose :is(th, td) {
    min-inline-size: 11rem;
  }
}