/* Detail-grid layout, reveal and expansion contract */

@layer application {
.detail-grid-deck {
  --detail-grid-deck-inline-padding: var(--site-content-inline-padding);

  position: relative;
  display: block;
  inline-size: calc(100% + (2 * var(--detail-grid-deck-inline-padding)));
  block-size: 100%;
  min-block-size: 0;
  margin-inline: calc(-1 * var(--detail-grid-deck-inline-padding));
  padding:
    var(--detail-grid-block-start)
    var(--detail-grid-deck-inline-padding)
    var(--detail-grid-block-end);
}

.detail-grid-section {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  inline-size: 100%;
  max-inline-size: var(--site-composition-max-inline-size);
  block-size: 100%;
  min-block-size: 100%;
  margin-inline: auto;
}

.detail-grid-section + .detail-grid-section {
  margin-block-start: var(--detail-grid-gap);
}

.detail-grid-section > .detail-grid {
  inline-size: 100%;
  block-size: 100%;
}

.detail-grid-deck > .detail-grid-alignment-spacer {
  display: block;
  inline-size: 100%;
  block-size: 0;
  flex: none;
  pointer-events: none;
  transition: block-size var(--detail-grid-expansion-duration) var(--site-ease-out);
}

.detail-grid {
  --detail-grid-tablet-raster-enabled: 0;
  --detail-grid-smartphone-raster-enabled: 0;
  --detail-grid-expanded-viewport-fit: 1;
  --detail-divider-color: rgb(17 17 17 / 0.76);
  --detail-divider-size: 2px;
  --detail-content-tile-padding: clamp(0.65rem, calc(1.08 * var(--site-scale-unit)), 1.05rem);
  --detail-light-tile-background: #eeeeee;
  --detail-profile-icon-size: clamp(1.25rem, calc(1.7 * var(--site-scale-unit)), 1.7rem);
  position: relative;
  display: grid;
  min-block-size: 0;
  block-size: 100%;
  gap: var(--detail-grid-gap);
}

.detail-grid--8x5 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.detail-grid--8x2 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.detail-grid--8x3 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.detail-grid--8x6 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.detail-grid--8x7 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.detail-grid--5x4 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.detail-grid__tile.detail-grid__tile--grid {
  align-content: stretch;
  padding: 0;
}

.detail-grid--rows-intro-heavy {
  grid-template-rows:
    minmax(0, 1.08fr)
    minmax(0, 1.08fr)
    minmax(0, 0.76fr)
    repeat(2, minmax(0, 1.04fr));
}

.detail-grid--rows-intro-compact {
  grid-template-rows:
    repeat(2, minmax(0, 0.82fr))
    minmax(0, 1fr)
    repeat(2, minmax(0, 1.18fr));
}

.detail-grid__tile {
  --detail-tile-border-radius: 0.75rem;
  --detail-tile-border-color: rgb(232 232 232 / 0.96);
  --detail-tile-background: var(--detail-light-tile-background);
  --detail-tile-column: auto;
  --detail-tile-columns: 1;
  --detail-tile-row: auto;
  --detail-tile-rows: 1;
  --detail-tile-tablet-columns: 2;
  --detail-tile-tablet-reference-rows: 1;
  --detail-tile-shift-x: 0px;
  --detail-tile-shift-y: 0px;
  --detail-tile-padding: clamp(0.95rem, calc(1.55 * var(--site-scale-unit)), 1.55rem);
  --detail-tile-label-height: clamp(0.78rem, var(--site-scale-unit), 1.02rem);
  --detail-tile-shadow-rest:
    6px 6px 12px rgb(179 184 190 / 0.92),
    -6px -6px 12px rgb(225 230 235 / 0.98);
  --detail-tile-shadow-active:
    8px 8px 18px rgb(168 174 181 / 0.82),
    -8px -8px 18px rgb(229 234 239 / 0.96);
  --detail-tile-shadow-hover:
    10px 10px 22px rgb(160 167 174 / 0.86),
    -10px -10px 22px rgb(233 238 243 / 0.98);
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(0.34rem, calc(0.65 * var(--site-scale-unit)), 0.58rem);
  grid-column: var(--detail-tile-column) / span var(--detail-tile-columns);
  grid-row: var(--detail-tile-row) / span var(--detail-tile-rows);
  min-block-size: 0;
  padding: var(--detail-tile-padding);
  overflow: hidden;
  border: 1px solid var(--detail-tile-border-color);
  border-radius: var(--detail-tile-border-radius);
  background: var(--detail-tile-background);
  box-shadow: var(--detail-tile-shadow-rest);
  transform: translate(
    var(--detail-tile-shift-x),
    var(--detail-tile-shift-y)
  );
  font-family: var(--type-family-text);
  transition:
    box-shadow var(--detail-grid-expansion-duration) var(--site-ease-out),
    filter 320ms var(--site-ease-out),
    opacity var(--detail-grid-expansion-duration) var(--site-ease-out),
    transform var(--detail-grid-expansion-duration) var(--site-ease-out);
}

/* A grid item may retain grid/reveal semantics without rendering a tile surface. */
.detail-grid__tile--transparent {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.has-js :is(.route-document--detail, .route-document--home)
  .detail-grid-deck.is-detail-scroll-reveal-ready
  .detail-grid__tile.is-detail-reveal-pending {
  opacity: 0;
  visibility: hidden;
  filter: blur(7px) saturate(0.9);
  translate: 0 clamp(1rem, calc(2 * var(--site-block-unit)), 1.45rem);
  scale: 0.985;
  transition: none;
}

.has-js :is(.route-document--detail, .route-document--home)
  .detail-grid-deck.is-detail-scroll-reveal-ready
  .detail-grid__tile.is-detail-reveal-active {
  will-change: opacity, filter, translate, scale;
}

.has-js :is(.route-document--detail, .route-document--home)
  .detail-grid-deck.is-detail-scroll-reveal-ready
  .detail-grid__tile.is-detail-reveal-pending:not(.is-detail-reveal-visible) {
  pointer-events: none;
}

.has-js :is(.route-document--detail, .route-document--home)
  .detail-grid-deck.is-detail-scroll-reveal-ready
  .detail-grid__tile.is-detail-reveal-visible {
  visibility: visible;
  animation:
    detail-grid-tile-reveal
    960ms
    var(--site-ease-out)
    var(--detail-reveal-delay, 0ms)
    both;
}

/*
  A deferred grid stays visually closed until its owning scene has settled.
  This guard also prevents a pre-contact flash when reduced motion disables
  the reveal animation itself.
*/
.has-js
  .route-document--home:not(.is-title-profile-reveal-complete)
  [data-detail-reveal-start="contact-ready"]
  .detail-grid__tile:not([data-detail-reveal="off"]) {
  opacity: 0;
  visibility: hidden;
}

@keyframes detail-grid-tile-reveal {
  from {
    opacity: 0;
    filter: blur(7px) saturate(0.9);
    translate: 0 clamp(1rem, calc(2 * var(--site-block-unit)), 1.45rem);
    scale: 0.985;
  }

  to {
    opacity: 1;
    filter: none;
    translate: 0 0;
    scale: 1;
  }
}

.detail-grid__tile--with-image:not([data-tile-expand="off"]) {
  cursor: pointer;
}

.detail-grid__tile--with-image:not([data-tile-expand="off"]):focus-visible {
  outline: 2px solid rgb(17 17 17 / 0.32);
  outline-offset: 0.22rem;
}

.detail-grid-deck.is-tile-extended .detail-grid-section {
  z-index: 1;
}

.detail-grid-deck.is-tile-extended .detail-grid-section.is-tile-extended-section {
  z-index: 3;
}

.detail-grid-deck.is-tile-extended .detail-grid__tile {
  z-index: 1;
  will-change: transform, filter, opacity;
}

/* The shared deck owns focus: every passive tile in every section fades. */
.detail-grid-deck.is-tile-extended .detail-grid__tile:not(.is-extended) {
  filter:
    blur(1px)
    saturate(0.52)
    brightness(0.92);
  opacity: 0.3;
  pointer-events: none;
}

.detail-grid__tile.is-extended {
  z-index: 4;
  filter: none;
  opacity: 1;
  box-shadow:
    0 0 0 1px rgb(229 234 239 / 0.78),
    0 22px 48px rgb(24 29 35 / 0.22),
    var(--detail-tile-shadow-active);
}

.detail-grid__tile.is-extended:hover {
  box-shadow:
    0 0 0 1px rgb(233 238 243 / 0.86),
    0 26px 56px rgb(20 25 31 / 0.25),
    var(--detail-tile-shadow-hover);
}

.detail-grid__tile:not(:has(.detail-grid__tile-label)) {
  align-content: center;
  justify-items: start;
}

.detail-grid__tile-image {
  display: none;
}

.detail-grid__tile--with-image {
  --detail-image-scale: 1.025;
  --detail-image-hover-scale: 1.075;
  --detail-tile-background: #fff;

  align-content: end;
  color: #fff;
}

.detail-grid__tile--with-image::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: url("../images/shared/backgrounds/studio.webp") center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.detail-grid__tile--phase-image {
  align-content: end;
  grid-template-rows: minmax(0, 1fr) auto auto;
  padding-block-end: clamp(0.75rem, calc(1.15 * var(--site-scale-unit)), 1.15rem);
}

.detail-grid__tile--phase-image .detail-grid__tile-title {
  align-self: end;
  margin-block-start: auto;
}

.detail-grid__tile--phase-image .detail-grid__tile-facts {
  align-self: end;
  gap: clamp(0.42rem, calc(0.62 * var(--site-scale-unit)), 0.62rem) clamp(0.5rem, calc(0.75 * var(--site-scale-unit)), 0.75rem);
}

.detail-grid__tile--phase-image .detail-grid__tile-facts--stacked div {
  grid-template-columns: clamp(3.7rem, calc(4.6 * var(--site-scale-unit)), 4.65rem) minmax(0, 1fr);
  column-gap: clamp(0.42rem, calc(0.62 * var(--site-scale-unit)), 0.62rem);
  row-gap: 0;
}

.detail-grid__tile--phase-image .detail-grid__tile-facts dt,
.detail-grid__tile--phase-image .detail-grid__tile-facts dd {
  line-height: 1.12;
}

.detail-grid__tile--with-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  block-size: clamp(10.5rem, 50%, 18rem);
  border-radius: 0 0 var(--detail-tile-border-radius) var(--detail-tile-border-radius);
  background:
    linear-gradient(
      180deg,
      rgb(17 17 17 / 0) 0%,
      rgb(17 17 17 / 0.12) 20%,
      rgb(17 17 17 / 0.38) 48%,
      rgb(17 17 17 / 0.74) 100%
    );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.32) 20%, #000 48%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.32) 20%, #000 48%, #000 100%);
  pointer-events: none;
}

