/*
 * Real project fonts (files present in this folder):
 *   PPNeueMontreal-Book.otf     -> weight 400 ("Book" is PP Neue Montreal's regular text weight)
 *   PPNeueMontreal-Medium.otf   -> weight 500
 *   Silka Mono.ttf              -> weight 400
 */

@font-face {
  font-family: "PP Neue Montreal";
  src: url(https://code-components.website-files.com/6ac08d99e205282d99d7a667%2Fmodule%2Fcd21cf351f4da50cf75d-PPNeueMontreal-Book.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url(https://code-components.website-files.com/6ac08d99e205282d99d7a667%2Fmodule%2F0f34f4714f1b26e0dedc-PPNeueMontreal-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Silka Mono";
  src: url("https://code-components.website-files.com/6ac08d99e205282d99d7a667%2Fmodule%2Fef34305747d8d63cb745-Silka%20Mono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Reset (component runs in a Webflow shadow DOM) ───────── */
.psl-root,
.psl-root *,
.psl-root *::before,
.psl-root *::after {
  box-sizing: border-box;
}

/* ── Tokens ───────────────────────────────────────────────── */
.psl-root {
  --psl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --psl-font: "PP Neue Montreal", "Inter", "Helvetica Neue", Arial, sans-serif;
  --psl-mono: "Silka Mono", "Space Mono", ui-monospace, monospace;
  --psl-pad: 2rem;
  /* Override this if your navbar has a different height */
  --psl-nav-height: 107px;

  /* No top padding — card flush with navbar; 2rem on left, right, bottom */
  padding: 0 var(--psl-pad) 0;
  height: calc(100vh - var(--psl-nav-height));
  font-family: var(--psl-font);
}

/* ── Card shell ───────────────────────────────────────────── */
.psl-card {
  position: relative;
  width: 100%;
  /* Fill psl-root minus its 2rem top + bottom padding */
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Slides ───────────────────────────────────────────────── */
.psl-slide {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.psl-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* ── Bottom gradient ──────────────────────────────────────── */
.psl-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.18) 42%,
    transparent 68%
  );
  pointer-events: none;
}

/* ── Text block ───────────────────────────────────────────── */
.psl-text {
  position: absolute;
  bottom: 64px;
  left: 108px;
  color: #fff;
}

.psl-name,
.psl-location {
  margin: 0;
  font-family: "Ppneuemontreal Book", Arial, sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.01px;
  line-height: 1;
}

.psl-location {
  margin-bottom: 14px;
}

.psl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-family: "Ppneuemontreal Book", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: color 0.3s var(--psl-ease);
}

.psl-link:hover { color: #fff; }

.psl-diag {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.psl-link:hover .psl-diag {
  transform: rotate(45deg);
}


/* ── Tablet & down ────────────────────────────────────────── */
/* On narrow (portrait) viewports the card must NOT fill the full
   screen height — that turns the frame into a tall portrait box and
   `object-fit: cover` then crops the landscape photo into a portrait
   sliver. Instead we drop the viewport-height lock and give the card a
   proportional landscape aspect-ratio so the full image scales down and
   stays visible (matches the Figma mobile reference). */
@media (max-width: 991px) {
  .psl-root {
    --psl-nav-height: 84px;
    height: auto;
  }

  .psl-card {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .psl-text {
    left: 2rem;
    bottom: 2rem;
  }

  .psl-name,
  .psl-location {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
  }

  .psl-link {
    font-size: 0.6rem;
    gap: 0.24rem;
  }

  .psl-diag {
    width: 7.8px;
    height: 7.8px;
  }
}

/* ── Mobile landscape ─────────────────────────────────────── */
@media (max-width: 767px) {
  .psl-text {
    left: 1.5rem;
    bottom: 1.5rem;
  }

  .psl-name,
  .psl-location {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .psl-link {
    font-size: 0.6rem;
    gap: 0.24rem;
  }

  .psl-diag {
    width: 7.8px;
    height: 7.8px;
  }
}

/* ── Mobile portrait ──────────────────────────────────────── */
@media (max-width: 478px) {
  .psl-root { --psl-pad: 1.25rem; }

  .psl-text {
    left: 1rem;
    bottom: 1rem;
  }

  .psl-name,
  .psl-location {
    font-size: clamp(1.25rem, 6vw, 1.5rem);
  }

  .psl-link {
    font-size: 0.54rem;
    gap: 0.24rem;
  }

  .psl-diag {
    width: 7.8px;
    height: 7.8px;
  }
}