/* A wide cell spans the same quarter-column tracks as adjacent photo rows,
   including the gaps inside its span. Bare 1fr/2fr ratios omit those gaps. */
@media (min-width: 761px) {
  .cms-composition__grid {
    --cms-quarter-track: calc((100% + var(--cms-gap)) / 4 - var(--cms-gap));
    --cms-half-track: calc((100% + var(--cms-gap)) / 2 - var(--cms-gap));
    --cms-three-quarter-track: calc((100% + var(--cms-gap)) * 3 / 4 - var(--cms-gap));
  }

  .cms-composition--preset-one-one-two > .cms-composition__grid {
    grid-template-columns: minmax(0, var(--cms-quarter-track)) minmax(0, var(--cms-quarter-track)) minmax(0, var(--cms-half-track));
  }

  .cms-composition--preset-two-one-one > .cms-composition__grid {
    grid-template-columns: minmax(0, var(--cms-half-track)) minmax(0, var(--cms-quarter-track)) minmax(0, var(--cms-quarter-track));
  }

  .cms-composition--preset-one-two-one > .cms-composition__grid {
    grid-template-columns: minmax(0, var(--cms-quarter-track)) minmax(0, var(--cms-half-track)) minmax(0, var(--cms-quarter-track));
  }

  .cms-composition--preset-three-one > .cms-composition__grid {
    grid-template-columns: minmax(0, var(--cms-three-quarter-track)) minmax(0, var(--cms-quarter-track));
  }

  .cms-composition--preset-one-three > .cms-composition__grid {
    grid-template-columns: minmax(0, var(--cms-quarter-track)) minmax(0, var(--cms-three-quarter-track));
  }
}

/* Fractional image dimensions can expose the element's own background along
   the last pixel. Photos have no dark backing or decorative bottom edge. */
.cms-site img.cms-cell__media,
.admin-page img.v2-cell__media {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* An explicit image box keeps the same pixel dimensions at every breakpoint.
   The cell limits it only when the available space is smaller. */
.cms-cell--image-fixed,
.v2-cell--image-fixed {
  --cell-image-x: 50%;
  --cell-image-y: 50%;
  --cell-image-shift-x: -50%;
  --cell-image-shift-y: -50%;
}
.cms-cell--image-pos-top,
.v2-cell--image-pos-top { --cell-image-y: 0%; --cell-image-shift-y: 0%; }
.cms-cell--image-pos-bottom,
.v2-cell--image-pos-bottom { --cell-image-y: 100%; --cell-image-shift-y: -100%; }
.cms-cell--image-pos-left,
.v2-cell--image-pos-left { --cell-image-x: 0%; --cell-image-shift-x: 0%; }
.cms-cell--image-pos-right,
.v2-cell--image-pos-right { --cell-image-x: 100%; --cell-image-shift-x: -100%; }

.cms-site .cms-cell--image-fixed > .cms-cell__media,
.admin-page .v2-cell--image-fixed .v2-cell__media {
  position: absolute;
  inset: auto;
  top: var(--cell-image-y);
  left: var(--cell-image-x);
  width: var(--cell-image-width, 640px);
  height: var(--cell-image-height, auto);
  max-width: 100%;
  max-height: 100%;
  flex: none;
  transform: translate(var(--cell-image-shift-x), var(--cell-image-shift-y));
}

/* An auto-height composition must still measure its image in normal flow. */
.cms-site .cms-composition--auto .cms-cell--image-fixed > .cms-cell__media,
.admin-page .v2-block--auto .v2-cell--image-fixed .v2-cell__media {
  position: relative;
  inset: auto;
  width: var(--cell-image-width, 640px);
  height: var(--cell-image-height, auto);
  max-width: 100%;
  max-height: none;
  flex: 0 0 auto;
  align-self: center;
  transform: none;
}
.cms-site .cms-composition--auto .cms-cell--image-fixed.cms-cell--image-pos-left > .cms-cell__media,
.admin-page .v2-block--auto .v2-cell--image-fixed.v2-cell--image-pos-left .v2-cell__media { align-self: flex-start; }
.cms-site .cms-composition--auto .cms-cell--image-fixed.cms-cell--image-pos-right > .cms-cell__media,
.admin-page .v2-block--auto .v2-cell--image-fixed.v2-cell--image-pos-right .v2-cell__media { align-self: flex-end; }

/* Keep each catalogue label intact while allowing the short list to wrap. */
.cms-site .cms-richtext .cms-application-links,
.admin-page .v2-cell__rich .cms-application-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
}

