/* =====================================================================
   GVD v36 - public-work mobile polish, unified task typography, SEO build
   ===================================================================== */

/* One font system for “З якими задачами працюю” on desktop and mobile. */
.station-tasks .tasks-list .task-item,
.station-tasks .tasks-list .task-label {
  font-family: "grtsk-vf", "Arial Narrow", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-stretch: 150% !important;
  font-variation-settings: "wght" 700, "wdth" 150 !important;
  letter-spacing: -.032em !important;
}

@media (max-width: 1100px) {
  /* Public works stays inside one scene and leaves a clean navigation safe zone. */
  :root { --v36-work-safe-bottom: calc(84px + env(safe-area-inset-bottom)); }
  html.is-depth .station-work {
    padding-top: calc(var(--gvd-header-h) + clamp(5px, .7dvh, 9px)) !important;
    padding-bottom: var(--v36-work-safe-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: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html.is-depth .station-work .work-layout {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    gap: clamp(3px, .45dvh, 6px) !important;
  }
  .station-work .scene-title {
    max-width: 9.2ch !important;
    font-size: clamp(26px, min(7.7vw, 4.9dvh), 37px) !important;
    line-height: .83 !important;
  }
  .station-work .work-list {
    grid-template-rows: repeat(3,minmax(0,1fr)) !important;
    gap: clamp(2px, .34dvh, 5px) !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 {
    gap: 1px !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 {
    grid-template-rows: auto minmax(34px,1fr) auto !important;
    gap: 0 !important;
  }
  .station-work .work-title-segment,
  .station-work .work-row:hover .work-title-segment,
  .station-work .work-row.is-active .work-title-segment,
  .station-work .work-row.is-mobile-open .work-title-segment {
    font-size: clamp(14px, min(4vw, 2.65dvh), 18px) !important;
    line-height: .9 !important;
  }
  .station-work .work-inline-media,
  .station-work .work-row:hover .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    min-height: 34px !important;
    max-height: clamp(46px, 6.6dvh, 58px) !important;
    margin: 1px 0 !important;
  }
  .station-work .work-row-meta {
    gap: clamp(5px, 1.4vw, 8px) !important;
    font-size: clamp(6.7px, min(1.78vw, 1.18dvh), 8.2px) !important;
    line-height: 1.12 !important;
  }
  .station-work .work-row-meta > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  .station-tasks .tasks-list .task-item,
  .station-tasks .tasks-list .task-label {
    font-family: "grtsk-vf", "Arial Narrow", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-stretch: 150% !important;
    font-variation-settings: "wght" 700, "wdth" 150 !important;
    letter-spacing: -.032em !important;
  }
}

@media (max-width: 430px), (max-height: 740px) and (max-width: 1100px) {
  :root { --v36-work-safe-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .station-work .scene-title { font-size: clamp(24px, 7.3vw, 33px) !important; }
  .station-work .work-title,
  .station-work .work-row.is-active .work-title,
  .station-work .work-row.is-mobile-open .work-title { grid-template-rows: auto minmax(30px,1fr) auto !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 { min-height: 30px !important; max-height: 48px !important; }
  .station-work .work-row-meta { font-size: 6.5px !important; }
}