/* MBCC Dividers — "The Photo Pile". Built by mbcc-dividers.js; markup from the [mbcc_divider] shortcode. */

/* ---- self-hosted marker faces (woff2 subsets: only the glyphs the captions use) ---- */
@font-face { font-family: "MBD Permanent Marker"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/permanent-marker.woff2") format("woff2"); }
@font-face { font-family: "MBD Gochi Hand"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/gochi-hand.woff2") format("woff2"); }

/* ---- host ------------------------------------------------------------------------------ */
.mbcc-divider {
  --mbd-height: clamp(150px, 15vw, 240px);
  position: relative;
  height: var(--mbd-height);
  margin: -1px 0;            /* hide hairline seams between rows */
  pointer-events: none;
  overflow-x: clip;          /* never a horizontal scrollbar */
  overflow-y: visible;       /* prints spill into both neighbours */
  z-index: 2;
}
@media (max-width: 639px) { .mbcc-divider { --mbd-height: clamp(130px, 36vw, 170px); } }
/* Overlap mode: sits over the bottom of the section above; stays transparent so it shows through. */
.mbcc-divider[data-overlap="1"] {
  margin: calc(-1 * var(--mbd-height)) 0 -1px;
  background: transparent !important;
}
/* Half overlap: only the top half sits over the section above, so the seam lands on its bottom edge
   and the pile never covers the first lines of the section below. */
.mbcc-divider[data-overlap="half"] {
  margin: calc(-0.5 * var(--mbd-height)) 0 -1px;
  background: transparent !important;
}
.mbcc-divider__fill { position: absolute; left: 0; right: 0; top: 50%; bottom: -1px; }
:is(.mbcc-divider[data-overlap="1"], .mbcc-divider[data-overlap="half"]) .mbcc-divider__fill { bottom: -2px; }

/* The divider's own WPBakery row: edge to edge, no spacing, content floats over both neighbours. */
.mbcc-divider-row,
.vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .mbcc-divider:only-child) {
  position: relative; z-index: 3; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
  min-height: 0 !important; border: 0 !important; background: none !important; overflow: visible !important;
}
:is(.mbcc-divider-row, .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .mbcc-divider:only-child)) :is(.wpb_column, .vc_column-inner, .wpb_wrapper) {
  padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; overflow: visible !important;
}

/* ---- one print ------------------------------------------------------------------------- */
.pp {
  position: absolute;
  box-sizing: border-box;
  border-radius: 2px;
  background-color: #FBFAF6;
  background-image:
    linear-gradient(150deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 40%, rgba(40, 30, 60, .06) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .35 0 0 0 .09 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 120px 120px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .35),
    0 5px 9px rgba(0, 0, 0, .4),
    0 16px 26px -8px rgba(0, 0, 0, .6),
    0 0 26px -6px rgba(123, 47, 255, .35);  /* faint neon bounce from the room */
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  contain: layout paint style;
}
.pp--warm { background-color: #FBF7EE; }
.pp--cool { background-color: #F6F7FB; }
.pp__photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #191426 radial-gradient(circle at 30% 30%, rgba(255, 43, 214, .35), rgba(0, 212, 255, .18) 55%, rgba(25, 20, 38, 0) 80%);
}
.pp--pol .pp__photo { height: auto; aspect-ratio: 1 / 0.94; }
.pp__photo::after {             /* print gloss + a touch of vignette */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .28) 100%);
  pointer-events: none;
}
.pp__photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease-out;
  filter: saturate(1.08) contrast(1.03);
}
.pp__photo img.is-in { opacity: 1; }

/* ---- neon tape ----------------------------------------------------------------------- */
.pp__tape {
  position: absolute;
  top: -6%;
  width: 34%;
  height: 11%;
  min-height: 12px;
  opacity: .82;
  border-radius: 1px;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.tape-cyan   { background: linear-gradient(180deg, rgba(120, 236, 255, .95), rgba(0, 212, 255, .85)); box-shadow: 0 0 12px rgba(0, 212, 255, .55); }
.tape-pink   { background: linear-gradient(180deg, rgba(255, 125, 232, .95), rgba(255, 43, 214, .85)); box-shadow: 0 0 12px rgba(255, 43, 214, .55); }
.tape-purple { background: linear-gradient(180deg, rgba(170, 120, 255, .95), rgba(123, 47, 255, .85)); box-shadow: 0 0 12px rgba(123, 47, 255, .55); }

/* ---- handwritten caption on the instant-print strip ------------------------------------ */
.pp__ink {
  position: absolute;
  left: 7%; right: 7%;
  bottom: 0;
  height: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--ink-rot, 0deg));
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  text-transform: none;
  letter-spacing: 0;
}
.pp__ink > .t { display: inline-block; position: relative; }
.f-marker { font-family: "MBD Permanent Marker", "Permanent Marker", "Comic Sans MS", cursive; }
.f-gochi  { font-family: "MBD Gochi Hand", "Gochi Hand", "Comic Sans MS", cursive; }
.ink-black  { color: #17141F; }
.ink-pink   { color: #D4149F; }
.ink-blue   { color: #1D4ED8; }
.ink-purple { color: #6A1FD6; }

.pp__doodle {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.pp__doodle--under { left: -2%; right: -2%; width: 104%; height: .3em; bottom: -.28em; }
.pp__doodle--circle { left: -10%; top: -26%; width: 120%; height: 150%; }
.pp__doodle--arrow { right: -1.15em; bottom: -.4em; width: 1em; height: .85em; }
.pp__doodle--heart { display: inline-block; position: static; width: .75em; height: .75em; vertical-align: -.08em; margin-left: .14em; fill: currentColor; stroke: none; }
.pp__doodle--star { left: -.9em; top: -.45em; width: .8em; height: .8em; }

@media (prefers-reduced-motion: reduce) {
  .pp { will-change: auto; }
  .pp__photo img { transition: none; }
}