/*
 * Gindi Innovations — Projects page (/projects/) and project pages
 * (/projects/<slug>/). Content: apps/core/projects.py. Behaviour (film
 * previews, photo gallery): static/js/projects-page.js. Reveal-on-scroll uses
 * the site's data-reveal (main.js + motion.css).
 */

/* ---------- Page head ---------- */
.projects-page,
.project-page {
  padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-xl);
}

.projects-page__head {
  display: grid;
  gap: 0.75rem;
  margin-block-end: var(--space-lg);
}

.projects-page__eyebrow,
.project-page__eyebrow {
  color: var(--gindi-gold);
}

.projects-page__title,
.project-page__title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

:lang(ar) .projects-page__title,
:lang(ar) .project-page__title {
  line-height: 1.3;
}

.projects-page__lead {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.4;
  color: var(--fg);
}

/* ---------- Project entries ---------- */
.project-list {
  display: grid;
  gap: var(--space-lg);
  list-style: none;
}

/* /projects/#<slug> lands with the whole entry clear of the fixed header
   (html has scroll-padding-top: header height; this adds breathing room). */
.project-entry {
  scroll-margin-top: 1.5rem;
}

.project-entry__inner {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 0;
}

.project-entry__num {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block-start: 0.25rem;
  font-size: 0.8125rem;
  color: var(--gindi-gold);
}

.project-entry__num::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  margin-inline-start: 0.4rem;
  background: var(--gindi-gold);
  opacity: 0.7;
}

/* One large image beside two smaller ones; even entries flip sides. */
.project-entry__group {
  display: grid;
  grid-template-columns: minmax(0, 1.87fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  aspect-ratio: 27 / 10;
}

.project-entry__group > .tile--large {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.project-entry--flip .project-entry__group {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.87fr);
}

.project-entry--flip .project-entry__group > .tile--large {
  grid-column: 2;
}

.project-entry--flip .project-entry__group > .tile--small {
  grid-column: 1;
}

.project-entry__foot {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.25rem var(--space-md);
  border-block-end: 1px solid var(--line);
}

.project-entry__name {
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.project-entry__scope {
  margin-block-start: 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  color: var(--muted);
}

/* "View Project": navy text, gold underline growing on hover, arrow nudges. */
.project-entry__view {
  min-height: 2.75rem;
  color: var(--fg);
  background-image: linear-gradient(var(--gindi-gold), var(--gindi-gold));
  background-size: 100% 1px;
}

.project-entry__view .link-arrow__icon {
  color: var(--gindi-gold);
}

.project-entry__view:hover {
  background-size: 100% 2px;
}

/* ---------- Tiles ---------- */
.tile {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--placeholder-bg);
}

.tile > img,
.tile__video > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

@media (hover: hover) {
  .project-entry__group:hover .tile > img {
    transform: scale(1.03);
  }
}

.tile .placeholder {
  position: absolute;
  inset: 0;
  background: var(--placeholder-bg);
}

.tile__missing {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.875rem;
  color: var(--muted);
}

/* "+8 Photos": to the project's page. */
.tile__more {
  position: absolute;
  z-index: 2;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: rgb(28 44 74 / 0.88);
  color: var(--gindi-ivory);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.tile__more:hover {
  background: var(--gindi-navy);
}

/* Film preview. */
.tile__video {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
}

.tile__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.tile__play {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}

.tile__play:hover {
  transform: scale(1.06);
}

.tile__film {
  position: relative;
  color: var(--gindi-ivory);
  font-size: 0.875rem;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}

.tile__video.is-playing > img,
.tile__video.is-playing .tile__play,
.tile__video.is-playing .tile__film {
  display: none;
}

/* ---------- Project page ---------- */
.project-page__back {
  margin-block-end: var(--space-md);
  color: var(--fg);
}

/* The arrow points back. */
.project-page__back .link-arrow__icon {
  transform: scaleX(-1);
  color: var(--gindi-gold);
}

.project-page__back:hover .link-arrow__icon {
  transform: scaleX(-1) translateX(0.25rem);
}

[dir="rtl"] .project-page__back .link-arrow__icon {
  transform: none;
}

[dir="rtl"] .project-page__back:hover .link-arrow__icon {
  transform: translateX(-0.25rem);
}

.project-page__head {
  display: grid;
  gap: 1rem;
  margin-block-end: var(--space-lg);
}

.project-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.project-page__intro {
  display: grid;
  gap: 0.75rem;
  max-width: 42rem;
}

.project-page__scope {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1.4;
}

.project-page__scope .label {
  display: block;
  margin-block-end: 0.25rem;
  font-family: var(--font-sans);
  color: var(--muted);
}

.project-page__description {
  color: var(--muted);
  line-height: 1.7;
}

.project-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}

.project-media__item--lead {
  grid-column: 1 / -1;
}

.project-media__photo,
.project-media__placeholder {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  overflow: hidden;
  background: var(--placeholder-bg);
  cursor: zoom-in;
}

.project-media__item--lead .project-media__photo,
.project-media__item--lead .project-media__placeholder {
  aspect-ratio: 16 / 9;
}

.project-media__placeholder {
  cursor: default;
}

.project-media__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

@media (hover: hover) {
  .project-media__photo:hover img {
    transform: scale(1.03);
  }
}

.project-media__photo:focus-visible {
  outline-offset: 3px;
}

.project-media__video {
  margin: 0;
}

.project-media__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.project-media__video figcaption {
  margin-block-start: 0.5rem;
  color: var(--muted);
}

/* ---------- Full-screen photo gallery ---------- */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 6vh, 5rem) clamp(1rem, 6vw, 6rem) 1.5rem;
  border: 0;
  background: rgb(18 28 48 / 0.97);
  color: var(--gindi-ivory);
  touch-action: pan-y;
}

