/* ══════════════════════════════════════════════
   Amelie Designs — projects.css
   12-column grid · improved legibility
   
   Grid:  12 cols · gutter 2rem · outer px from .px (6vw)
   Col spans used:
     Full bleed  → outside .px wrapper
     10/12       → col 2–11  (main content)
     8/12        → col 3–10  (text columns)
     6/12        → col 4–9   (narrow text)
     label col   → col 2–3   (sticky label)
     body col    → col 3–11  (body copy)
══════════════════════════════════════════════ */

/* ── Grid foundation ── */
:root {
  --cols: 12;
  --gutter: 2rem;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* ── Header: no intro delay on project pages ── */
.header--loaded { animation: none; transform: translateY(0); }

/* ══════════════════════════════════════════════
   PROJECT HERO
══════════════════════════════════════════════ */
.proj-hero {
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.proj-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4vh;
}

.proj-hero__back {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink60);
  transition: color .2s, letter-spacing .3s;
}
.proj-hero__back:hover { color: var(--ink); letter-spacing: .15em; }

.proj-hero__num {
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink60);
}

/* Heading */
.bh-overflow         { overflow: hidden; padding-bottom: 0.2em; }
.bh-overflow--indent { padding-left: 0; }

.bh-line {
  font-family: var(--ff-disp);
  font-size: clamp(12vw, 14vw, 16vw);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  display: block;
  transform: translateY(110%);
  opacity: 0;
  animation: bhUp 1.1s cubic-bezier(.25,1,.5,1) forwards;
}
.bh-line--outline {
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
}
#bhLine1 { animation-delay: .1s; }
#bhLine2 { animation-delay: .22s; }
@keyframes bhUp { to { transform: translateY(0); opacity: 1; } }

/* Meta row — 12-col: spans full 12, items across 4 cols each */
.proj-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  margin-top: 4vh;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ink20);
  opacity: 0;
  animation: bhFade .8s ease .65s forwards;
}
@keyframes bhFade { to { opacity: 1; } }

.proj-meta-label {
  display: block;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink60);
  margin-bottom: .5rem;
}
.proj-meta-value {
  font-family: var(--ff-disp);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ink);
  line-height: 1.3;
}

/* ══════════════════════════════════════════════
   COVER IMAGE
══════════════════════════════════════════════ */
.proj-cover {
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  opacity: 0;
  animation: bhFade .9s ease .5s forwards;
}
.proj-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  animation: coverScale 1.4s cubic-bezier(.25,1,.5,1) .3s forwards;
}
@keyframes coverScale { to { transform: scale(1); } }

/* ══════════════════════════════════════════════
   SECTION LABEL — shared
══════════════════════════════════════════════ */
.proj-section-label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink60);
  display: block;
}

/* ══════════════════════════════════════════════
   INTRO SECTION
   Grid: label = col 1–2 (2/12), text = col 3–10 (8/12)
══════════════════════════════════════════════ */
.proj-intro {
  padding: 8vh 0;
  border-bottom: 1px solid var(--ink20);
}

.proj-intro__inner {
  display: grid;
  grid-template-columns: 2fr 8fr;
  gap: var(--gutter);
  align-items: start;
  padding-inline: 3vw;
}

.proj-intro__label-col {
  padding-top: .5rem;
  position: sticky;
  top: 8vh;
}

.proj-intro__lead {
  font-family: var(--ff-disp);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 2rem;
  font-weight: normal;
}

.proj-intro__body {
  font-size: clamp(.9rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink);
  opacity: .75;
  margin-bottom: 1.2rem;
}
.proj-intro__body:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   BODY SECTIONS
   Same 2/8 split as intro
══════════════════════════════════════════════ */
.proj-section {
  padding: 8vh 0;
  border-bottom: 1px solid var(--ink20);
}

.proj-section__inner {
  display: grid;
  grid-template-columns: 2fr 8fr;
  gap: var(--gutter);
  align-items: start;
  padding-inline: 3vw;
}

.proj-section__label-col {
  padding-top: .5rem;
  position: sticky;
  top: 8vh;
}

.proj-section__text-col p {
  font-size: clamp(.9rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink);
  opacity: .75;
  margin-bottom: 1.3rem;
}
.proj-section__text-col p:last-child { margin-bottom: 0; }

/* ── Deliverables list ── */
.proj-section__text-col--list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.proj-img-thirds__item--van img {
  object-position: right center;
}

.proj-deliverable {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--ink20);
}
.proj-deliverable:last-child { border-bottom: none; }

.proj-deliverable__icon {
  font-size: .9rem;
  color: var(--cinnamon);
  margin-top: .2rem;
}
.proj-deliverable__title {
  font-family: var(--ff-disp);
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: .5rem;
  font-weight: normal;
  line-height: 1.2;
}
.proj-deliverable__desc {
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink);
  opacity: .7;
  margin: 0;
}

/* ══ SHOWCASE: POSTS + REELS CAROUSELS ═══════════════════════
   Two carousels side by side. Posts carousel is sized for
   Instagram feed posts (4:5), reels carousel for Reels (9:16).
   Adjust --post-ratio / --reel-ratio below if you want square
   1:1 posts instead. ──────────────────────────────────────── */

