/* PVM160S-E product brochure — self-contained styles (embed + standalone) */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.product-brochure {
  margin: 0;
  font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/*
 * Copy placement — template notes
 *
 * Unlike TK2150 (flex-centred header/body), each PVM160S-E panel positions
 * its copy box with percentages of the source image so text can sit in the
 * artwork's negative space. Tune one panel at a time.
 *
 * Custom properties (set on .panel--NN):
 *
 *   --copy-top, --copy-left, --copy-right, --copy-bottom
 *     Edges of the copy box as % of the stage (the full panel image).
 *     Use --copy-left: auto with --copy-right to pin a box to the right edge.
 *     Use --copy-top: auto with --copy-bottom to pin a box to the bottom edge.
 *     Measure in Photoshop at 100% zoom: value = pixel ÷ dimension × 100.
 *
 *   --copy-width
 *     Width of the copy box as % of the stage. Body text wraps inside this.
 *
 *   --copy-align
 *     text-align of heading and body (left | center | right).
 *
 *   --copy-transform
 *     Optional transform on the copy box. Use `translateX(-50%)` with
 *     --copy-left: 50% for a centred box that still uses --copy-width.
 *
 *   --heading-gradient
 *     Background-image for .panel__heading--gradient (set on .panel by default).
 *
 *   --heading-shadow, --body-shadow
 *     text-shadow / filter fallbacks for legibility on dark art.
 *
 * Desktop only: panels hide at ≤1030px (carousel + Key Features take over).
 */

/* Mobile lead heading — hidden on desktop; panel 1 hero line on small viewports */
.brochure-mobile-lead {
  display: none;
}

.brochure-mobile-lead__heading {
  margin: 0;
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #0d5c8c;
}

/* Mobile render carousel — hidden on desktop; panels take over */
.brochure-mobile-carousel {
  display: none;
}

.brochure-mobile-carousel__track {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 1.5rem) 1.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1rem, 4vw, 1.5rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.brochure-mobile-carousel__track::-webkit-scrollbar {
  display: none;
}

.brochure-mobile-carousel__slide {
  flex: 0 0 82%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/*
 * Per-render crop — see content/products/tk2150/brochure.css for the
 * --crop-* / --show-* / --crop-aspect-* contract. Values include ~4%
 * padding around the non-white product region of each 1500×1500 render.
 */
.brochure-mobile-carousel__slide--01 {
  --crop-left: 0.035;
  --crop-top: 0.237;
  --show-w: 0.934;
  --show-h: 0.555;
  --crop-aspect-w: 934;
  --crop-aspect-h: 555;
}

.brochure-mobile-carousel__slide--02 {
  --crop-left: 0.068;
  --crop-top: 0.181;
  --show-w: 0.865;
  --show-h: 0.638;
  --crop-aspect-w: 865;
  --crop-aspect-h: 638;
}

.brochure-mobile-carousel__slide--03 {
  --crop-left: 0.037;
  --crop-top: 0.175;
  --show-w: 0.888;
  --show-h: 0.653;
  --crop-aspect-w: 888;
  --crop-aspect-h: 653;
}

/* I/O close-up — zoomed out so the product sits smaller in the slide */
.brochure-mobile-carousel__slide--04 {
  --crop-left: 0.03;
  --crop-top: 0.12;
  --show-w: 0.72;
  --show-h: 0.54;
  --crop-aspect-w: 720;
  --crop-aspect-h: 540;
}

.brochure-mobile-carousel__slide--05 {
  --crop-left: 0.01;
  --crop-top: 0.287;
  --show-w: 0.98;
  --show-h: 0.439;
  --crop-aspect-w: 980;
  --crop-aspect-h: 439;
}

.brochure-mobile-carousel__slide--06 {
  --crop-left: 0.074;
  --crop-top: 0.147;
  --show-w: 0.852;
  --show-h: 0.706;
  --crop-aspect-w: 852;
  --crop-aspect-h: 706;
}

.brochure-mobile-carousel__slide--07 {
  --crop-left: 0.040;
  --crop-top: 0.162;
  --show-w: 0.921;
  --show-h: 0.676;
  --crop-aspect-w: 921;
  --crop-aspect-h: 676;
}

.brochure-mobile-carousel__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--crop-aspect-w) / var(--crop-aspect-h);
}

.brochure-mobile-carousel__frame img {
  position: absolute;
  top: calc(-1 * var(--crop-top) / var(--show-h) * 100%);
  left: calc(-1 * var(--crop-left) / var(--show-w) * 100%);
  width: calc(100% / var(--show-w));
  height: calc(100% / var(--show-h));
  max-width: none;
  max-height: none;
}