.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
}

.lightbox::backdrop {
  background: rgb(18 28 48 / 0.85);
}

.lightbox__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.875rem;
  min-height: 0;
  margin: 0;
}

.lightbox__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.lightbox__caption {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ivory-72);
}

.lightbox__count {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ivory-72);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--ivory-18);
  color: var(--gindi-ivory);
  background: rgb(28 44 74 / 0.6);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  border-color: var(--gindi-gold);
  background: rgb(200 137 43 / 0.18);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--gindi-yellow);
  outline-offset: 2px;
}

.lightbox__close {
  inset-block-start: 0.875rem;
  inset-inline-end: 0.875rem;
}

.lightbox__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox__nav {
  top: 50%;
  translate: 0 -50%;
}

/* A single image (e.g. a concept visualization): no arrows. */
.lightbox__nav[hidden] {
  display: none;
}

.lightbox__nav svg {
  width: 0.625rem;
  height: 1.0625rem;
}

.lightbox__nav--prev {
  left: clamp(0.5rem, 2vw, 1.5rem);
}

.lightbox__nav--next {
  right: clamp(0.5rem, 2vw, 1.5rem);
}

/* Arabic: "previous" on the right, arrows mirrored. */
[dir="rtl"] .lightbox__nav--prev {
  left: auto;
  right: clamp(0.5rem, 2vw, 1.5rem);
}

[dir="rtl"] .lightbox__nav--next {
  right: auto;
  left: clamp(0.5rem, 2vw, 1.5rem);
}

[dir="rtl"] .lightbox__nav svg {
  transform: scaleX(-1);
}

/* ---------- Smaller screens ---------- */
@media (max-width: 48rem) {
  .project-entry__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-entry__num {
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    margin-block-end: 0.75rem;
  }

  .project-entry__num::after {
    width: 2.5rem;
    height: 1px;
    margin: 0;
  }

  .project-entry__foot {
    grid-column: 1;
  }

  /* Large image on top, the two details side by side. */
  .project-entry__group,
  .project-entry--flip .project-entry__group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  .project-entry__group > .tile--large,
  .project-entry--flip .project-entry__group > .tile--large {
    grid-row: 1;
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
  }

  .project-entry__group > .tile--small,
  .project-entry--flip .project-entry__group > .tile--small {
    grid-row: 2;
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }

  .project-media {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile > img,
  .tile__video > img,
  .project-media__photo img,
  .tile__play {
    transition: none;
    transform: none !important;
  }
}

/* ---------- From Vision to Reality on a project page ----------
   partials/project_compare.html: the homepage comparison's markup and
   styles (.compare*, sections.css), sized here for this page only. The
   frame keeps the images' own 3:2 shape (nothing cropped or stretched); the
   block is as wide as the screen height allows, so heading, image and
   labels fit one screen, but never wider than the gallery's content width
   nor narrower than 30rem (phones simply scroll). */
.pv {
  padding-block: 0 clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
}

.pv > .container {
  max-width: 120rem;
  padding-inline: clamp(1rem, 0.4rem + 2.4vw, 3rem); /* the gallery's edges */
}

.pv__inner {
  width: clamp(min(100%, 30rem), calc((100vh - var(--header-h) - 9rem) * 1.5), 100%);
  width: clamp(min(100%, 30rem), calc((100svh - var(--header-h) - 9rem) * 1.5), 100%);
  margin-inline: auto;
}

.pv__title {
  margin-block-end: clamp(0.875rem, 0.5rem + 1vw, 1.5rem);
  font-size: min(var(--fs-h2), 9vh);
}

.pv .compare {
  display: block;
  max-height: none;
}

.pv .compare__frame {
  aspect-ratio: 3 / 2;
  min-height: 0;
  max-height: none;
}

/* The render stays on the left in Arabic too: the comparison is dir="ltr",
   so undo the page-level right-to-left placement of the design layer. */
.pv .compare[dir="ltr"] .compare__layer--design {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.pv .compare[dir="ltr"] .compare__divider {
  left: var(--pos);
}