/* ==========================================================================
   PROJECTS — page-specific styles
   Loads AFTER style.css, so all design tokens (--navy, --green, --shell,
   --line, buttons, .reveal, header/footer) are inherited.

   CONTENTS
   1. Page header band
   2. Project grid
   3. Project card
   4. Responsive
   ========================================================================== */


/* ===== 1. PAGE HEADER BAND ============================================== */
.proj-hero {
  background: var(--navy-dark);
  color: var(--on-dark);
  padding-block: clamp(2.2rem, 4.2vw, 3.4rem);
}
.proj-hero__title {
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: .55rem;
}
.proj-hero__rule {
  display: block; width: 62px; height: 3px;
  background: var(--green-light);
  margin-bottom: 1.1rem;
}
.proj-hero__lead {
  margin: 0;
  max-width: 44rem;
  font-size: .9rem;
  color: var(--on-dark);
}


/* ===== 2. GRID ==========================================================
   auto-fill rather than a fixed column count, so the 12 cards reflow from
   four columns down to one without a breakpoint for every step. */
.projects { padding-block: clamp(2.6rem, 5vw, 4rem); }

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}


/* ===== 3. CARD ==========================================================
   --glow is the brand green (--green, #1CA05C) expressed as raw channels so
   the same colour can be used at several alpha levels in the shadow stack. */
.proj-card {
  --glow: 28, 160, 92;

  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--green);
  border-radius: var(--r-md);
  overflow: hidden;
  /* Two layers: a tight ring that reads as a crisp edge, and a wide soft
     halo that reads as the glow. */
  box-shadow:
    0 0 0 1px rgba(var(--glow), .18),
    0 0 16px rgba(var(--glow), .26);
  transition: transform var(--t), box-shadow var(--t);
}
.proj-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(var(--glow), .38),
    0 0 26px rgba(var(--glow), .48),
    0 14px 32px rgba(20, 60, 114, .16);
}

/* The source photos range from 0.75 (portrait) to 1.87 (wide), so a fixed
   4:3 window with cover is what makes the grid read as one set. Faces of
   buildings survive a centre crop; see --contain below for the exception. */
.proj-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
}
/* A slow Ken Burns drift keeps the grid alive rather than static. Transform
   only, so it composites on the GPU and costs almost nothing to run on all
   twelve at once. The keyframes never drop below scale(1.06), so no edge of
   the 4:3 window is ever exposed as the image pans. */
.proj-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: proj-drift 18s ease-in-out infinite;
}
@keyframes proj-drift {
  0%   { transform: scale(1.06) translate(0, 0); }
  25%  { transform: scale(1.12) translate(-1.4%, -1%); }
  50%  { transform: scale(1.15) translate(0, -1.6%); }
  75%  { transform: scale(1.12) translate(1.4%, -1%); }
  100% { transform: scale(1.06) translate(0, 0); }
}
/* Offset each card so the grid doesn't pulse in unison, which would read as
   a page-wide throb instead of individual photographs breathing. */
.proj-card:nth-child(4n+2) .proj-card__media img { animation-duration: 21s; animation-delay: -4s; }
.proj-card:nth-child(4n+3) .proj-card__media img { animation-duration: 16s; animation-delay: -9s; }
.proj-card:nth-child(4n+4) .proj-card__media img { animation-duration: 23s; animation-delay: -13s; }

/* Hovering pauses the drift, so a visitor studying one photo isn't fighting
   it. The card's own lift still responds, so the hover is not dead. */
.proj-card:hover .proj-card__media img { animation-play-state: paused; }

/* Escape hatch for a photo whose subject sits off-centre. A 16:9 source in
   the 4:3 window loses roughly 170px from each side; where something that
   matters lives near an edge — a client's name sign, say — bias the crop
   toward it rather than accepting the centred default. */
.proj-card--focus-left  .proj-card__media img { object-position: left center; }
.proj-card--focus-right .proj-card__media img { object-position: right center; }

.proj-card__name {
  margin: 0;
  padding: .85rem .9rem 1rem;
  text-align: center;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-ink);
  border-top: 1px solid var(--line);
}
.proj-card:hover .proj-card__name { color: var(--navy); }


/* ===== 4. "AND MANY MORE" TILE ==========================================
   Sits in the grid as a thirteenth cell so it closes the set off rather than
   floating below it. It stretches to the row's height like any other card. */
.proj-more {
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 190px;
  padding: 1.6rem 1.1rem;
  text-align: center;
  background: linear-gradient(160deg, #fff 35%, var(--bg-soft));
}
.proj-more__dots {
  display: flex;
  gap: .34rem;
}
.proj-more__dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: proj-pulse 1.5s ease-in-out infinite;
}
.proj-more__dots i:nth-child(2) { animation-delay: .2s; }
.proj-more__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes proj-pulse {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-3px); }
}
.proj-more__text {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
}
.proj-more__sub {
  margin: 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-40);
  max-width: 15rem;
}


/* ===== 5. RESPONSIVE ==================================================== */
@media (max-width: 560px) {
  /* Two up rather than one: these are recognisable buildings, and a single
     full-width column makes the page very long for 12 of them. */
  .proj-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .proj-card__name { font-size: .74rem; padding: .7rem .5rem .8rem; }
  .proj-more { min-height: 150px; padding: 1.1rem .7rem; }
  .proj-more__text { font-size: .84rem; }
  .proj-more__sub { display: none; }   /* too cramped to read at this width */
}

/* Twelve photographs drifting at once is a lot of motion for anyone who has
   asked the system to reduce it. style.css already clamps animation-duration
   globally, but that would freeze the drift mid-transform at an arbitrary
   scale — switch it off outright and let the images sit square instead. */
@media (prefers-reduced-motion: reduce) {
  .proj-card__media img {
    animation: none !important;
    transform: none;
  }
  .proj-more__dots i { animation: none !important; opacity: 1; }
}