/* Shared media captions */
.media-figure > img,
.media-figure > video,
.media-figure > a > img {
  display: block;
}

.media-figure.captioned-media {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.media-figure.captioned-media > img,
.media-figure.captioned-media > video,
.media-figure.captioned-media > a,
.media-figure.captioned-media > .plyr {
  min-height: 0;
}

.media-caption {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.2;
  opacity: 0.5;
}

.media-caption .kt-text {
  font-size: inherit;
  line-height: inherit;
}

.media-caption p {
  margin: 0;
  padding: 0;
}

/* Reusable case-story presets, selectable per layout in Kirby. */
.work-layout h2 {
  font-size: clamp(2rem, 3.4vw, 2.5rem);
}

/* Case: labelled lead — an editorial summary paragraph with a recurring eyebrow
   label, so a case's opening reads as a lead without writing "TL;DR" in the copy. */
.work-layout .case-lead {
  position: relative;
  padding-top: 2.25rem;
}

/* The eyebrow sits on its own line above the intro: above the paragraph (right)
   column in the two-column layout (see the min-width override below), and above the
   heading once the columns stack. */
.work-layout .case-lead::before {
  content: "In short";
  position: absolute;
  top: 0;
  left: var(--spacing-page-gutter);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 50 255);
}

.work-layout .case-lead .kt-text {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.45;
}

.work-layout .case-split {
  align-items: start;
}

.work-layout .case-split > .k-column {
  min-width: 0;
}

.work-layout .case-split h2 {
  max-width: 12ch;
}

.work-layout .case-split .kt-text {
  max-width: 54rem;
}

.work-layout .case-feature-headline h2 {
  max-width: 58rem;
  font-size: clamp(3rem, 4vw, 3.5rem);
  line-height: 0.92;
}

.work-layout .case-brand-message {
  background-color: #0000ff;
  color: #fff;
  padding-block: clamp(3rem, 5vw, 6rem);
}

.work-layout .case-brand-message *:not(h6) {
  color: inherit;
}

.work-layout .case-brand-message .kt-text {
  max-width: 48rem;
}

.work-layout .case-media-row > .k-column,
.work-layout .case-media-row > .k-column > .blocks,
.work-layout .case-media-row .media-block,
.work-layout .case-media-row .media {
  height: 100%;
}

.work-layout .case-media-row img {
  height: clamp(28rem, 46vw, 48rem) !important;
  object-fit: cover !important;
}

.work-layout .case-copy-wide .blocks {
  max-width: 72rem;
}

.work-layout .case-copy-wide .kt-text,
.work-layout .case-facts > .k-column > .blocks > .kt-text {
  max-width: 54rem;
}

.work-layout .case-story-panel {
  position: relative;
  isolation: isolate;
  min-height: clamp(38rem, 56.25vw, 56rem);
  overflow: hidden;
  align-content: start;
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.work-layout .case-story-panel.story-align-top {
  align-content: start;
  background-color: transparent;
  background-position: center bottom !important;
}

.work-layout .case-story-panel > .k-column {
  position: relative;
  z-index: 2;
}

.work-layout .case-story-panel.story-align-top .kt-text {
  max-width: 32rem;
}

.work-layout .case-story-panel.story-align-bottom {
  align-content: end;
  background-color: #111;
}

.work-layout .case-story-panel .video-bg-layer {
  z-index: 0;
}

.work-layout .case-story-panel.story-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 72%) 0%, rgb(0 0 0 / 28%) 48%, transparent 76%),
    linear-gradient(0deg, rgb(0 0 0 / 42%) 0%, transparent 48%);
}

.work-layout .case-story-panel.story-gradient,
.work-layout .case-story-panel.story-gradient h2,
.work-layout .case-story-panel.story-gradient .kt-text {
  color: #fff;
}

.work-layout .case-story-panel.story-gradient .blocks {
  max-width: 42rem;
}

.work-layout .case-facts .kt-text {
  margin-bottom: var(--spacing-body-lead);
}

.work-layout .case-facts ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-grid-column-gap);
}

