/* =====================================================================
   Joy-N-Crew — Press Release Carousel
   Self-contained, dependency-free styling.
   ===================================================================== */

:root {
  --prc-bg: #f2f2f2;
  --prc-frame: #2e2e2e;       /* charcoal frame / brackets */
  --prc-ink: #1c1c1c;
  --prc-muted: #9a9a9a;
  --prc-font: "Space Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono",
              "Courier New", monospace;

  --prc-anim: 420ms;          /* 300ms–500ms, no bounce */
  --prc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Active card footprint (drives the corner brackets too) */
  --prc-card-w: 450px;
  --prc-card-h: 330px;
}

/* Reset only inside the component, so it stays integration-friendly */
.prc,
.prc * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.prc {
  position: relative;
  width: 1200px;
  max-width: 100%;
  height: 600px;
  margin: 0 auto;
  background: var(--prc-bg);
  font-family: var(--prc-font);
  color: var(--prc-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  user-select: none;
}

/* ----------------------------- Header ----------------------------- */
.prc__head {
  width: 100%;
  text-align: center;
  padding-top: 46px;
  z-index: 5;
  pointer-events: none;
}

.prc__eyebrow {
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--prc-muted);
  margin-bottom: 14px;
}

.prc__pub {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--prc-ink);
  transition: opacity 200ms ease;
}

/* ------------------------------ Stage ----------------------------- */
.prc__stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: grab;
  touch-action: pan-y;          /* let vertical page scroll through, we handle horizontal */
}

.prc__stage.is-dragging {
  cursor: grabbing;
}

.prc__track {
  position: absolute;
  inset: 0;
  /* cards are absolutely centered inside */
}

/* ------------------------------ Cards ----------------------------- */
.prc__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--prc-card-w);
  /* height is driven by the image's natural ratio to keep proportions */
  /* base transform translate(-50%,-50%) centers it; JS appends offset + scale */
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity, filter;
  transition:
    transform var(--prc-anim) var(--prc-ease),
    opacity var(--prc-anim) var(--prc-ease),
    filter var(--prc-anim) var(--prc-ease);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* No transition while the user is actively dragging -> 1:1 finger tracking */
.prc__track.is-dragging .prc__card {
  transition: none;
}

.prc__card img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* The active card sits closest to the viewer */
.prc__card.is-active {
  z-index: 40;
}

/* ----------------------- Gallery corner brackets ------------------ */
.prc__brackets {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--prc-card-w) + 70px);
  height: calc(var(--prc-card-h) + 70px);
  transform: translate(-50%, -50%);
  z-index: 45;
  pointer-events: none;
}

.prc__bracket {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--prc-frame);
}

.prc__bracket--tl { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.prc__bracket--tr { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; }
.prc__bracket--bl { bottom: 0; left: 0;    border-right: 0; border-top: 0; }
.prc__bracket--br { bottom: 0; right: 0;   border-left: 0;  border-top: 0; }

/* ------------------------------ Footer ---------------------------- */
.prc__foot {
  width: 100%;
  text-align: center;
  padding-bottom: 40px;
  z-index: 5;
}

.prc__year {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--prc-muted);
  margin-bottom: 14px;
}

.prc__link {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--prc-ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--prc-frame);
  transition: opacity 180ms ease, letter-spacing 180ms ease;
  cursor: pointer;
}

.prc__link:hover {
  opacity: 0.6;
  letter-spacing: 0.46em;
}

/* ============================ RESPONSIVE ========================== */

/* Tablet */
@media (max-width: 1024px) {
  .prc {
    width: 100%;
    height: 540px;
    --prc-card-w: 360px;
    --prc-card-h: 264px;
  }
  .prc__pub { font-size: 15px; letter-spacing: 0.28em; }
  .prc__head { padding-top: 38px; }
}

/* Large phone / small tablet */
@media (max-width: 680px) {
  .prc {
    height: 480px;
    --prc-card-w: 280px;
    --prc-card-h: 206px;
  }
  .prc__brackets {
    width: calc(var(--prc-card-w) + 44px);
    height: calc(var(--prc-card-h) + 44px);
  }
  .prc__bracket { width: 18px; height: 18px; }
  .prc__eyebrow { font-size: 10px; letter-spacing: 0.36em; }
  .prc__pub { font-size: 13px; letter-spacing: 0.22em; }
  .prc__year { font-size: 11px; }
  .prc__link { font-size: 10px; letter-spacing: 0.34em; }
}

/* Mobile */
@media (max-width: 440px) {
  .prc {
    height: 430px;
    --prc-card-w: 230px;
    --prc-card-h: 169px;
  }
  .prc__head { padding-top: 28px; }
  .prc__foot { padding-bottom: 26px; }
  .prc__pub { font-size: 12px; letter-spacing: 0.16em; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .prc__card { transition-duration: 1ms; }
}