.cms-site .cms-richtext .cms-application-links > a,
.admin-page .v2-cell__rich .cms-application-links > a {
  display: inline-block;
  color: inherit;
  white-space: nowrap;
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-color: var(--link-underline, #07d5d199) !important;
  text-decoration-thickness: var(--link-underline-thickness, 1px);
  text-underline-offset: var(--link-underline-offset, .24em);
  border: 0;
  line-height: 1.3;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.cms-site .cms-richtext .cms-application-links > a:is(:hover,:focus-visible),
.admin-page .v2-cell__rich .cms-application-links > a:is(:hover,:focus-visible) {
  color: var(--cyan, #07d5d1);
  text-decoration-color: transparent !important;
}

@media (max-width: 760px) {
  .cms-site .cms-richtext .cms-application-links {
    column-gap: 12px;
  }
}

/* Media captions can use a background fitted to their longest line.
   Only the backdrop is translucent/blurred; the text keeps its opacity. */
.cms-site .cms-cell--caption-compact > .cms-cell__caption,
.admin-page .v2-cell--caption-compact .v2-cell__caption {
  --caption-shift-x: 0%;
  --caption-shift-y: 0%;
  position: absolute;
  top: 16px;
  right: auto;
  bottom: auto;
  left: 16px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 14px 20px;
  border-radius: 0;
  color: #fff;
  background: color-mix(in srgb, var(--cell-caption-background, #07171c) var(--cell-caption-opacity, 64%), transparent);
  -webkit-backdrop-filter: blur(var(--cell-caption-blur, 0px));
  backdrop-filter: blur(var(--cell-caption-blur, 0px));
  transform: translate(var(--caption-shift-x), var(--caption-shift-y));
}
.cms-site .cms-cell--caption-compact.cms-cell--h-center > .cms-cell__caption,
.admin-page .v2-cell--caption-compact.v2-cell--h-center .v2-cell__caption {
  --caption-shift-x: -50%;
  left: 50%;
  right: auto;
}
.cms-site .cms-cell--caption-compact.cms-cell--h-right > .cms-cell__caption,
.admin-page .v2-cell--caption-compact.v2-cell--h-right .v2-cell__caption {
  left: auto;
  right: 16px;
}
.cms-site .cms-cell--caption-compact.cms-cell--caption-overlay-center > .cms-cell__caption,
.admin-page .v2-cell--caption-compact .v2-cell__caption--overlay-center {
  --caption-shift-y: -50%;
  top: 50%;
}
.cms-site .cms-cell--caption-compact:is(.cms-cell--caption-bottom,.cms-cell--caption-overlay-bottom) > .cms-cell__caption,
.admin-page .v2-cell--caption-compact :is(.v2-cell__caption--bottom,.v2-cell__caption--overlay-bottom) {
  top: auto;
  bottom: 16px;
}
.cms-site .cms-cell--caption-overlay-custom > .cms-cell__caption,
.admin-page .v2-cell__caption--overlay-custom {
  position: absolute;
  top: clamp(16px, var(--cell-caption-y, 50%), calc(100% - 16px));
  bottom: auto;
  margin-block: 0;
  transform: translateY(var(--cell-caption-shift-y, -50%));
}
.cms-site .cms-cell--caption-overlay-custom:not(.cms-cell--caption-compact) > .cms-cell__caption {
  left: 0;
  right: 0;
  color: #fff;
  background: rgb(0 0 0 / 64%);
}
.admin-page .v2-cell--h-center .v2-cell__caption--overlay-custom {
  transform: translate(-50%, var(--cell-caption-shift-y, -50%));
}
.cms-site .cms-cell--caption-compact.cms-cell--caption-overlay-custom > .cms-cell__caption,
.admin-page .v2-cell--caption-compact .v2-cell__caption--overlay-custom {
  --caption-shift-y: var(--cell-caption-shift-y, -50%);
  top: clamp(16px, var(--cell-caption-y, 50%), calc(100% - 16px));
  bottom: auto;
  transform: translate(var(--caption-shift-x), var(--caption-shift-y));
}
.cms-site .cms-cell--caption-compact > .cms-cell__caption :is(h1,h2,h3,p),
.admin-page .v2-cell--caption-compact .v2-cell__caption :is(h1,h2,h3,p) {
  max-width: none;
}

/* A selected caption color applies to the entire rich-text caption. */
.cms-site .cms-cell.cms-cell--caption-colored > .cms-cell__caption,
.cms-site .cms-cell.cms-cell--caption-colored > .cms-cell__caption *,
.admin-page .v2-cell.v2-cell--caption-colored .v2-cell__caption,
.admin-page .v2-cell.v2-cell--caption-colored .v2-cell__caption * {
  color: var(--cell-text-color) !important;
}