.work-layout .case-facts ul li {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-text-stack);
  border-top: 1px solid rgb(0 0 0 / 20%);
  border-bottom: 0;
}

.work-layout .case-facts ul strong {
  display: block;
  font-family: "Mallory", sans-serif;
  font-size: clamp(2.75rem, 6vw, 6.5rem);
  font-weight: 400;
  line-height: 0.9;
}

.work-layout .equal-height-media > .k-column,
.work-layout .equal-height-media > .k-column > .blocks,
.work-layout .equal-height-media .media-block,
.work-layout .equal-height-media .media {
  height: 100%;
}

.work-layout .equal-height-media .media img,
.work-layout .equal-height-media .media video {
  object-fit: cover !important;
}

.page-content > main.work-layout > .k-grid.section-gap-after + .k-grid {
  margin-top: var(--spacing-section-gap);
}

.page-content > main.work-layout > .k-grid.section-gap-after-tight + .k-grid {
  margin-top: var(--spacing-body-lead);
}

@media (min-width: 1024px) {
  .work-layout h2 {
    font-size: 2.5rem;
  }

  .work-layout .case-feature-headline h2 {
    font-size: 3.5rem;
  }

  /* Two-column layout: sit the eyebrow above the paragraph (right) column,
     aligned to its left edge (50% of the row + half the column gap). */
  .work-layout .case-lead::before {
    left: calc(50% + var(--spacing-grid-column-gap) / 2);
  }
}

@media (max-width: 1023px) {
  .k-grid:not(.media-text-layout):has(> .k-column:nth-child(2)):has(.media) {
    row-gap: var(--spacing-grid-column-gap);
  }

  .work-layout .case-brand-message {
    row-gap: var(--spacing-body-lead);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .work-layout .case-split > .k-column {
    grid-column: 1 / -1;
  }

  .work-layout .case-split {
    row-gap: 0;
  }

  .work-layout .case-split h2 {
    max-width: none;
    font-size: clamp(1.75rem, 3.5vw, 2rem);
    line-height: 1;
    white-space: nowrap;
  }

  .work-layout .case-story-panel.story-gradient .blocks {
    max-width: none;
  }

  .work-layout .case-feature-headline h2 {
    max-width: none;
    font-size: clamp(1.55rem, 3.25vw, 2rem);
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .work-layout .case-intro {
    row-gap: var(--spacing-body-lead);
  }

  .work-layout h2 {
    font-size: 1.75rem;
    overflow-wrap: break-word;
  }

  .work-layout .case-split {
    row-gap: 0;
  }

  .work-layout .case-split h2 {
    max-width: none;
  }

  .work-layout .case-feature-headline h2 {
    font-size: 2.5rem;
  }

  .work-layout .case-media-row img {
    height: auto !important;
    min-height: 0;
    object-fit: contain !important;
  }

  .work-layout .case-story-panel.story-align-top {
    min-height: 56.25vw;
    background-size: cover !important;
    background-position: center bottom !important;
    padding-top: var(--spacing-page-gutter);
    padding-bottom: var(--spacing-page-gutter);
  }

  .work-layout .case-story-panel.story-align-top .k-column + .k-column {
    margin-top: var(--spacing-text-stack);
  }

  .work-layout .case-story-panel.story-align-bottom {
    min-height: 150vw;
  }

  .work-layout .case-story-panel.story-gradient::after {
    background:
      linear-gradient(0deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 20%) 58%, transparent 82%);
  }

  .work-layout .case-facts ul {
    grid-template-columns: 1fr;
  }

  .work-layout .equal-height-media .media img,
  .work-layout .equal-height-media .media video {
    height: auto;
    object-fit: contain !important;
  }
}

/* ---- Artist statement: set-apart serif, 1/3-2/3 ------------------------- */
.work-layout .artist-statement h2 {
  white-space: normal;
  max-width: 14ch;
}

.work-layout .artist-statement .kt-text {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.2rem;
  line-height: 1.75;
  max-width: 60rem;
}

.work-layout .artist-statement .kt-text p {
  margin-bottom: 1.05em;
}

.work-layout .artist-statement .kt-text p:last-child {
  margin-bottom: 0;
  margin-top: 1.6em;
  font-style: italic;
  opacity: 0.7;
}

/* ---- case-overlay: editorial image+text; text overlays image when stacked; order-agnostic --- */
@media (min-width: 1024px) {
  .work-layout .case-overlay > .k-column:not(:has(.media-block)):not(:has(.media)) {
    padding-inline: clamp(1.5rem, 3.5vw, 3.5rem);
    padding-block: clamp(1.5rem, 4vw, 4rem);
  }
}

@media (max-width: 1023px) {
  .work-layout .case-overlay {
    position: relative;
    padding-inline: 0;
    row-gap: 0;
  }
  .work-layout .case-overlay > .k-column:not(:has(.media-block)):not(:has(.media)) {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.25rem, 5vw, 2.5rem);
    margin: 0;
  }
  .work-layout .case-overlay > .k-column:not(:has(.media-block)):not(:has(.media)) > .blocks {
    height: auto;
    justify-content: flex-end;
  }
  .work-layout .case-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgb(0 0 0 / 35%) 0%, rgb(0 0 0 / 14%) 45%, transparent 82%);
    pointer-events: none;
  }
  .work-layout .case-overlay h2,
  .work-layout .case-overlay .kt-text,
  .work-layout .case-overlay .kt-text *,
  .work-layout .case-overlay ul li,
  .work-layout .case-overlay ul li *,
  .work-layout .case-overlay ol li,
  .work-layout .case-overlay strong {
    color: #fff !important;
    text-shadow: 0 1px 6px rgb(0 0 0 / 40%);
  }
  .work-layout .case-overlay ul li::marker {
    color: #fff !important;
  }
  .work-layout .case-overlay ul li {
    border-bottom-color: rgb(255 255 255 / 30%) !important;
  }
  .work-layout .case-overlay h2 {
    max-width: none;
    margin-bottom: 0.5rem;
  }
  .work-layout .case-overlay .kt-text {
    max-width: none;
  }
}

