/* Three-document hero, matching the criminal center's case reference. */
.page-index { --home-intro-background: #181114; }
.page-index .site-header, .page-index .mobile-nav { background: var(--home-intro-background); }
.page-index .site-header { border-bottom: 1px solid #ffffff1a; }
.document-gallery {
  padding: 164px 0;
  overflow: hidden;
  color: #fff;
  background-color: var(--home-intro-background);
  background-image: linear-gradient(90deg, #181114e8, #181114d9 55%, #181114d6), linear-gradient(0deg, #181114b8, transparent 60%), url('/assets/practice-hero/sexual-offenses.webp');
  background-size: cover;
  background-position: center;
}
.document-gallery > .container { display: grid; justify-items: center; max-width: 1458px; padding-inline: 36px; margin-inline: auto; }
.document-gallery > .container > :is(.gallery-heading, .decision-carousel) { width: 100%; }
.gallery-heading { margin-bottom: 104px; text-align: center; }
.gallery-heading h1 { margin: 0; color: #fff; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.3; font-weight: 500; letter-spacing: -.045em; }
.gallery-title-accent { color: #ef4444; font-weight: 600; }
.gallery-title-line { display: block; }
.gallery-title-mobile { display: none; }
.document-gallery .fan { --document-width: clamp(300px, 29.8vw, 420px); --gallery-offset: clamp(280px, 33.7vw, 475px); position: relative; display: block; width: 100%; height: calc(var(--document-width) * 1.414); padding: 0; margin: 0; overflow: visible; scroll-snap-type: none; }
.document-gallery .fan article { position: absolute; left: 50%; top: 0; width: var(--document-width); flex: none; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; box-shadow: none; transform-origin: center top; filter: brightness(.6); transition: transform .7s ease, opacity .6s ease, filter .6s ease; scroll-snap-align: none; }
.document-gallery .fan article.is-active { transform: translateX(-50%); opacity: 1; filter: brightness(1); z-index: 3; visibility: visible; }
.document-gallery .fan article.is-previous { transform: translateX(calc(-50% - var(--gallery-offset))) translateY(54px) scale(.82); opacity: 1; z-index: 1; visibility: visible; }
.document-gallery .fan article.is-next { transform: translateX(calc(-50% + var(--gallery-offset))) translateY(54px) scale(.82); opacity: 1; z-index: 1; visibility: visible; }
.document-gallery .fan article.is-away-left { transform: translateX(calc(-50% - var(--gallery-offset) * 1.8)) translateY(80px) scale(.7); opacity: 0; visibility: hidden; pointer-events: none; }
.document-gallery .fan article.is-away-right { transform: translateX(calc(-50% + var(--gallery-offset) * 1.8)) translateY(80px) scale(.7); opacity: 0; visibility: hidden; pointer-events: none; }
.decision-category { position: absolute; bottom: calc(100% + 14px); left: 50%; min-width: 124px; padding: 6px 17px; border: 1px solid #ffffff75; border-radius: 4px; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.2; white-space: nowrap; text-align: center; transform: translateX(-50%); }
.is-active .decision-category { border-color: #ef4444; box-shadow: inset 0 0 0 2px #0f0f0f; }
.gallery-document { display: block; position: relative; color: inherit; }
.document-gallery .decision-paper { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 720 / 1018; margin: 0; padding: 0; border: 0; border-radius: 2px; background: #fff; box-shadow: 0 22px 55px #0005; overflow: hidden; }
.is-active .gallery-document { box-shadow: 0 0 38px #ef444440; }
.document-gallery .decision-scan { display: block; width: 100%; height: 100%; object-fit: contain; }
.paper-result-seal { position: absolute; left: 50%; top: 50%; width: 73%; max-width: 82%; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; color: #fff; background: #c62828; font-weight: 800; line-height: 1.15; letter-spacing: -.035em; white-space: nowrap; transform: translate(-50%, -50%); text-align: center; isolation: isolate; }
.paper-result-seal::before { content: ''; position: absolute; inset: 5px; border: 3px solid #fff; border-radius: 5px; pointer-events: none; }
.paper-result-seal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url('/assets/stamp-grain.svg') repeat; background-size: 140px 70px; opacity: .5; pointer-events: none; }
.seal-case { font-size: clamp(17px, 1.85vw, 28px); font-weight: 800; line-height: 1.2; }
.seal-result { font-size: clamp(32px, 3.15vw, 46px); font-weight: 800; line-height: 1.15; }
.paper-result-seal.is-long .seal-result { font-size: clamp(25px, 2.7vw, 38px); }
.document-gallery .decision-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; padding: 0; margin: 0; }
.gallery-summary { display: flex; flex-direction: column; align-items: center; margin-top: 48px; text-align: center; }
.gallery-caption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #fff; font-size: 26px; line-height: 1.5; font-weight: 700; letter-spacing: -.03em; }
.gallery-caption strong { color: #ef4444; }
.gallery-detail { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid #d0d0d0; color: #fff; font-size: 15px; line-height: 1.3; }
.gallery-detail:hover { color: #ef4444; }
.gallery-controls { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 30px; min-height: 44px; }
.gallery-navigation { display: grid; grid-template-columns: 44px auto 44px; align-items: center; justify-items: center; column-gap: 24px; row-gap: 10px; }
.gallery-navigation .carousel-dots { grid-column: 2; grid-row: 1; }
.gallery-navigation [data-previous] { grid-column: 1; grid-row: 1; }
.gallery-navigation [data-next] { grid-column: 3; grid-row: 1; }
.gallery-arrow { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 34px; height: 44px; border: 0; border-radius: 0; background: transparent; color: #ffffffe0; font: inherit; cursor: pointer; transition: color .2s; }
.gallery-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.document-gallery .carousel-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.document-gallery .carousel-dots button { position: relative; width: 18px; height: 4px; min-width: 0; padding: 0; border: 0; border-radius: 20px; background: #ffffff40; cursor: pointer; transition: background .25s; }
.document-gallery .carousel-dots button::before { content: ''; position: absolute; inset: -18px 0; }
.document-gallery .carousel-dots button[aria-pressed=true] { background: #ef4444; }
.gallery-arrow:hover { color: #ef4444; }
.document-gallery a:focus-visible, .document-gallery button:focus-visible { outline: 2px solid #e5e5e5; outline-offset: 5px; }
@media (max-width: 767px) {
  .document-gallery { padding: 96px 0; }
  .document-gallery > .container { padding-inline: 20px; }
  .gallery-heading { margin-bottom: 88px; }
  .gallery-heading h1 { max-width: 350px; margin: auto; font-size: clamp(20px, 6vw, 26px); line-height: 1.4; }
  .gallery-title-desktop { display: none; }
  .gallery-title-mobile { display: block; }
  .gallery-title-mobile .gallery-title-line { white-space: nowrap; }
  .document-gallery .fan { --document-width: min(72vw, 310px); --gallery-offset: 75vw; }
  .document-gallery .fan article.is-previous, .document-gallery .fan article.is-next { filter: brightness(.5); }
  .decision-category { min-width: 110px; font-size: 13px; padding: 6px 12px; }
  .paper-result-seal { padding: 12px 8px; gap: 4px; border-radius: 6px; }
  .paper-result-seal::before { inset: 4px; border-width: 2px; border-radius: 4px; }
  .seal-case { font-size: 17px; }
  .seal-result { font-size: 32px; }
  .paper-result-seal.is-long .seal-result { font-size: 25px; }
  .gallery-summary { margin-top: 28px; }
  .gallery-caption { font-size: 20px; gap: 6px; }
  .gallery-detail { font-size: 14px; }
  .gallery-controls { flex-direction: column; gap: 22px; margin-top: 22px; }
  .gallery-navigation { column-gap: 16px; row-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .document-gallery .fan article, .document-gallery .carousel-dots button { transition: none; }
}