/* Textures sit over each section's original color. Service contact bands use
   illustrative medical motifs; general sections retain abstract fibres. */
body[data-unit] {
  --texture-grain: url('/assets/texturas/grain.svg');
  --texture-flow: url('/assets/texturas/flow.svg');
}

/* Paper grain on open reading areas; retain existing background colors. */
body[data-unit] #app > main,
body[data-unit] .hbo-page {
  background-image: var(--texture-grain);
  background-size: 180px 180px;
}

/* Fine fibres use translucent ink from each city's existing palette. */
body[data-unit] .unit-facts,
body[data-unit] .hbo-page .svc-surface--teal { position: relative; isolation: isolate; }
body[data-unit] .lower-features::before,
body[data-unit] .unit-facts::before,
body[data-unit] .hbo-page .service-location::before,
body[data-unit] .hbo-page .svc-surface--teal::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(var(--u-shade) / 9%);
  mask: var(--texture-flow) right center / cover no-repeat;
}
body[data-unit] .lower-features::before { bottom: auto; height: min(900px, 100%); }
body[data-unit] .lower-features::after,
body[data-unit] .unit-facts::after,
body[data-unit] .hbo-page .service-location::after,
body[data-unit] .hbo-page .svc-surface--teal::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--texture-grain) repeat;
}
body[data-unit] .hbo-page .service-location .strip-grid { background: #fff; }

/* Full-bleed service covers: photographic subject on the right, readable copy
   on the left. Each unit's shade ties the image to its existing palette. */
body[data-unit] .hbo-page .hbo-hero .unit-hero-art {
  background: none; z-index: 0;
}
body[data-unit] .hbo-page .hbo-hero .unit-hero-art picture,
body[data-unit] .hbo-page .hbo-hero .unit-hero-art img {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
}
body[data-unit] .hbo-page .hbo-hero .unit-hero-art img { object-fit: cover; object-position: center; }
body[data-unit] .hbo-page .hbo-hero .unit-hero-art::before {
  z-index: 1;
  background: linear-gradient(180deg, rgb(var(--u-shade) / 36%), transparent 24%, transparent 80%, rgb(var(--u-shade) / 12%)),
    linear-gradient(90deg, rgb(var(--u-shade) / 78%) 0%, rgb(var(--u-shade) / 64%) 33%, rgb(var(--u-shade) / 16%) 58%, transparent 76%);
}
body[data-unit] .hbo-page .hbo-hero .unit-hero-art::after {
  z-index: 1; background: var(--texture-grain) center / 180px 180px repeat; opacity: .08;
}
body[data-unit] .hbo-page .hbo-hero .hero-inner { position: relative; z-index: 1; }
body[data-unit] .hbo-page .hbo-hero .hero-copy { width: min(640px, 52%); }

/* Preserve blue surfaces; apply decoration as independent translucent layers. */
body[data-unit] .consult-section,
body[data-unit] .footer-section { position: relative; isolation: isolate; }
body[data-unit] .consult-section::before,
body[data-unit] .footer-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(255 255 255 / 8%);
  mask: var(--texture-flow) right center / cover no-repeat;
}
body[data-unit] .consult-section::after,
body[data-unit] .footer-section::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--texture-grain) repeat;
}
body[data-unit] .hbo-page .svc-band::before {
  background: var(--texture-grain), var(--texture-flow);
  background-size: 180px 180px, cover;
  background-repeat: repeat, no-repeat;
  opacity: .08;
}

/* A single subject-specific illustration in each service's contact band.
   Transparent artwork blends into the unit color and fades before the copy. */
body[data-unit] .hbo-page .hbo-consult {
  --texture-medical: url('/assets/texturas/hiperbarica-v1-960.webp');
  --texture-medical-size: auto 125%;
  --texture-medical-position: left center;
}
body[data-unit] .hbo-page .svc-consult--feridas {
  --texture-medical: url('/assets/texturas/feridas-v1-960.webp');
  --texture-medical-size: auto 145%;
}
body[data-unit] .hbo-page .svc-consult--infusao {
  --texture-medical: url('/assets/texturas/infusao-v1-960.webp');
  --texture-medical-size: auto 140%;
  --texture-medical-position: -80px center;
}
body[data-unit] .hbo-page .hbo-consult::before {
  background: var(--texture-medical) var(--texture-medical-position) / var(--texture-medical-size) no-repeat;
  width: min(54%, 820px); right: auto;
  mask: linear-gradient(90deg, #000 0%, #000 28%, rgb(0 0 0 / 45%) 68%, transparent 100%);
  opacity: .2;
}

@media (max-width: 900px) {
  body[data-unit] .hbo-page .hbo-hero .hero-copy { width: min(620px, 100%); }
  body[data-unit] .hbo-page .hbo-hero .unit-hero-art img { object-position: 75% center; }
  body[data-unit] .hbo-page .hbo-hero .unit-hero-art::before {
    background: linear-gradient(100deg, rgb(var(--u-shade) / 88%), rgb(var(--u-shade) / 84%) 62%, rgb(var(--u-shade) / 80%));
  }
  body[data-unit] .hbo-page .hbo-consult::before {
    width: 100%; height: 260px; bottom: auto;
    background-size: auto 135%; background-position: left center;
    mask: linear-gradient(135deg, #000, rgb(0 0 0 / 45%) 50%, transparent 85%);
    opacity: .14;
  }
  body[data-unit] .hbo-page .svc-consult--infusao::before { background-position: -80px center; }
}
@media (max-width: 600px) {
  body[data-unit] .hbo-page .hbo-hero .unit-hero-art img { object-position: center; }
  body[data-unit] .hbo-page .hbo-hero .unit-hero-art::before {
    background: linear-gradient(180deg, rgb(var(--u-shade) / 50%) 0%, rgb(var(--u-shade) / 74%) 32%, rgb(var(--u-shade) / 84%) 76%, rgb(var(--u-shade) / 20%) 90%, rgb(var(--u-shade) / 6%) 100%);
  }
}
@media (forced-colors: active), print {
  body[data-unit] :is(.unit-facts, .lower-features, .service-location, .svc-surface--teal, .consult-section, .footer-section, .svc-band)::before,
  body[data-unit] :is(.unit-facts, .lower-features, .service-location, .svc-surface--teal, .consult-section, .footer-section)::after,
  body[data-unit] .hbo-page .hbo-hero .unit-hero-art::after { display: none; }
  body[data-unit] :is(.hbo-page, #inicio) { background-image: none; }
}