/* ---- Case quote: tighter top/bottom, more space at the sides ---- */
.work-layout .quote-block-container {
  padding-block: clamp(2rem, 5vw, 3.5rem) !important;
}

.work-layout .quote-block-container .text-center {
  max-width: 42rem;
}

/* case-overlay headings: let long words wrap instead of overflowing */
.work-layout .case-overlay h2 {
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}

/* ---- Case brand-message: make the CTA pill visible on the blue background ---- */
.work-layout .case-brand-message .kt-text p a {
  background-color: #fff;
  color: #0000ff;
}

.work-layout .case-brand-message .kt-text p a:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: #0000ff;
}

.work-layout .case-brand-message .kt-text p a:after {
  background: #0000ff;
  -webkit-mask: url("../arrow-right.svg") no-repeat center center;
  mask: url("../arrow-right.svg") no-repeat center center;
  -webkit-mask-size: 18px 16px;
  mask-size: 18px 16px;
}

.work-layout .case-brand-message .kt-text p a:hover:after {
  background: #0000ff;
}

/* ---- Credits: make linked entities recognizable as links ---- */
.work-layout .credits a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.work-layout .credits a:hover {
  text-decoration-thickness: 2px;
}

/* --- Character grid (case-char-grid) — REALTALK 1864 --- */
.work-layout .case-char-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: var(--spacing-grid-column-gap);
  row-gap: 2.5rem;
}
.work-layout .case-char-grid > .k-column { grid-column: auto !important; }
.work-layout .case-char-grid > .k-column > .blocks { gap: 0.85rem; }
.work-layout .case-char-grid .media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.work-layout .case-char-grid .kt-text p { font-size: 0.9rem; line-height: 1.45; }
.work-layout .case-char-grid .kt-text p strong {
  display: block;
  font-family: "Mallory", sans-serif;
  font-size: 1.05rem;
  margin-bottom: 0.1rem;
}
@media (max-width: 1023px) {
  .work-layout .case-char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}