.product-brochure__panels {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.panel {
  width: 100%;
  --heading-gradient: linear-gradient(105deg, #9fd4ff 0%, #ffffff 42%, #ffc48a 100%);
}

.panel__stage {
  position: relative;
  width: 100%;
  background-color: var(--panel-bg, #000);
}

.panel__image {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panel__copy {
  position: absolute;
  top: var(--copy-top, 8%);
  left: var(--copy-left, 6%);
  right: var(--copy-right, auto);
  bottom: var(--copy-bottom, auto);
  width: var(--copy-width, 42%);
  text-align: var(--copy-align, left);
  transform: var(--copy-transform, none);
  color: #fff;
  pointer-events: auto;
}

.panel__heading {
  margin: 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-size: var(--heading-size, clamp(1.35rem, 2.7vw, 2.55rem));
  text-shadow: var(--heading-shadow, 0 2px 18px rgba(0, 0, 0, 0.7));
}

.panel__heading--gradient {
  background-image: var(--heading-gradient);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.75));
}

.panel__body {
  margin: 0;
  padding-top: clamp(0.65rem, 1.35vw, 1.1rem);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
  text-shadow: var(--body-shadow, 0 1px 12px rgba(0, 0, 0, 0.65));
}

/*
 * Panel 1 — monitors occupy ~right 40%. Left column is uniformly dark.
 * Copy is left-aligned, slightly above vertical centre of that field.
 */
.panel--01 {
  --copy-top: 26%;
  --copy-left: 6.2%;
  --copy-width: 36%;
  --copy-align: left;
  --heading-size: clamp(1.5rem, 3vw, 2.85rem);
}

/*
 * Panel 2 — 1200 nits graphic ~x 40–75%, y 16–50%. Keep copy left of that.
 */
.panel--02 {
  --copy-top: 22%;
  --copy-left: 5.8%;
  --copy-width: 34%;
  --copy-align: left;
  --heading-size: clamp(1.25rem, 2.5vw, 2.25rem);
}

/*
 * Panel 3 — product sits lower-right; top ~33% is empty black.
 */
.panel--03 {
  --copy-top: 8%;
  --copy-left: 5.8%;
  --copy-width: 58%;
  --copy-align: left;
  --heading-size: clamp(1.35rem, 2.6vw, 2.4rem);
}

/*
 * Panel 4 — chassis and baked-in port labels occupy the lower ~80%.
 * Centre the copy in the dark top band; keep the block above ~18% height
 * so it does not sit on the backlight glow behind the product.
 */
.panel--04 {
  --copy-top: 3.8%;
  --copy-left: 50%;
  --copy-width: 70%;
  --copy-align: center;
  --copy-transform: translateX(-50%);
  --heading-size: clamp(1.25rem, 2.45vw, 2.2rem);
}

/*
 * Panel 5 — USB/LUT rear I/O occupies the upper-right; bottom-left is empty.
 */
.panel--05 {
  --copy-top: auto;
  --copy-bottom: 6.5%;
  --copy-left: 5.8%;
  --copy-width: 38%;
  --copy-align: left;
  --heading-size: clamp(1.35rem, 2.6vw, 2.4rem);
}

/*
 * Panel 6 — I/O close-up ~left 30%; front monitor bezel starts at x≈38.2%.
 * Left-align copy to that bezel (red-line mark); box runs to the right inset.
 */
.panel--06 {
  --copy-top: 6.5%;
  --copy-left: 38.2%;
  --copy-right: 5.8%;
  --copy-width: auto;
  --copy-align: left;
  --copy-transform: none;
  --heading-size: clamp(1.35rem, 2.6vw, 2.4rem);
}

/*
 * Panel 7 — top-left over the dark camera operator. Copy may overlap
 * the figure and screens; white body + gradient heading stay readable there.
 */
.panel--07 {
  --copy-top: 6.5%;
  --copy-left: 5.8%;
  --copy-width: 40%;
  --copy-align: left;
  --heading-size: clamp(1.25rem, 2.4vw, 2.15rem);
  --body-shadow: 0 1px 14px rgba(0, 0, 0, 0.85);
}

@media (max-width: 1030px) {
  .brochure-mobile-carousel {
    display: block;
    padding-top: var(--space-4, 1rem);
  }

  /* Hide hero panels on mobile — carousel + Key Features replace them.
     Lived here (not only styles.css) so embed pages work when main CSS is CDN-stale. */
  .product-brochure__panels {
    display: none;
  }
}