/* /projects/harpa-laser — page-specific styles. Mirrors the
 * design handoff inline CSS from imaginando-3-0/project/Imaginando
 * Harpa Laser.html. All classes are prefixed `p…` (project detail)
 * so they don't collide with the global / other-page chrome.
 *
 * Sections:
 *   .phero            — full-bleed image hero with gradient overlay
 *   .pfeatured-at     — 5-cell brand logo strip
 *   .pintro           — small mono label + display lede w/ dropcap
 *   .pgallery / .big-shot — full-width 21:10 figure + pill caption
 *   .pworks           — 5-step "how it works" list
 *   .pbmw             — afterlife section
 *   .pstreet          — 2-col figure + text + 3-cell stats
 *   .plessons         — wrapper for the shared `.values` / `.vcard` grid
 *   .pcredits         — 2-col eyebrow+h3 + dl credits list
 *   .pnext            — next-project card (img / text two-up)
 *
 * `.values` / `.vcard` chrome lives in public/style.css (hoisted
 * from about-us.css in this commit).
 */

/* ---------- Phero — full-bleed project hero ---------- */

/* The phero is a layered hero: background image + gradient overlay +
 * text/meta grid sitting on top. Designed to feel like a poster: the
 * page lifts straight into the photo, the rest of the page reflows
 * underneath. `isolation: isolate` keeps the gradient overlay from
 * leaking out of its own stacking context. */
.phero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  padding: 36px 0 64px;
  border-bottom: 0.5px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.phero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.phero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
/* Dual-gradient overlay: radial darkens corners + linear darkens
 * top/bottom so the text + crumbs stay legible regardless of where
 * the focal point of the photo falls. Light-mode override flips both
 * to the page background tone so the photo still reads against the
 * lighter body. */
.phero-grad {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(10, 10, 12, 0.45) 65%, rgba(10, 10, 12, 0.95) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.15) 35%, rgba(10, 10, 12, 0.85) 100%);
}
html[data-theme="light"] .phero-grad,
:root[data-theme="light"] .phero-grad {
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(244, 241, 234, 0.35) 60%, rgba(244, 241, 234, 0.92) 100%),
    linear-gradient(180deg, rgba(244, 241, 234, 0.4) 0%, rgba(244, 241, 234, 0.1) 35%, rgba(244, 241, 234, 0.85) 100%) !important;
}
.phero-inner { position: relative; }

.phero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 980px) {
  .phero-grid { grid-template-columns: 1fr; gap: 32px; }
}

.phero-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  /* `.mono` paints fg-dim by default; force it so the eyebrow keeps
   * its tone over the bright/dark photo background. */
  color: var(--fg-dim) !important;
}

/* H1: bigger clamp than `.about-head h1` — this is the page's hero
 * statement against a photo backdrop, so it earns the extra weight.
 * The text-shadow keeps it legible on bright cover images. */
.phero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(64px, 10vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
.phero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
html[data-theme="light"] .phero h1,
:root[data-theme="light"] .phero h1 {
  text-shadow: none;
}

.phero-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 50ch;
  margin: 32px 0 0;
  text-wrap: pretty;
}
.phero-lede em {
  font-style: italic;
  font-weight: 400;
}

/* Frosted-card meta sidebar — dl of dashed-separated term/def rows.
 * `display: block` resets the sitewide `.phero-meta` (a 4-col stats grid
 * in style.css) that otherwise traps this whole <dl> in a 25%-wide column. */
.phero-meta {
  display: block;
  border: 0.5px solid var(--line-strong);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 20px;
  align-self: end;
}
.phero-meta dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.phero-meta dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 0.5px solid var(--line);
  align-items: baseline;
}
.phero-meta dl > div:last-child { border-bottom: 0; }
.phero-meta dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0;
}
.phero-meta dd {
  margin: 0;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.4;
}

/* ---------- Featured-at brand strip ---------- */

.pfeatured-at {
  padding: 48px 0;
  border-bottom: 0.5px solid var(--line);
}
.pfa-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.pfa-head .mono {
  color: var(--fg-faint);
  letter-spacing: 0.12em;
  flex: none;
}
.pfa-head .pfa-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.pfa-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: center;
}
@media (max-width: 900px) {
  .pfa-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .pfa-grid { grid-template-columns: repeat(2, 1fr); }
}
.pfa-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 8px;
  color: var(--fg);
}
.pfa-cell img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  /* SVGs ship with their own multi-tone fills. Dark theme inverts
   * black-on-white logos so they stay legible against the page bg;
   * light theme keeps them as designed. The galp logo ships in brand
   * green — force-monochrome it so the strip reads as a row, not a
   * brand collage. */
  opacity: 0.9;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.pfa-cell:hover img { opacity: 1; }

:root[data-theme="dark"] .pfa-cell img { filter: invert(1); }
html[data-theme="light"] .pfa-cell img,
:root[data-theme="light"] .pfa-cell img { filter: none; opacity: 0.85; }
html[data-theme="light"] .pfa-cell:hover img,
:root[data-theme="light"] .pfa-cell:hover img { opacity: 1; }

/* Galp ships in brand green — force monochrome so it sits in the
 * row instead of jumping out. */
.pfa-cell img[src*="logo-galp"] {
  filter: brightness(0) invert(1) !important;
  opacity: 0.7 !important;
}
html[data-theme="light"] .pfa-cell img[src*="logo-galp"],
:root[data-theme="light"] .pfa-cell img[src*="logo-galp"] {
  filter: brightness(0) !important;
  opacity: 0.75 !important;
}
.pfa-cell:hover img[src*="logo-galp"] { opacity: 1 !important; }