.showcase {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.showcase__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.showcase__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.showcase__col .proj-section-label {
  display: block;
}

/* ── Carousel shell ─────────────────────────── */

.carousel {
  position: relative;
  --post-ratio: 4 / 5;
  --reel-ratio: 9 / 16;
}

.carousel--post {
  max-width: 380px;
  margin: 0 auto;
}

.carousel--reel {
  max-width: 320px;
  margin: 0 auto;
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.carousel__media {
  width: 100%;
  overflow: hidden;
  background: #111;
  border-radius: 12px;
}

.carousel--post .carousel__media {
  aspect-ratio: var(--post-ratio);
}

.carousel--reel .carousel__media {
  aspect-ratio: var(--reel-ratio);
}

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

/* ── Stats bar under each slide ─────────────── */

.carousel__stats {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.85rem 0.5rem 0;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.85;
}

.stat__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* filled heart for likes */
.stat[data-stat="likes"] .stat__icon {
  fill: currentColor;
  stroke: none;
}

.stat__value {
  line-height: 1;
}

/* ── Prev/next buttons ──────────────────────── */

.carousel__btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease;
}

.carousel__btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel__btn--prev {
  left: 8px;
}

.carousel__btn--next {
  right: 8px;
}

/* ── Dots ───────────────────────────────────── */

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.carousel__dot.is-active {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.2);
}

/* ── Responsive: stack on mobile ────────────── */

@media (max-width: 768px) {
  .showcase__inner {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .carousel--post,
  .carousel--reel {
    max-width: 320px;
  }
}


/* ══════════════════════════════════════════════
   IMAGE LAYOUTS
══════════════════════════════════════════════ */

/* Full width — no padding, bleeds edge to edge */
.proj-img-full {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.proj-img-full img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
  cursor: zoom-in;
}
.proj-img-full:hover img { transform: scale(1.02); }

/* 2-col grid — uses 12-col: each item = 6/12 */
.proj-img-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.proj-img-grid__item {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.proj-img-grid__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
  cursor: zoom-in;
}
.proj-img-grid__item:hover img { transform: scale(1.03); }

/* 3-col grid — each item = 4/12 */
.proj-img-thirds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.proj-img-thirds__item {
  aspect-ratio: 3/4;
  overflow: hidden;
}
.proj-img-thirds__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
  cursor: zoom-in;
}
.proj-img-thirds__item:hover img { transform: scale(1.03); }

/* ── Scroll reveal ── */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-up.in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════
   CREDITS
   Label col 2/12 · content 8/12
══════════════════════════════════════════════ */
.proj-credits {
  padding: 6vh 0;
  border-bottom: 1px solid var(--ink20);
}
.proj-credits__inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-inline: 3vw;
}
.proj-credits__inner > div > .proj-section-label {
  margin-bottom: .8rem;
}
.proj-credits__line {
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink);
  opacity: .7;
  line-height: 1.9;
}

/* ══════════════════════════════════════════════
   NEXT PROJECT
══════════════════════════════════════════════ */
.next-proj {
  display: block;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ink20);
  background: var(--bg);
  transition: background .4s;
}
.next-proj:hover { background: var(--bg2); }

.next-proj__inner {
  position: relative;
  z-index: 2;
  padding-top: 6vh;
  padding-bottom: 6vh;
  padding-inline: 3vw;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.next-proj__label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink60);
}

.np-overflow { overflow: hidden; padding-bottom: 0.2em; }

.next-proj__title {
  font-family: var(--ff-disp);
  font-size: clamp(8vw, 10vw, 12vw);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  display: block;
  transition: transform .6s cubic-bezier(.25,1,.5,1);
}
.next-proj:hover .next-proj__title { transform: translateX(1.5vw); }

.next-proj__tags { display: flex; gap: .5rem; }

.next-proj__arrow {
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(2rem, 4vw, 4rem);
  color: var(--ink60);
  transition: transform .4s cubic-bezier(.16,1,.3,1), color .3s;
}
.next-proj:hover .next-proj__arrow {
  transform: translateY(-50%) translate(8px, -8px);
  color: var(--ink);
}

.next-proj__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s;
}
.next-proj__img img { width: 100%; height: 100%; object-fit: cover; }
.next-proj:hover .next-proj__img { opacity: .08; }

/* ══════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  cursor: zoom-out;
}
.lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  transform: scale(0.96);
  opacity: 0;
  transition: transform .3s cubic-bezier(.25,1,.5,1), opacity .25s ease;
  cursor: default;
}
.lightbox-overlay.is-open img {
  transform: scale(1);
  opacity: 1;
}
.lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  color: #fff;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
  line-height: 1;
  z-index: 1001;
}
.lightbox-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .proj-intro__inner,
  .proj-section__inner    { grid-template-columns: 1fr; gap: 1.2rem; }
  .proj-intro__label-col,
  .proj-section__label-col{ position: static; }
  .bh-overflow--indent    { padding-left: 10vw; }
}

@media (max-width: 768px) {
  .proj-hero__meta        { grid-template-columns: repeat(2, 1fr); }
  .proj-img-grid          { grid-template-columns: 1fr; }
  .proj-img-thirds        { grid-template-columns: repeat(2, 1fr); }
  .proj-credits__inner    { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 480px) {
  .proj-hero__meta  { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .proj-img-thirds  { grid-template-columns: 1fr; }
  .proj-cover       { aspect-ratio: 4/3; }
}