/* ==========================================================================
   Project page layout
   Desktop: section heading in the left third, text in the right two thirds.
   Hero image and videos run full width; still images, pairs and photo
   galleries sit in the text columns. Tablet and phone: one column.
   ========================================================================== */

:root {
  --pl-reading: 42rem;   /* about 680px: comfortable reading width */
  --pl-tile-bg: #f2f2f0; /* background behind mockups and square tiles */
}

/* One vertical stack with one rhythm; every block shares the same edges. */
.pl-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xl);
}
.pl-layout > * { margin: 0; }

/* ---- Media ------------------------------------------------------------- */
.pl-hero .p-details-thumb-wrap { width: 100%; margin-bottom: 0; }
.pl-media .pl-img,
.pl-hero .p-details-thumb { display: block; width: 100%; height: auto; }

.pl-frame { position: relative; width: 100%; background: #000; }
.pl-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Two square images side by side */
.pl-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

/* Square tiles: mockups saved on white blend into the tile colour */
.pl-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pl-tile-bg);
}
.pl-tile .pl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Device mockups (laptops, phones, print): trimmed to the device and
   centred in a light tile with the same padding on every side, so
   laptops and phones carry similar visual weight and never touch the
   edges. Mockups saved on white blend into the tile colour. */
.pl-mockup-frame {
  position: relative;
  background: var(--pl-tile-bg);
  --pl-x: 11%;    /* space at the sides */
  --pl-y: 11%;    /* space above and below */
}
/* Wide devices (laptops) get less space around them and tall ones
   (phones) more, so a laptop and phone side by side carry similar weight */
.pl-tile.pl-mockup-wide { --pl-x: 7%; --pl-y: 7%; }
.pl-tile.pl-mockup-tall { --pl-x: 12%; --pl-y: 12%; }
.pl-still.pl-mockup-frame {
  aspect-ratio: 16 / 9;
  --pl-x: 12%;
  --pl-y: 10.5%;
}
/* The image is placed with fixed insets inside the tile rather than
   percentage heights, which Safari on iPhone does not always resolve */
.pl-mockup-frame .pl-mockup {
  position: absolute;
  top: var(--pl-y);
  left: var(--pl-x);
  width: calc(100% - 2 * var(--pl-x));
  height: calc(100% - 2 * var(--pl-y));
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: none;
}

/* ---- Galleries --------------------------------------------------------- */
.pl-track {
  display: flex;
  gap: var(--space-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pl-track::-webkit-scrollbar { display: none; }
.pl-track:focus-visible { outline: 2px solid var(--_new-portfolio-colours---portfolio-blue); outline-offset: 4px; }
.pl-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
.pl-slide-media { position: relative; overflow: hidden; background: var(--pl-tile-bg); }
.pl-slide-media .pl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Square galleries show two at a time on wider screens */
@media screen and (min-width: 768px) {
  .pl-carousel-square .pl-slide { flex-basis: calc((100% - var(--space-m)) / 2); }
}

.pl-controls {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
  font-family: Inter, sans-serif;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.pl-controls[hidden] { display: none; }
.pl-prev,
.pl-next {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background: #fff;
  color: var(--text-strong);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.pl-prev::before,
.pl-next::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.pl-prev::before { transform: translateX(2px) rotate(-135deg); }
.pl-next::before { transform: translateX(-2px) rotate(45deg); }
.pl-prev:disabled,
.pl-next:disabled { opacity: 0.35; cursor: default; }
.pl-count { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Project details row ----------------------------------------------- */
.pl-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m) var(--space-xl);
}
.pl-meta .p-details-info-text {
  margin-bottom: 0;
  white-space: normal;      /* old rule kept values on one line, so long names ran into the next column */
  overflow: visible;
  overflow-wrap: break-word;
}
.pl-meta .p-details-info-title { margin-bottom: var(--space-2xs); }

/* Below tablet: one row per detail, label on the left and value on the right,
   separated by thin lines. Shorter than stacking, and nothing can collide. */
@media screen and (max-width: 767px) {
  .pl-meta {
    grid-template-columns: 1fr;
    gap: 0;
    border-bottom: 1px solid rgba(12, 4, 7, 0.12);
  }
  .pl-meta .p-details-info {
    display: grid;
    grid-template-columns: minmax(7.5rem, 32%) 1fr;
    column-gap: var(--space-s);
    align-items: baseline;
    padding: var(--space-xs) 0;
    border-top: 1px solid rgba(12, 4, 7, 0.12);
  }
  .pl-meta .p-details-info-title { margin-bottom: 0; font-size: var(--text-body); }
}

/* ---- Text -------------------------------------------------------------- */
.pl-text {
  font-family: Merriweather, serif;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: 0 0 var(--space-m);
}
.pl-text:last-child { margin-bottom: 0; }
.pl-body { max-width: var(--pl-reading); }
.pl-head .section-heading { margin: 0 0 var(--space-s); }

/* Responsibilities: label matches Project / Organisation / Industry;
   items shown as outlined tags */
.pl-roles { margin-top: var(--space-l); }
.pl-label {
  font-family: Inter, sans-serif;
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: -.03px;
  color: var(--title-black);
  margin: 0 0 var(--space-xs);
}
.pl-roles .np-list-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-roles .np-list-item {
  list-style: none;
  font-size: var(--text-small);
  line-height: 1.2;
  color: var(--text-strong);
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  padding: 0.45em 0.95em;
}

.more-projects-btn { align-self: center; margin-bottom: 0; }

/* ---- Desktop: split layout --------------------------------------------- */
@media screen and (min-width: 992px) {
  /* Same three columns as the details row, so all edges line up */
  .pl-block {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-xl);
    align-items: start;
  }
  .pl-head { grid-column: 1; }
  .pl-body { grid-column: 2 / 4; }
  .pl-head .section-heading { margin-bottom: 0; }

  /* Stills, pairs and galleries sit in the text columns */
  .pl-media:not(.pl-hero):not(.pl-video),
  .more-projects-btn {
    margin-left: calc((100% - 2 * var(--space-xl)) / 3 + var(--space-xl));
  }
  .more-projects-btn { align-self: flex-start; }
}

/* ---- Tablet and below --------------------------------------------------- */
@media screen and (max-width: 991px) {
  .pl-block,
  .pl-meta { max-width: var(--pl-reading); }
}

/* ---- Phones ------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  .pl-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-track { scroll-behavior: auto; }
}