.detail-grid__tile--with-image .detail-grid__tile-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.94);
  transform:
    translateY(var(--detail-image-translate-y, 0))
    rotate(var(--detail-image-rotation, 0deg))
    scale(var(--detail-image-scale));
  transform-origin: top center;
  transition: transform 520ms var(--site-ease-out);
}

.detail-grid__tile--with-image:is(:hover, :focus-visible, .is-extended)
  .detail-grid__tile-image {
  will-change: transform;
}

.detail-grid__tile--with-image .detail-grid__tile-image--center {
  object-position: center center;
}

.detail-grid__tile--with-image .detail-grid__tile-image--raised {
  object-position: center 42%;
}

.detail-grid__tile--image-rotate-180 {
  --detail-image-rotation: 180deg;
}

.detail-grid__tile--image-rotate-180 .detail-grid__tile-image {
  transform-origin: center;
}

.detail-grid__tile--with-image:hover .detail-grid__tile-image,
.detail-grid__tile--with-image:focus-visible .detail-grid__tile-image {
  transform:
    translateY(var(--detail-image-translate-y, 0))
    rotate(var(--detail-image-rotation, 0deg))
    scale(var(--detail-image-hover-scale));
}

@keyframes detail-expanded-carousel-slide-enter {
  from {
    opacity: 0;
    transform: translateX(0.7rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.detail-grid__expanded-carousel {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: none;
  overflow: hidden;
  border-radius: inherit;
}

.detail-grid__tile.is-extended[data-tile-expand-mode="carousel"]
  .detail-grid__expanded-carousel {
  display: grid;
}

.detail-grid__tile.is-extended[data-tile-expand-mode="carousel"]
  [data-expanded-carousel-resting-content] {
  display: none;
}

.detail-grid__tile > .detail-grid__expanded-carousel-backdrop {
  display: none;
}

.detail-grid__tile.is-extended[data-tile-expand-mode="carousel"]
  > .detail-grid__expanded-carousel-backdrop.is-active:not([hidden]) {
  display: block;
}

.detail-grid__expanded-carousel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.detail-grid__expanded-carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  padding:
    clamp(0.8rem, calc(1.4 * var(--site-scale-unit)), 1.4rem)
    clamp(3rem, calc(5 * var(--site-scale-unit)), 4.4rem)
    clamp(2.4rem, calc(3.6 * var(--site-scale-unit)), 3.4rem);
  place-items: center;
  animation: detail-expanded-carousel-slide-enter 280ms var(--site-ease-out);
}

.detail-grid__expanded-carousel-slide[hidden] {
  display: none;
}

.detail-grid__expanded-carousel-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  object-position: center;
  filter: saturate(0.96);
}

.detail-grid__expanded-carousel-arrow {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  display: grid;
  inline-size: clamp(2.35rem, calc(3.2 * var(--site-scale-unit)), 3rem);
  block-size: clamp(2.35rem, calc(3.2 * var(--site-scale-unit)), 3rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(17 17 17 / 0.76);
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
  transition:
    color 180ms ease,
    transform 180ms var(--site-ease-out);
}

.detail-grid__expanded-carousel-arrow::before {
  inline-size: clamp(1.25rem, calc(1.75 * var(--site-scale-unit)), 1.65rem);
  block-size: clamp(1.25rem, calc(1.75 * var(--site-scale-unit)), 1.65rem);
  border-inline-end: clamp(0.2rem, calc(0.28 * var(--site-scale-unit)), 0.26rem) solid currentColor;
  border-block-end: clamp(0.2rem, calc(0.28 * var(--site-scale-unit)), 0.26rem) solid currentColor;
  content: "";
  filter:
    drop-shadow(0 0 0.12rem rgb(255 255 255 / 0.92))
    drop-shadow(0 0.16rem 0.24rem rgb(0 0 0 / 0.38));
}

.detail-grid__expanded-carousel-arrow--previous {
  inset-inline-start: clamp(0.65rem, calc(1.15 * var(--site-scale-unit)), 1.15rem);
}

.detail-grid__expanded-carousel-arrow--previous::before {
  transform: rotate(135deg);
}

.detail-grid__expanded-carousel-arrow--next {
  inset-inline-end: clamp(0.65rem, calc(1.15 * var(--site-scale-unit)), 1.15rem);
}

.detail-grid__expanded-carousel-arrow--next::before {
  transform: rotate(-45deg);
}

.detail-grid__expanded-carousel-arrow:hover {
  color: var(--site-ink);
  transform: translateY(-50%) scale(1.1);
}

.detail-grid__expanded-carousel-arrow:focus-visible {
  border-radius: 0.35rem;
  outline: 2px solid rgb(17 17 17 / 0.38);
  outline-offset: 0.12rem;
  transform: translateY(-50%) scale(1.06);
}

.detail-grid__expanded-carousel-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.detail-grid__expanded-carousel-pagination {
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(0.75rem, calc(1.2 * var(--site-scale-unit)), 1.15rem);
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.42rem, calc(0.7 * var(--site-scale-unit)), 0.68rem);
  transform: translateX(-50%);
}

.detail-grid__expanded-carousel-dot {
  display: block;
  inline-size: clamp(0.55rem, calc(0.72 * var(--site-scale-unit)), 0.7rem);
  block-size: clamp(0.55rem, calc(0.72 * var(--site-scale-unit)), 0.7rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(17 17 17 / 0.24);
  box-shadow: inset 1px 1px 2px rgb(17 17 17 / 0.18);
  cursor: pointer;
  transition:
    background 180ms ease,
    scale 220ms var(--site-ease-out);
}

.detail-grid__expanded-carousel-dot:is(:hover, :focus-visible) {
  background: rgb(17 17 17 / 0.52);
  outline: 2px solid rgb(17 17 17 / 0.18);
  outline-offset: 3px;
}

.detail-grid__expanded-carousel-dot.is-active {
  background: rgb(17 17 17 / 0.78);
  scale: 1.28;
}

.detail-grid__tile--protected-image:has(.card-protected-preview:not([hidden])) {
  background:
    linear-gradient(145deg, rgb(202 202 202 / 0.96), rgb(232 232 232 / 0.98));
}

.detail-grid__tile--protected-image:has(.card-protected-preview:not([hidden]))::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: url("../images/shared/backgrounds/studio.webp") center / cover no-repeat;
  pointer-events: none;
}

.detail-grid__tile--protected-image:has(.card-protected-preview:not([hidden]))::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  block-size: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgb(17 17 17 / 0.12) 0%,
      rgb(17 17 17 / 0.4) 100%
    );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: none;
  -webkit-mask-image: none;
  pointer-events: none;
}

