/* ─── Palette ─────────────────────────────────────────── */
/*
  Muted rainbow used as accents throughout.
  Adjust these six stops to retheme everything at once.
*/
:root {
  --r1: #f4a5a5;   /* coral   */
  --r2: #f9c784;   /* peach   */
  --r3: #f9e784;   /* yellow  */
  --r4: #a8dbc5;   /* mint    */
  --r5: #a5c8f4;   /* sky     */
  --r6: #c8a5f4;   /* lavender*/

  --rainbow: linear-gradient(to right, var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6));
}

/* ─── Header ──────────────────────────────────────────── */

header.container-fluid {
  padding-block: 0.1rem;               /* thinner bar */
  margin-bottom: 2.75rem;              /* clearance for the banner overhang */
  box-shadow: 0 1px 0 #e8e8e8, 0 4px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;                         /* overhang floats above the grid */
}

.site-banner {
  height: 96px;                        /* grown taller than the bar */
  width: auto;
  display: block;
  margin-bottom: -44px;                /* spill below the bar → overhang */
  position: relative;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}

/* ─── Footer ──────────────────────────────────────────── */

footer.container-fluid {
  display: flex;
  justify-content: center;
  padding-block: 2rem;
  margin-top: 1rem;
  border-top: 1px solid #e8e8e8;
}

.footer-signature {
  height: 72px;
  width: auto;
  opacity: 0.85;
}

/* ─── Portfolio grid ──────────────────────────────────── */

/* Masonry via CSS multi-column: cards keep natural aspect ratio, pack
   gapless top-to-bottom per column. Card height follows the image, so
   portrait work naturally reads taller/bigger. */
.portfolio-grid {
  column-count: 4;
  column-gap: 0.5rem;
  padding: 0.5rem;
}

/* `full` still breaks out to a full-width feature band */
.size-full { column-span: all; }

/* Tablet */
@media (max-width: 1024px) {
  .portfolio-grid { column-count: 3; }
}

/* Mobile */
@media (max-width: 600px) {
  .portfolio-grid { column-count: 2; }
}

/* When Macy.js is active it owns the layout (left-to-right order); the
   column-count rules above stay as the no-JS fallback. */
.portfolio-grid.is-macy { column-count: initial; }
.portfolio-grid.is-macy .card { margin-bottom: 0; }

/* ─── About page ─────────────────────────────────────── */

.about-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
  align-items: start;
  padding-block: 3rem;
}

.about-photo img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  /* Subtle rainbow shadow */
  box-shadow: 6px 6px 0 var(--r5);
}

.about-text {
  max-width: 52ch;
}

@media (max-width: 700px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-photo img {
    max-height: none;   /* show full headshot — no crop */
  }
}

/* ─── Card ────────────────────────────────────────────── */

.card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #ede8e3;
  border-radius: 4px;
  -webkit-column-break-inside: avoid;  /* older WebKit alias */
  break-inside: avoid;     /* don't split a card across columns */
  margin-bottom: 0.5rem;   /* vertical gap (multicol has no row gap) */
}

.card img {
  width: 100%;
  height: auto;            /* natural aspect ratio — no crop, no matte */
  display: block;
  transition: transform 0.35s ease;
}

.card:hover img {
  transform: scale(1.04);
}

/* Badge marking projects with more than one photo */
.card-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem 0.15rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  pointer-events: none;
}
.card-badge svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
}

/* ─── Hover overlay — cycling rainbow tints ───────────── */

.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 1rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.card:hover .card-overlay { opacity: 1; }

/* Each card gets a different rainbow colour on hover */
.card:nth-child(6n+1) .card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--r1) 85%, black) 0%, transparent 65%); }
.card:nth-child(6n+2) .card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--r2) 85%, black) 0%, transparent 65%); }
.card:nth-child(6n+3) .card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--r3) 85%, black) 0%, transparent 65%); }
.card:nth-child(6n+4) .card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--r4) 85%, black) 0%, transparent 65%); }
.card:nth-child(6n+5) .card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--r5) 85%, black) 0%, transparent 65%); }
.card:nth-child(6n+6) .card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--r6) 85%, black) 0%, transparent 65%); }

.card-overlay strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
}

.card-overlay small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
}

/* ─── Lightbox ────────────────────────────────────────── */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 16, 14, 0.92);
}
.lightbox.is-open { display: flex; }

.lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0;
}

.lb-img {
  max-width: 90vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lb-caption {
  text-align: center;
  color: #fff;
  line-height: 1.5;
}
.lb-caption .lb-title { display: block; font-size: 1.1rem; }
.lb-caption .lb-sub   { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; }
.lb-caption .lb-link  {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--r5);
  font-size: 0.85rem;
}

.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  padding: 0.5rem;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }

.lb-close { top: 0.5rem; right: 1rem; font-size: 2.5rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; }
.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }

@media (max-width: 600px) {
  .lb-prev, .lb-next { font-size: 2.5rem; }
}