/* Per-logo optical sizing — proportions differ across brands. */
.pfa-cell img[src*="logo-braga"] { max-height: 78px; }
.pfa-cell img[src*="logo-bmw"] { max-height: 72px; }
.pfa-cell img[src*="logo-tedx"] { max-height: 32px; }

/* ---------- Intro — dropcap lede ---------- */

.pintro { padding: 80px 0; }
.pintro-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .pintro-row { grid-template-columns: 1fr; gap: 18px; }
}
.pintro-row > .mono {
  padding-top: 14px;
  color: var(--fg-faint);
}
.pintro-lede {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
  max-width: 30ch;
}
.pintro-lede em {
  font-style: italic;
  font-weight: 500;
}
.pintro-lede strong {
  color: var(--accent);
  font-weight: 500;
}
.dropcap {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 0.85;
  color: var(--accent);
  margin-right: 4px;
}

/* ---------- Big-shot full-width gallery ---------- */

.pgallery { padding: 0 0 96px; }
.big-shot {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 0.5px solid var(--line);
  position: relative;
  background: #000;
  aspect-ratio: 21 / 10;
}
.big-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Frosted pill caption pinned to the bottom-left — always reads on
 * the dark image regardless of theme. */
.big-shot figcaption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #f4f1ea;
  font-size: 13px;
  max-width: calc(100% - 48px);
}
.big-shot figcaption .mono {
  color: var(--accent) !important;
  letter-spacing: 0.14em;
  font-size: 10.5px;
}
@media (max-width: 720px) {
  .big-shot { aspect-ratio: 4 / 5; }
  .big-shot figcaption {
    left: 14px;
    bottom: 14px;
    font-size: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    border-radius: 10px;
  }
}

/* ---------- How it works — 5 step list ---------- */

.pworks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
.pworks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0.5px solid var(--line);
  max-width: 900px;
}
.pworks-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 0.5px solid var(--line);
  align-items: start;
}
@media (max-width: 720px) {
  .pworks-list li { grid-template-columns: 1fr; gap: 8px; }
}
.pworks-list li .mono {
  color: var(--fg-faint);
  padding-top: 6px;
  letter-spacing: 0.12em;
}
.pworks-list li h4 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--fg);
  text-wrap: balance;
}
.pworks-list li h4 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.pworks-list li p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 54ch;
  text-wrap: pretty;
}

/* ---------- BMW — afterlife section ---------- */

/* Shared figure chrome — black background, hover-scale image, pill
 * caption pinned bottom-left. Used by `.pbmw-large`, `.pbmw-room`,
 * and `.pstreet-fig`. */
.pbmw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.pbmw-large,
.pbmw-room,
.pstreet-fig {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 0.5px solid var(--line);
  background: #000;
  position: relative;
}
.pbmw-large { aspect-ratio: 16 / 9; }
.pbmw-room { aspect-ratio: 21 / 9; margin-top: 48px; }
.pbmw-large img,
.pbmw-room img,
.pstreet-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pbmw-large:hover img,
.pbmw-room:hover img,
.pstreet-fig:hover img { transform: scale(1.03); }

.pbmw-large figcaption,
.pbmw-room figcaption,
.pstreet-fig figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #f4f1ea;
  font-size: 12.5px;
  max-width: fit-content;
}
.pbmw-large figcaption .mono,
.pbmw-room figcaption .mono,
.pstreet-fig figcaption .mono {
  color: var(--accent) !important;
  letter-spacing: 0.12em;
  font-size: 10px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .pbmw-large figcaption,
  .pbmw-room figcaption,
  .pstreet-fig figcaption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-radius: 10px;
  }
}

/* ---------- Street — where it began ---------- */

.pstreet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .pstreet-grid { grid-template-columns: 1fr; gap: 32px; }
}
.pstreet-fig { aspect-ratio: 3 / 4; }
.pstreet-text p {
  margin: 0 0 22px;
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.65;
  max-width: 46ch;
  text-wrap: pretty;
}
.pstreet-text p strong { color: var(--fg); font-weight: 500; }
.pstreet-stats {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 0.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card, var(--bg-2));
}
.pstreet-stats li {
  padding: 18px;
  border-right: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pstreet-stats li:last-child { border-right: 0; }
.pstreet-stats .num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg);
}
.pstreet-stats .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- Credits ---------- */

.pcredits-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .pcredits-grid { grid-template-columns: 1fr; gap: 24px; }
}
.pcredits-grid h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch;
}
.pcredits-grid h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.creditslist {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0.5px solid var(--line);
}
.creditslist > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--line);
}
@media (max-width: 600px) {
  .creditslist > div { grid-template-columns: 1fr; gap: 4px; }
}
.creditslist dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0;
}
.creditslist dd {
  margin: 0;
  font-size: 15px;
  color: var(--fg);
}

/* ---------- Next-project card ---------- */

.pnext { padding: 80px 0 120px; }
.pnext-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 0.5px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card, var(--bg-2));
  position: relative;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pnext-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
@media (max-width: 900px) {
  .pnext-card { grid-template-columns: 1fr; }
}
.pnext-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #000;
}
.pnext-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s ease;
}
.pnext-card:hover .pnext-media img { transform: scale(1.04); }
.pnext-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 14, 18, 0) 70%, rgba(14, 14, 18, 0.5) 100%);
  pointer-events: none;
}
.pnext-text {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
@media (max-width: 900px) {
  .pnext-text { padding: 32px 24px; }
}
.pnext-text h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 8px 0 0;
  text-wrap: balance;
}
.pnext-text h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.pnext-text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 46ch;
}
.pnext-text .btn {
  align-self: flex-start;
  margin-top: 8px;
}