.detail-grid__tile--protected-image:has(.card-protected-preview:not([hidden]))
  > :is(
    .detail-grid__tile-label,
    .detail-grid__tile-title,
    .detail-grid__tile-copy
  ) {
  opacity: 0;
}

.detail-grid__tile--protected-image > .card-protected-preview {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  align-content: center;
  padding-inline: clamp(1.25rem, calc(3 * var(--site-scale-unit)), 3rem);
  color: #fff;
  transform: none;
}

.detail-grid__tile--protected-image
  > .card-protected-preview:focus-visible {
  border-radius: inherit;
  outline-offset: -0.5rem;
}

/*
  Detail-grid placement utilities:
  Combine one start position with one size class.
  Example: detail-grid__tile--at-3 detail-grid__tile--size-4x1
  Positions are counted row by row in the active grid variant.
*/
.detail-grid__tile--size-3x1 { --detail-tile-columns: 3; --detail-tile-rows: 1; }
.detail-grid__tile--size-4x1 { --detail-tile-columns: 4; --detail-tile-rows: 1; }
.detail-grid__tile--size-5x1 { --detail-tile-columns: 5; --detail-tile-rows: 1; --detail-tile-tablet-columns: 4; }
.detail-grid__tile--size-8x1 { --detail-tile-columns: 8; --detail-tile-rows: 1; --detail-tile-tablet-columns: 4; }
.detail-grid__tile--size-1x2 { --detail-tile-columns: 1; --detail-tile-rows: 2; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-2x2 { --detail-tile-columns: 2; --detail-tile-rows: 2; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-3x2 { --detail-tile-columns: 3; --detail-tile-rows: 2; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-4x2 { --detail-tile-columns: 4; --detail-tile-rows: 2; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-5x2 { --detail-tile-columns: 5; --detail-tile-rows: 2; --detail-tile-tablet-columns: 4; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-8x2 { --detail-tile-columns: 8; --detail-tile-rows: 2; --detail-tile-tablet-columns: 4; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-1x3 { --detail-tile-columns: 1; --detail-tile-rows: 3; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-2x3 { --detail-tile-columns: 2; --detail-tile-rows: 3; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-3x3 { --detail-tile-columns: 3; --detail-tile-rows: 3; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-4x3 { --detail-tile-columns: 4; --detail-tile-rows: 3; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-5x3 { --detail-tile-columns: 5; --detail-tile-rows: 3; --detail-tile-tablet-columns: 4; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-8x3 { --detail-tile-columns: 8; --detail-tile-rows: 3; --detail-tile-tablet-columns: 4; --detail-tile-tablet-reference-rows: 2; }
.detail-grid__tile--size-2x4 { --detail-tile-columns: 2; --detail-tile-rows: 4; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-3x4 { --detail-tile-columns: 3; --detail-tile-rows: 4; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-4x4 { --detail-tile-columns: 4; --detail-tile-rows: 4; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-5x4 { --detail-tile-columns: 5; --detail-tile-rows: 4; --detail-tile-tablet-columns: 4; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-1x5 { --detail-tile-columns: 1; --detail-tile-rows: 5; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-2x5 { --detail-tile-columns: 2; --detail-tile-rows: 5; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-3x5 { --detail-tile-columns: 3; --detail-tile-rows: 5; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-4x5 { --detail-tile-columns: 4; --detail-tile-rows: 5; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--size-8x5 { --detail-tile-columns: 8; --detail-tile-rows: 5; --detail-tile-tablet-columns: 4; --detail-tile-tablet-reference-rows: 3; }
.detail-grid__tile--tablet-at-3-2 { --detail-tile-tablet-column: 3; --detail-tile-tablet-row: 2; }
.detail-grid__tile--tablet-row-4 { --detail-tile-tablet-row: 4; }
.detail-grid__tile--tablet-row-6 { --detail-tile-tablet-row: 6; }
.detail-grid__tile--tablet-rows-2 { --detail-tile-tablet-row-span: 2; }
.detail-grid__tile--tablet-rows-3 { --detail-tile-tablet-row-span: 3; }
.detail-grid__tile--at-1 { --detail-tile-column: 1; --detail-tile-row: 1; }
.detail-grid__tile--at-3 { --detail-tile-column: 3; --detail-tile-row: 1; }
.detail-grid__tile--at-4 { --detail-tile-column: 4; --detail-tile-row: 1; }
.detail-grid__tile--at-5 { --detail-tile-column: 5; --detail-tile-row: 1; }
.detail-grid__tile--at-6 { --detail-tile-column: 6; --detail-tile-row: 1; }
.detail-grid__tile--at-7 { --detail-tile-column: 7; --detail-tile-row: 1; }
.detail-grid__tile--at-8 { --detail-tile-column: 8; --detail-tile-row: 1; }
.detail-grid__tile--at-17 { --detail-tile-column: 1; --detail-tile-row: 3; }
.detail-grid__tile--at-19 { --detail-tile-column: 3; --detail-tile-row: 3; }
.detail-grid__tile--at-20 { --detail-tile-column: 4; --detail-tile-row: 3; }
.detail-grid__tile--at-21 { --detail-tile-column: 5; --detail-tile-row: 3; }
.detail-grid__tile--at-22 { --detail-tile-column: 6; --detail-tile-row: 3; }
.detail-grid__tile--at-23 { --detail-tile-column: 7; --detail-tile-row: 3; }
.detail-grid__tile--at-25 { --detail-tile-column: 1; --detail-tile-row: 4; }
.detail-grid__tile--at-27 { --detail-tile-column: 3; --detail-tile-row: 4; }
.detail-grid__tile--at-28 { --detail-tile-column: 4; --detail-tile-row: 4; }
.detail-grid__tile--at-29 { --detail-tile-column: 5; --detail-tile-row: 4; }
.detail-grid__tile--at-30 { --detail-tile-column: 6; --detail-tile-row: 4; }
.detail-grid__tile--at-31 { --detail-tile-column: 7; --detail-tile-row: 4; }
.detail-grid__tile--at-32 { --detail-tile-column: 8; --detail-tile-row: 4; }
.detail-grid__tile--at-33 { --detail-tile-column: 1; --detail-tile-row: 5; }
.detail-grid__tile--at-37 { --detail-tile-column: 5; --detail-tile-row: 5; }
.detail-grid__tile--at-38 { --detail-tile-column: 6; --detail-tile-row: 5; }
.detail-grid__tile--at-41 { --detail-tile-column: 1; --detail-tile-row: 6; }
.detail-grid__tile--at-45 { --detail-tile-column: 5; --detail-tile-row: 6; }

/*
 * Compact detail layouts preserve the semantic DOM order. Explicit order
 * tokens are reserved for the few editorial exceptions that genuinely need
 * a different sequence at a narrower width.
 */
@media (max-width: 75rem) {
  .route-document--detail .detail-grid {
    --detail-grid-tablet-raster-enabled: 1;
    --detail-grid-tablet-reference-row-size: 9rem;

    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-rows: minmax(
      var(--detail-grid-tablet-reference-row-size),
      auto
    );
  }

  .route-document--detail .detail-grid__tile {
    --detail-tile-column: auto;
    --detail-tile-columns: var(--detail-tile-tablet-columns);
    --detail-tile-row: auto;
    --detail-tile-rows: var(--detail-tile-tablet-reference-rows);
  }

  .route-document--detail .detail-grid.is-detail-tablet-grid-quantized {
    grid-auto-rows: var(--detail-grid-tablet-row-size);
  }

  .route-document--detail
    .detail-grid.is-detail-tablet-grid-quantized
    > .detail-grid__tile {
    --detail-tile-column: var(--detail-tile-tablet-measured-column);
    --detail-tile-row: var(--detail-tile-tablet-measured-row);
    --detail-tile-rows: var(--detail-tile-tablet-measured-row-span);
  }

  /*
   * Resolve one conservative raster at the narrow edge of the tablet mode.
   * The probe never participates in paint or document flow; it only gives the
   * controller a stable geometry contract for the complete tablet corridor.
   */
  .route-document--detail
    .detail-grid.detail-grid--tablet-measurement {
    position: fixed;
    z-index: -1;
    inset: 0 auto auto 0;
    inline-size: calc(
      46rem
      - 4rem
      - 2 * var(--site-navigation-inline-overhang)
      + 1px
    );
    max-inline-size: none;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 46rem) {
  .route-document--detail .detail-grid {
    --detail-grid-tablet-raster-enabled: 0;
    --detail-grid-smartphone-raster-enabled: 1;
    --detail-grid-smartphone-reference-row-size: 4rem;
    --detail-grid-expanded-row-limit: 999;
    --detail-grid-expanded-viewport-inset-rows: 0.5;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-rows: minmax(
      var(--detail-grid-smartphone-reference-row-size),
      auto
    );
  }

  .route-document--detail .detail-grid__tile {
    --detail-tile-column: 1;
    --detail-tile-columns: 1;
    --detail-tile-row: auto;
    --detail-tile-rows: 1;

    min-block-size: 8rem;
    order: var(--detail-tile-smartphone-order, 0);
  }

  .route-document--detail .detail-grid.is-detail-smartphone-grid-quantized {
    grid-auto-rows: var(--detail-grid-smartphone-row-size);
  }

  .route-document--detail
    .detail-grid.is-detail-smartphone-grid-quantized
    > .detail-grid__tile {
    --detail-tile-row: var(--detail-tile-smartphone-measured-row);
    --detail-tile-rows: var(--detail-tile-smartphone-measured-row-span);

    min-block-size: 0;
  }

  /* Measure the compact content at the current one-column grid width. */
  .route-document--detail
    .detail-grid.detail-grid--smartphone-measurement {
    position: fixed;
    z-index: -1;
    inset: 0 auto auto 0;
    align-content: start;
    inline-size: var(--detail-grid-smartphone-measurement-inline-size);
    max-inline-size: none;
    block-size: auto;
    min-block-size: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .route-document--detail .detail-grid__tile--with-image {
    min-block-size: 18rem;
  }

  .route-document--detail .detail-grid__tile:is(
    .detail-grid__tile--feature-column,
    .detail-grid__tile--feature-stack-column,
    .detail-grid__tile--feature-strip,
    .detail-grid__tile--process-strip
  ) {
    padding: var(--detail-tile-padding);
  }

  .route-document--detail :is(
    .detail-grid__tile--feature-column
      .detail-grid__feature-list--column-standard,
    .detail-grid__tile--feature-stack-column .detail-grid__feature-list
  ) {
    position: relative;
    inset: auto;
    block-size: auto;
  }

  .route-document--detail :is(
    .detail-grid__tile--feature-stack-column .detail-grid__feature-list,
    .detail-grid__tile--feature-strip .detail-grid__feature-list,
    .detail-grid__tile--process-strip .detail-grid__process-list
  ) {
    --detail-list-columns: 1;

    block-size: auto;
    grid-template-rows: none;
  }

  .route-document--detail :is(
    .detail-grid__feature-list--column-standard .detail-grid__feature,
    .detail-grid__tile--feature-stack-column .detail-grid__feature,
    .detail-grid__tile--feature-strip .detail-grid__feature,
    .detail-grid__tile--process-strip .detail-grid__process-step
  ) {
    min-block-size: 5.5rem;
    padding-block: 0.75rem;
  }

  .route-document--detail :is(
    .detail-grid__feature-list--column-standard .detail-grid__feature,
    .detail-grid__tile--feature-stack-column .detail-grid__feature,
    .detail-grid__tile--feature-strip .detail-grid__feature,
    .detail-grid__tile--process-strip .detail-grid__process-step
  ) + :is(.detail-grid__feature, .detail-grid__process-step) {
    border-block-start: var(--detail-divider-size) solid var(--detail-divider-color);
    border-inline-start: 0;
  }

}
}