/* ==========================================================================
   Project header — the standard header of every Project Detail page
   (components/project-header.js; approved as concept P-01).
   Inside the site design language (body.site-ui): page dark,
   sentence-case title, outlined labels. Only design-system tokens; no
   frames or lines. Page spacing (top / bottom): pages/project.css.

   Desktop (≥1200): the 4-column grid split in two —
     cols 1–2  breadcrumbs (top) · category, title, labels ·
               the project information at the bottom, level with the image
     cols 3–4  the cover as an 800 × 465 thumbnail (at 1600px), at the bottom
   Below 1200 the text stacks above the image (same shape).
   ========================================================================== */

/* the block on the page dark */
.ph {
  position: relative;
  z-index: 1;
  padding-block: 40px;
  background: var(--c-inverse);
  color: var(--c-on-inverse);
}

/* the light: a soft, static glow from the bottom-left corner in the cover's
   own colour (--ph-glow, set by project-header.js), after the homepage
   hero's light — no lines, no pattern, no cursor response. Layered radial
   falloff so it has no edge; fades in once the colour is known. */
.ph::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: min(62%, 1100px);
  height: 85%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 0% 100%,
      color-mix(in srgb, var(--ph-glow, transparent) 48%, transparent) 0%,
      color-mix(in srgb, var(--ph-glow, transparent) 22%, transparent) 38%,
      color-mix(in srgb, var(--ph-glow, transparent) 7%, transparent) 62%,
      transparent 82%);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

.ph.has-glow::before { opacity: 1; }

.ph__grid {
  position: relative;
  z-index: 1;                              /* above the light */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ------------------------------------------------------------------ text */

.ph__text {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  padding: 0 var(--col-pad);
}

/* breadcrumbs → category: 100px (with the 50px heading) */
.ph__intro {
  margin-top: 100px;
}

/* the category — the section-label style (mono 13px, muted) */
.ph__kicker {
  color: var(--c-muted);
}

/* side by side with the cover (≥1200px), the heading stops 100px short of
   it: the text column ends exactly where the image begins, so a long
   heading would otherwise run right up to the image. The words wrap onto
   the next line instead; the size stays headline-lg. */
.ph__title {
  max-width: calc(100% - 100px);
  margin-top: 24px;
}

/* the services: outlined labels in a row, 36px under the heading */
.ph__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;                                /* as the homepage labels */
  margin-top: 36px;
}

/* project information: Client · Industry · Live View, 120px clear under the
   labels, at the bottom (level with the image). STANDARD (DESIGN.md ›
   Project Detail page): left-aligned on the text edge with exactly 70px
   between the items, at every width; an item that doesn't fit wraps to the
   next line (28px below), still on the text edge. Like the heading, the row
   ends 100px before the cover (≥1200px). */
.ph__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 28px 70px;
  max-width: calc(100% - 100px);
  margin-top: auto;
  padding-top: 120px;
}

.ph__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* label above value, as the Project Detail facts strip */
.ph__label {
  color: var(--c-muted);
}

.ph__value {
  font-size: var(--fs-mono-md);
  line-height: 18.2px;
}

/* Live View › "Visit Now →": the text roll + the → nudging right on hover */
.ph__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ph__arrow {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.3s var(--ease);
}

.ph__live:hover .ph__arrow,
.ph__live:focus-visible .ph__arrow {
  transform: translateX(3px);
}

/* ----------------------------------------------------------------- image */

/* the thumbnail fills cols 3–4 edge to edge, 800 × 465 at the full
   container width (1600px), the same shape at every width; it sits at the
   bottom of the block so it ends level with the project information */
.ph__media {
  grid-column: 3 / span 2;
  align-self: end;
  /* the same width as cols 3–4 (so the 800 × 465 size holds), moved one
     column-padding left: its right edge sits on the content's text edge,
     the same distance from the window as the text on the left and the
     story images below */
  margin-left: calc(var(--col-pad) * -1);
  padding-right: var(--col-pad);
}

/* the media column is a size container, so a project's optional coverRadius
   can use cqw (a share of the cover's width, like its image corners) */
.ph__media {
  container-type: inline-size;
}

.ph__frame {
  aspect-ratio: 800 / 465;
  overflow: hidden;
  background: var(--c-inverse-container);
}

.ph__frame img,
.ph__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* coverFit: "contain" (projects.js, per project): the frame keeps its size
   and shape; the whole cover shows inside it (nothing cropped), centred, on
   the page's own dark so the side strips disappear into the header */
.ph__frame--contain {
  background: transparent;
}

.ph__frame--contain img,
.ph__frame--contain video {
  object-fit: contain;
  transform: scale(var(--cover-scale, 1));   /* coverScale (projects.js): a little larger, still inside the frame's width */
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1199px) {
  .ph__text,
  .ph__media { grid-column: 1 / -1; }
  .ph__media { margin-left: 0; padding: 0 var(--col-pad); }   /* stacked: level with the text */
  .ph__title,
  .ph__facts { max-width: none; }   /* stacked: the image is below, not beside, so the full width is free */
  .ph__intro { margin-top: 50px; }
  .ph__facts { padding-top: 50px; padding-bottom: 50px; }
}

@media (max-width: 809px) {
  .ph::before { width: 100%; height: 60%; }
  .ph__intro { margin-top: 40px; }
  .ph__facts { padding-block: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph__arrow { transition: none; }
}