/* ============================================================
   HP Stripe System
   Source: HP Brand Visual Identity guide + supplied vector files
   in /assets/stripes/ (stripe-100.png, stripe-500.png, stripe-1000.png).

   - Stripes stem from the HP logo letterforms (20° slant).
   - Three scales: 100% (thin), 500% (medium), 1000% (large).
   - 100% stripes ARE ALWAYS BLUE. Cannot hold images.
   - 500% / 1000% can hold images and pair with 100% stripes.
   - Only product photography can overlap blue stripes.
   - One scale per layout (unless one stripe is used as an image).
   - Max counts per layout: 3× 100%, 2× 500%, 2× 1000%.
   - The larger the layout, the larger the stripe.
   - The higher the text volume, the smaller the stripe.

   The .stripe-bg-* classes set a slide-sized stripe pattern as background.
   For more bespoke compositions, layer a stripe PNG via <img> with
   absolute positioning instead.
   ============================================================ */

.stripe-bg-100  { background: #fff url("assets/stripes/stripe-100.png") right center / contain no-repeat; }
.stripe-bg-500  { background: #fff url("assets/stripes/stripe-500.png") right center / contain no-repeat; }
.stripe-bg-1000 { background: #fff url("assets/stripes/stripe-1000.png") right center / cover no-repeat; }

/* ---- Legacy CSS stripes (kept for non-PDF environments) ---- */
.stripe-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hp-stripe {
  position: absolute;
  background: var(--hp-electric, #0249D6);
  transform: rotate(-20deg);
  transform-origin: center center;
  pointer-events: none;
}
.hp-stripe.s-100  { width: 14px;  height: 200%; top: -50%; }
.hp-stripe.s-500  { width: 70px;  height: 200%; top: -50%; }
.hp-stripe.s-1000 { width: 140px; height: 200%; top: -50%; }

/* ---- Stripe-as-image variants ---- */
.hp-stripe.with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Helpers for positioning ---- */
.hp-stripe.col-1  { left: 8%; }
.hp-stripe.col-2  { left: 22%; }
.hp-stripe.col-3  { left: 36%; }
.hp-stripe.col-4  { left: 50%; }
.hp-stripe.col-5  { left: 64%; }
.hp-stripe.col-6  { left: 78%; }
.hp-stripe.col-7  { left: 92%; }

/* ---- Stripe over photo — only product photos may overlap blue stripes ---- */
.stripe-over-photo {
  position: relative;
  z-index: 2;
}