/* =====================================================================
   GVD v29 - corrected hero emphasis and stable mobile public-work flow.
   ===================================================================== */

/* Match the visual hierarchy used across the other section titles:
   context in gray, the central action in white. */
.hero-thesis-v27 .hero-thesis-segment {
  color: var(--gvd-title-gray, var(--type-secondary, #9fa0a6)) !important;
}
.hero-thesis-v27 .hero-thesis-primary {
  color: var(--ink) !important;
}
.hero-thesis-v27 .hero-thesis-secondary {
  color: var(--gvd-title-gray, var(--type-secondary, #9fa0a6)) !important;
}

@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  /* Public work uses a compact, explicit vertical stack. The banner is a
     normal-flow element with a fixed aspect ratio, so titles and descriptions
     can never occupy the same pixels. */
  html.is-depth .station-work {
    padding-top: var(--gvd-scene-top) !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  html.is-depth .station-work .station-shell,
  html.is-depth .station-work .station-shell-wide,
  html.is-depth .station-work .work-layout {
    width: 100% !important;
    height: calc(100dvh - var(--gvd-scene-top) - 92px - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .station-work .work-layout > .scene-header {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 0 clamp(8px, 1.1vh, 12px) !important;
  }

  .station-work .scene-title {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(31px, 8vw, 44px) !important;
    line-height: .88 !important;
    text-wrap: balance !important;
  }

  .station-work .work-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: clamp(7px, .95vh, 11px) !important;
  }

  .station-work .work-row,
  .station-work .work-row.is-active,
  .station-work .work-row.is-mobile-open,
  .station-work .work-row:hover,
  .station-work .work-row:focus,
  .station-work .work-row:focus-visible {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: clamp(3px, .45vh, 5px) !important;
    background: transparent !important;
    transform: none !important;
  }

  .station-work .work-title,
  .station-work .work-row.is-active .work-title,
  .station-work .work-row.is-mobile-open .work-title,
  .station-work .work-row:hover .work-title,
  .station-work .work-row:focus .work-title {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    align-content: start !important;
    gap: clamp(2px, .3vh, 4px) !important;
    font-size: clamp(17px, 4.65vw, 23px) !important;
    line-height: .92 !important;
    transform: none !important;
  }

  .station-work .work-title-segment,
  .station-work .work-title-before,
  .station-work .work-title-after,
  .station-work .work-row.is-active .work-title-segment,
  .station-work .work-row.is-mobile-open .work-title-segment,
  .station-work .work-row:hover .work-title-segment,
  .station-work .work-row:focus .work-title-segment {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    opacity: 1 !important;
    transform: none !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-wrap: balance !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .station-work .work-title-before { grid-row: 1 !important; }

  .station-work .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media,
  .station-work .work-row:hover .work-inline-media,
  .station-work .work-row:focus .work-inline-media {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    justify-self: start !important;
    width: min(100%, 390px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4.5 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .station-work .work-inline-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .station-work .work-title-after { grid-row: 3 !important; }

  .station-work .work-row-meta {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: start !important;
    gap: 8px !important;
    opacity: .82 !important;
    transform: none !important;
    font-size: clamp(7.2px, 1.78vw, 9.2px) !important;
    line-height: 1.2 !important;
  }

  .station-work .work-row-meta > span {
    min-width: 0 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow-wrap: anywhere !important;
  }

  .station-work .work-row-meta > b {
    align-self: start !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) and (max-height: 740px) {
  html.is-depth .station-work {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }

  html.is-depth .station-work .station-shell,
  html.is-depth .station-work .station-shell-wide,
  html.is-depth .station-work .work-layout {
    height: calc(100dvh - var(--gvd-scene-top) - 82px - env(safe-area-inset-bottom)) !important;
  }

  .station-work .work-layout > .scene-header {
    margin-bottom: 6px !important;
  }

  .station-work .scene-title {
    font-size: clamp(27px, 7.7vw, 35px) !important;
  }

  .station-work .work-list {
    gap: 5px !important;
  }

  .station-work .work-row {
    gap: 2px !important;
  }

  .station-work .work-title {
    font-size: clamp(14.5px, 4.2vw, 18px) !important;
    gap: 1px !important;
  }

  .station-work .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    width: min(100%, 330px) !important;
  }

  .station-work .work-row-meta {
    font-size: 6.5px !important;
    line-height: 1.14 !important;
  }

  .station-work .work-row-meta > span {
    -webkit-line-clamp: 1 !important;
  }
}