/* ==========================================================================
   Artistic Dimension — Projects
   ========================================================================== */

/* --------------------------------------------------------------------------
   Featured projects
   -------------------------------------------------------------------------- */

.prj-featured__inner {
  display: grid;
  grid-template-columns: minmax(0, 21%) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.2vw, 2.4rem);
  align-items: start;
}

.prj-featured__intro { max-width: 24rem; padding-top: clamp(.4rem, 1.4vw, 1.6rem); }
.prj-featured__link { margin-top: clamp(1.2rem, 2.2vw, 2rem); }

.prj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ad-gap);
  align-items: start;
}

.prj-col { display: grid; gap: var(--ad-gap); }

.prj-card {
  display: flex;
  flex-direction: column;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line-soft);
  border-radius: var(--ad-r);
  overflow: hidden;
  transition: transform var(--ad-t) var(--ad-ease-out), box-shadow var(--ad-t) var(--ad-ease);
}

.prj-card:hover { transform: translateY(-5px); box-shadow: var(--ad-shadow-md); }

.prj-card__media { overflow: hidden; background: var(--ad-surface-2); }
.prj-card__media img { width: 100%; height: 100%; object-fit: cover; }

.prj-card--tall .prj-card__media { aspect-ratio: 4 / 4.1; }
.prj-card--short .prj-card__media { aspect-ratio: 16 / 9; }

.prj-card__body {
  padding: clamp(.9rem, .65rem + .7vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.prj-card__title {
  font-family: var(--ad-font-display);
  font-size: var(--ad-fs-h3);
  font-weight: 500;
  color: var(--ad-ink);
  line-height: 1.2;
}

.prj-card__meta {
  font-size: var(--ad-fs-label);
  color: var(--ad-muted);
  letter-spacing: .04em;
}

.prj-card__link { margin-top: .3rem; }

/* --------------------------------------------------------------------------
   Gallery mosaic
   -------------------------------------------------------------------------- */

.prj-gallery__head { margin-bottom: clamp(.9rem, 1.6vw, 1.4rem); }
/* The label already breaks onto two lines with an explicit <br>; constraining
   it further forced one word per line. */
.prj-gallery__head .ad-eyebrow { line-height: 1.7; align-items: flex-start; }
.prj-gallery__head .ad-eyebrow::after { margin-top: .55em; }

/* A tighter, more curated mosaic: one lead frame plus four supporting tiles,
   so the section reads as an edit rather than a contact sheet. */
.prj-gallery {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, .85vw, .9rem);
  height: clamp(290px, 25vw, 400px);
}

.prj-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ad-r);
  background: var(--ad-surface-2);
}

.prj-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.prj-gallery__item--lead { grid-row: 1 / 3; }

/* --------------------------------------------------------------------------
   Philosophy band
   -------------------------------------------------------------------------- */

.prj-philosophy__inner {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  gap: clamp(1.4rem, 2.6vw, 3rem);
  align-items: start;
}

.prj-philosophy__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.prj-philosophy__grid > * {
  padding-inline: clamp(.7rem, 1.4vw, 1.5rem);
  border-left: 1px solid var(--ad-line);
}

.prj-philosophy__grid > *:first-child { border-left: 0; }

/* --------------------------------------------------------------------------
   Where we design
   -------------------------------------------------------------------------- */

.prj-areas {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: var(--ad-gap);
}

.prj-area {
  display: flex;
  flex-direction: column;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line-soft);
  border-radius: var(--ad-r);
  overflow: hidden;
  transition: transform var(--ad-t) var(--ad-ease-out), box-shadow var(--ad-t) var(--ad-ease);
}

.prj-area:hover { transform: translateY(-4px); box-shadow: var(--ad-shadow-md); }

.prj-area__body {
  padding: clamp(.9rem, .65rem + .7vw, 1.3rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.prj-area__name {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-small);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ad-ink);
}

.prj-area__name svg { width: 1.15em; height: 1.15em; flex: none; stroke: var(--ad-gold); fill: none; stroke-width: 1.5; }

.prj-area__sub { font-size: var(--ad-fs-label); color: var(--ad-muted); margin-top: -.35rem; }
.prj-area__text { font-size: var(--ad-fs-label); line-height: 1.75; color: var(--ad-body); }

.prj-area__list {
  display: flex;
  flex-direction: column;
  gap: .26rem;
  font-size: var(--ad-fs-label);
  color: var(--ad-body);
}

.prj-area__list li { display: flex; align-items: center; gap: .45em; }

.prj-area__list li::before {
  content: "";
  width: 9px;
  height: 5px;
  flex: none;
  border-left: 1.2px solid var(--ad-gold);
  border-bottom: 1.2px solid var(--ad-gold);
  transform: rotate(-45deg) translateY(-1px);
}

.prj-area__link { margin-top: auto; }

.prj-area__media { overflow: hidden; background: var(--ad-surface-2); }
.prj-area__media img { width: 100%; height: 100%; object-fit: cover; }

/* Primary card: copy left, image right */
.prj-area--primary { flex-direction: row; }
.prj-area--primary .prj-area__media { flex: 0 0 42%; }

/* Secondary cards: copy on top, image anchored to the base */
.prj-area--stacked .prj-area__media { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .prj-featured__inner { grid-template-columns: minmax(0, 28%) minmax(0, 1fr); }
  .prj-philosophy__inner { grid-template-columns: 1fr; }
  .prj-philosophy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .prj-philosophy__grid > *:nth-child(odd) { border-left: 0; padding-left: 0; }
  .prj-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .prj-featured__inner { grid-template-columns: 1fr; }
  .prj-featured__intro { max-width: 46rem; padding-top: 0; }
  .prj-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(130px, 20vw, 190px);
    height: auto;
  }
  .prj-gallery__item--lead { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 767px) {
  .prj-grid { grid-template-columns: 1fr; }
  .prj-card--tall .prj-card__media { aspect-ratio: 16 / 10; }
  .prj-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prj-area--primary { flex-direction: column; }
  .prj-area--primary .prj-area__media { flex: none; aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .prj-areas { grid-template-columns: 1fr; }
  .prj-philosophy__grid { grid-template-columns: 1fr; }
  .prj-philosophy__grid > * { border-left: 0; padding-left: 0; }
}