/* STRJ workshop: scoped to the 26 opted-in service pages. Keep each page's
   existing composition, original media, prices, controls and destinations. */
body.strj-brand-workshop {
  --bw-coal: #141719;
  --bw-paper: #f4f0e8;
  --bw-copper: #dca574;
  --bw-ink: #202326;
}
body.strj-brand-workshop .hd {
  background: #141719 !important;
}

/* A single graphite surface carries the existing heading and action. The
   pricing header retains its original hall photograph and protective gradient. */
body.strj-brand-workshop main > .ph {
  background-color: var(--bw-coal);
  color: var(--bw-paper);
  border-bottom-color: #916646;
}
body.strj-brand-workshop:not(.strj-pricing-visual) main > .ph {
  background-image: none;
}
body.strj-brand-workshop:not(.strj-pricing-visual) main > .ph::before {
  background: none;
}
body.strj-brand-workshop .ph .ph-h1 {
  color: var(--bw-paper);
}
body.strj-brand-workshop .ph :is(.ph-lead, .repair-scope-note) {
  color: #d5d2cc;
}
body.strj-brand-workshop .ph :is(.crumbs, .crumbs li, .crumbs a, .crumb-sep) {
  color: #b8b3aa;
}
body.strj-brand-workshop .ph .ph-kicker {
  color: var(--bw-copper);
}
body.strj-brand-workshop .ph a:not(.btn) {
  color: #e1b58f;
}
body.strj-brand-workshop .ph a:not(.btn):hover {
  color: #f5d6ba;
}
body.strj-brand-workshop .ph .premium-tree {
  background: transparent;
  border-color: #b28a673b;
}
body.strj-brand-workshop .ph .premium-tree a {
  color: #e1b58f;
}
body.strj-brand-workshop .ph .btn-primary {
  background: #df8849 !important;
  background-image: none !important;
  border-color: #df8849 !important;
  color: #171513 !important;
  box-shadow: none !important;
}
body.strj-brand-workshop .ph .btn-primary:hover {
  background: #ee9d62 !important;
  border-color: #ee9d62 !important;
}
body.strj-brand-workshop .ph :is(a, button, summary):focus-visible {
  outline: 2px solid #fff0dd !important;
  outline-offset: 4px;
}

/* .bw-media inherits the old slot's class and grid position. The new scene is
   a real image element, never repeated behind text or cropped into a banner. */
body.strj-brand-workshop .bw-media {
  min-width: 0;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
body.strj-brand-workshop .bw-media .bw-scene {
  display: block;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: auto;
  background: var(--bw-coal);
  box-shadow: none;
}
body.strj-brand-workshop .bw-scene :is(picture, img),
body.strj-brand-workshop img.bw-scene {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: none;
  transform: none;
}
body.strj-brand-workshop .bw-scene figcaption {
  margin: 0;
  padding: 10px 0 0;
  background: transparent;
  color: #645c53;
  font-size: 13px;
  line-height: 1.5;
}
body.strj-brand-workshop.strj-services-refined #reseni .premium-card:first-child > .bw-service-media {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
}
body.strj-brand-workshop.strj-services-refined #reseni .bw-scene > .premium-card-image,
body.strj-brand-workshop.strj-services-refined #reseni .bw-previous > .premium-card-image {
  margin: 0;
  aspect-ratio: auto;
}

/* Original concepts remain usable, clearly labelled native disclosures.
   Their complete source nodes stay inside, including links and captions. */
body.strj-brand-workshop .bw-previous {
  display: block;
  min-width: 0;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #65584a;
}
body.strj-brand-workshop .bw-previous > summary {
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  color: #825431;
  font-size: 13px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.strj-brand-workshop .bw-previous > summary:focus-visible {
  outline: 2px solid #945221;
  outline-offset: 4px;
}
body.strj-brand-workshop .bw-previous :is(figure, picture, .premium-card-image) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
}
body.strj-brand-workshop .bw-previous img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: none;
  transform: none;
}
body.strj-brand-workshop .bw-previous :is(figcaption, .services-concept-note) {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  color: #645c53;
  font-size: 13px;
  line-height: 1.5;
}
body.strj-brand-workshop .ph .bw-previous,
body.strj-brand-workshop .ph .bw-previous :is(summary, figcaption, .services-concept-note),
body.strj-brand-workshop .ph .bw-scene figcaption {
  color: #d9b493;
}

/* A div replacing a figure must retain the technical page's established
   stagger. Only the new direct wrappers are targeted; opened original figures
   inside details remain full width. */
body.strj-brand-workshop.strj-composition-tech .hc-web-art .visual-web-pair > .bw-media:first-child {
  width: 94%;
  justify-self: start;
}
body.strj-brand-workshop.strj-composition-tech .hc-web-art .visual-web-pair > .bw-media:nth-child(2) {
  width: 66%;
  justify-self: end;
}
@media (max-width: 760px) {
  body.strj-brand-workshop.strj-composition-tech .hc-web-art .visual-web-pair > .bw-media:first-child {
    width: 100%;
  }
  body.strj-brand-workshop.strj-composition-tech .hc-web-art .visual-web-pair > .bw-media:nth-child(2) {
    width: 86%;
  }
}

/* Visual finish: identify the first service before its preserved illustration
   on a phone. Desktop composition and the native concept disclosure remain. */
@media (max-width: 700px) {
  body.strj-brand-workshop.strj-services-refined #reseni .premium-card:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 14px;
  }
  body.strj-brand-workshop.strj-services-refined #reseni .premium-card:first-child > h3 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  body.strj-brand-workshop.strj-services-refined #reseni .premium-card:first-child > p:not(.services-concept-note) {
    grid-column: 1;
    grid-row: 2;
  }
  body.strj-brand-workshop.strj-services-refined #reseni .premium-card:first-child > .bw-service-media {
    grid-column: 1;
    grid-row: 3;
    margin: 8px 0 0;
  }
}