/* ═══════════════════════════════════════════════════════════════════
   Joel Portfolio Blocks – v0.3.4
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Base blocks ─────────────────────────────────────────────────── */
/*
 * Blocks intentionally have no margin/padding defaults.
 * Spacing is the theme's responsibility.
 */
.psc-full,
.psc-half,
.psc-center,
.psc-slider {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  position: relative;
  /* Prevent stacking context from bleeding over fixed/sticky headers */
  isolation: isolate;
  z-index: 0;
}

.psc-half {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  align-items: start;
}
.psc-half > .psc-media,
.psc-half > .psc-slider { width: 100%; min-width: 0; }
/* Hide spurious whitespace nodes WP may inject */
.psc-half > p,
.psc-half > br { display: none !important; }

.psc-center { display: flex; justify-content: center; align-items: center; }
.psc-center .psc-media {
  width: min(var(--psc-center-width, 60%), 100%);
  margin-inline: auto;
}

/* ─── Media wrapper ───────────────────────────────────────────────── */
.psc-media { width: 100%; }

.psc-inner {
  position: relative;
  width: 100%;
  height: var(--psc-height-desktop, 95svh);
  overflow: hidden;
}
.psc-inner.has-ratio  { height: auto; aspect-ratio: var(--psc-ratio, 4 / 5); }
.psc-inner.is-fixed   { height: var(--psc-height-desktop, 95svh); }

.psc-center .psc-inner.is-fixed  { height: var(--psc-center-height, var(--psc-height-desktop, 95svh)); }
.psc-center .psc-inner.has-ratio { aspect-ratio: var(--psc-ratio, 4 / 5); height: auto; }

/* ─── Media elements ──────────────────────────────────────────────── */
.psc-inner img,
.psc-inner .bd-video,
.psc-slider-slide img,
.psc-slider-slide .bd-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── Blur-to-sharp loading ───────────────────────────────────────── */
/*
 * .jpb-will-load  — applied by JS before viewport entry (hidden + blurred)
 * .jpb-loaded     — applied when asset fires load/canplay → smooth reveal
 * .jpb-fast       — added alongside .jpb-loaded for cached assets
 *
 * Hero block (data-jpb-hero) is always fully visible — no animation.
 */
[data-jpb-hero] .psc-inner img,
[data-jpb-hero] .psc-inner .bd-video,
[data-jpb-hero] .psc-slider-slide img,
[data-jpb-hero] .psc-slider-slide .bd-video {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.psc-inner img.jpb-will-load,
.psc-inner .bd-video.jpb-will-load,
.psc-slider-slide img.jpb-will-load,
.psc-slider-slide .bd-video.jpb-will-load {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.05);
  will-change: opacity, filter, transform;
}

.psc-inner img.jpb-loaded,
.psc-inner .bd-video.jpb-loaded,
.psc-slider-slide img.jpb-loaded,
.psc-slider-slide .bd-video.jpb-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition:
    opacity   0.6s  cubic-bezier(0.22, 1, 0.36, 1),
    filter    0.6s  cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: auto; /* release after reveal */
}

.psc-inner img.jpb-loaded.jpb-fast,
.psc-inner .bd-video.jpb-loaded.jpb-fast,
.psc-slider-slide img.jpb-loaded.jpb-fast,
.psc-slider-slide .bd-video.jpb-loaded.jpb-fast {
  transition-duration: 0.18s;
}

/* ─── Slider ──────────────────────────────────────────────────────── */
.psc-slider        { padding: 0; overflow: hidden; }
.psc-half .psc-slider { padding: 0; margin: 0; }

.psc-slider-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: var(--psc-height-desktop, 95svh);
}
.psc-slider-inner.has-ratio {
  height: auto;
  aspect-ratio: var(--psc-ratio, 16 / 9);
}

/* Track — JS sets transform, flex layout set at runtime */
.psc-slider-track {
  height: 100%;
  cursor: grab;
}
.psc-slider-track:active { cursor: grabbing; }

.psc-slider-slide {
  overflow: hidden;
  /* position/inset overridden by JS to relative/auto in flex mode */
  position: absolute;
  inset: 0;
}

/* Disable text selection while dragging */
.psc-slider { user-select: none; -webkit-user-select: none; }

/* ─── Overlay actions (editor only) ──────────────────────────────── */
.jpb-overlay-actions {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  display: flex;
  justify-content: center;
  z-index: 3;
}
.jpb-overlay-actions .components-button { box-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* ─── Editor block thumbnails ─────────────────────────────────────── */
.jpb-editor-block {
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.jpb-editor-block > div { width: 100%; }

.jpb-thumb-img,
.jpb-editor-block .bd-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .psc-half {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .psc-inner.is-fixed {
    height: var(--psc-height-mobile, 80svh);
  }
  .psc-center .psc-media { width: 100%; }
  .psc-center .psc-inner.is-fixed {
    height: var(--psc-center-mobile-height, var(--psc-height-mobile, 80svh));
  }
  .psc-slider-inner { height: var(--psc-height-mobile, 80svh); }
  .psc-slider-inner.has-ratio { height: auto; }
}

/* ─── Text slot ───────────────────────────────────────────────────── */
.jpb-text-slot {
  display: block;
  width: 100%;
  padding-top:    var(--jpb-text-padding-top,    var(--jpb-text-padding, 20px));
  padding-right:  var(--jpb-text-padding-right,  var(--jpb-text-padding, 20px));
  padding-bottom: var(--jpb-text-padding-bottom, var(--jpb-text-padding, 20px));
  padding-left:   var(--jpb-text-padding-left,   var(--jpb-text-padding, 20px));
  box-sizing: border-box;
}
.jpb-text-slot--fixed {
  height: var(--psc-height-desktop, 95svh);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.3) transparent;
}
.jpb-text-slot--auto,
.jpb-text-slot--content { height: auto; }

.jpb-text-content { width: 100%; }
.psc-half > .jpb-text-slot { margin: 0; }

@media (max-width: 767px) {
  .jpb-text-slot--fixed { height: var(--psc-height-mobile, 80svh); }
}

/* ─── sizeMode "content" ──────────────────────────────────────────── */
/* Text side drives height; media side stretches to match. */
.psc-half.jpb-size-content { align-items: stretch; }
.psc-half.jpb-size-content > .psc-media { height: 100%; }
.psc-half.jpb-size-content > .psc-media .psc-inner.is-fixed {
  height: 100%;
  min-height: 0;
}

/* ─── Border system ───────────────────────────────────────────────── */
/*
 * PHP/JS sets inline CSS vars, e.g.:
 *   style="--jpb-border-width:1px; --jpb-border-top:1; ..."
 * Color is always currentColor (inherits from theme text color).
 */
.jpb-border,
.psc-media.jpb-border,
.psc-slider.jpb-border,
.jpb-text-slot.jpb-border {
  --jpb-border-width:  1px;
  --jpb-border-top:    0;
  --jpb-border-right:  0;
  --jpb-border-bottom: 0;
  --jpb-border-left:   0;

  border-style: solid;
  border-color: currentColor;
  border-top-width:    calc(var(--jpb-border-top,    0) * var(--jpb-border-width, 1px));
  border-right-width:  calc(var(--jpb-border-right,  0) * var(--jpb-border-width, 1px));
  border-bottom-width: calc(var(--jpb-border-bottom, 0) * var(--jpb-border-width, 1px));
  border-left-width:   calc(var(--jpb-border-left,   0) * var(--jpb-border-width, 1px));
  box-sizing: border-box;
}