/* =========================================================
   Gallery page + Project modal
   ========================================================= */

.active-link::after{ width:100%; }

/* ---------- Gallery hero ---------- */
.gallery-hero{
  padding:150px var(--gutter) 40px;
  max-width:1440px; margin:0 auto;
}
.gallery-title{
  font-size:clamp(44px, 6vw, 84px);
  margin-top:14px;
}

.filter-row{
  margin-top:44px;
  display:flex; flex-direction:column; gap:14px;
}
.filter-pills, .tag-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-pills{ min-height:0; }
.tag-pills:empty{ display:none; }

.pill{
  padding:11px 22px;
  border-radius:var(--radius-pill);
  font-size:13px; font-weight:500;
  background:var(--surface);
  color:var(--ink-soft);
  border:1px solid transparent;
  transition:background .4s var(--ease-soft), color .4s var(--ease-soft), transform .3s var(--ease-soft);
}
.pill:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }
.pill.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
}
.tag-pills .pill{ padding:8px 16px; font-size:12px; background:transparent; border-color:rgba(47,41,69,.14); }
.tag-pills .pill.active{ border-color:transparent; }

/* ---------- Masonry ---------- */
.masonry-wrap{
  padding:60px var(--gutter) 140px;
  max-width:1440px; margin:0 auto;
}
.masonry{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:start;
}
.masonry-col{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}
@media (max-width:980px){ .masonry{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .masonry{ grid-template-columns:1fr; } }

.thumb{
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  background:var(--card);
  box-shadow:0 18px 46px -26px rgba(47,41,69,.28);
  transition:box-shadow .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.thumb:hover{ box-shadow:0 26px 60px -24px rgba(47,41,69,.38); transform:scale(1.035); }
.thumb.leaving{
  animation:thumbOut .35s var(--ease-soft) both;
}
.thumb.entering{ animation:thumbIn .6s var(--ease-soft) both; }
@keyframes thumbIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
@keyframes thumbOut{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(.92); } }

.thumb-media{
  position:relative; overflow:hidden;
  width:100%;
}
.thumb-media img, .thumb-fill{ display:block; width:100%; height:100%; }
.thumb-fill{ transition:transform 1s var(--ease-soft); }
.thumb:hover .thumb-fill{ transform:scale(1.07); }

.thumb-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(47,41,69,0) 40%, rgba(47,41,69,.55) 100%);
  opacity:0; transition:opacity .5s var(--ease-soft);
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:18px;
}
.thumb:hover .thumb-overlay{ opacity:1; }
.thumb-view{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); transform:scale(.7); transition:transform .4s var(--ease-soft);
}
.thumb:hover .thumb-view{ transform:scale(1); }

.thumb-info{ padding:18px 20px 22px; }
.thumb-info h3{ font-size:19px; margin-bottom:4px; }
.thumb-meta{ font-size:11.5px; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }

/* Skeleton loading state */
.skeleton{
  background:linear-gradient(100deg, var(--surface) 30%, #fff 50%, var(--surface) 70%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- Project modal ---------- */
.project-backdrop{
  position:fixed; inset:0; z-index:400;
  background:rgba(47,41,69,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease-soft), visibility .5s;
}
.project-backdrop.open{ opacity:1; visibility:visible; }

.project-modal{
  width:100%; max-width:1280px; max-height:92vh;
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  box-shadow:0 40px 100px -30px rgba(47,41,69,.4);
  transform:scale(.94) translateY(18px);
  opacity:0;
  transition:transform .55s var(--ease-soft), opacity .55s var(--ease-soft);
}
/* Landscape stacks a full-width image on top of a fixed-height text bar.
   Needs an explicit height (not just max-height) so the media's
   flex-grow has real space to expand into — with only a ceiling and no
   floor, the media (which has no intrinsic size of its own) would
   otherwise collapse to 0 and the whole modal would shrink to just the
   text bar's height. */
.project-modal.orientation-landscape{ max-width:900px; height:min(640px, 92vh); }
.project-modal.orientation-portrait{ max-width:935px; height:min(760px, 92vh); }
.project-modal.orientation-square{ max-width:1160px; height:min(700px, 92vh); }
.project-backdrop.open .project-modal{ transform:scale(1) translateY(0); opacity:1; }

.project-close{ top:18px; right:18px; z-index:5; background:rgba(255,255,255,.9); }

.project-nav{
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); flex-shrink:0;
  box-shadow:0 12px 30px -12px rgba(47,41,69,.3);
  transition:transform .35s var(--ease-soft), background .35s var(--ease-soft);
}
.project-nav:hover{ background:#fff; transform:scale(1.08); }
@media (max-width:900px){ .project-nav{ display:none; } }

.project-body{ display:flex; height:100%; max-height:92vh; overflow:hidden; flex-direction:row; }
.project-body.orientation-landscape{ flex-direction:column; }

.project-media{
  background:var(--surface);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  width:60%;
}
.project-media-fill{ width:100%; height:100%; object-fit:cover; }
.project-media-frame{ width:100%; height:100%; }

/* Portrait/square sit side-by-side with the info panel, media filling
   its column edge-to-edge (no gutters, no inset, no rounded card) —
   just a plain cover-crop column, matching landscape's own full-bleed
   top image. Column width is tuned per orientation so the crop reads
   reasonably; square gets a slightly wider column than portrait. */
/* Portrait/square media columns are sized by their TRUE aspect ratio
   (21:29 portrait, 1:1 square), computed from the modal's own height —
   not an approximate percentage-width column that just happens to get
   cropped to roughly that shape. The info panel then simply flexes to
   fill whatever width remains. */
.project-media.orientation-portrait{ width:auto; height:100%; aspect-ratio:21/29; flex-shrink:0; }
.project-media.orientation-square{ width:auto; height:100%; aspect-ratio:1/1; flex-shrink:0; }
.project-media.orientation-landscape{
  width:100%; flex:1 1 auto; min-height:0;
}

/* ---------- Landscape: compact horizontal info bar, no testimonial ----------
   Fixed height regardless of content — the description column scrolls
   internally instead of the whole bar growing/shrinking per project, so
   every landscape project's popup reads consistently. */
.project-info.project-info-landscape{
  width:100%; flex:0 0 auto; height:230px;
  display:flex; flex-direction:row; align-items:stretch; gap:36px;
  padding:0 40px;
}
.pil-main{
  flex:0 0 auto; max-width:300px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:44px 0 32px;
}
.pil-main-top{ flex:0 0 auto; }
.pil-main .project-cat{ margin-bottom:10px; }
.pil-main h2{ font-family:var(--serif); font-size:clamp(20px,2vw,26px); line-height:1.15; margin:0; }
.pil-meta-row{ display:flex; gap:16px; flex-wrap:nowrap; white-space:nowrap; }
.pil-meta-row .project-meta-item{ font-size:11.5px; }

.pil-desc{
  flex:1 1 auto; min-width:180px; min-height:0;
  overflow-y:auto;
  align-self:stretch;
  margin:44px 0 32px;
  padding-left:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(47,41,69,.25) transparent;
}
.pil-desc::-webkit-scrollbar{ width:5px; background:transparent; }
.pil-desc::-webkit-scrollbar-track{ background:transparent; }
.pil-desc::-webkit-scrollbar-thumb{ background:rgba(47,41,69,.25); border-radius:10px; }
.pil-desc-inner{
  min-height:100%;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.pil-desc .project-desc{ margin-bottom:8px; }
.pil-desc .project-desc:last-of-type{ margin-bottom:0; }
.pil-footer{
  flex:0 0 auto; align-self:flex-end;
  padding-left:36px; padding-bottom:32px;
  display:flex; align-items:flex-end;
}

.project-info{
  padding:40px;
  overflow:hidden;
  min-width:0;
  width:40%;
  display:flex;
  flex-direction:column;
}
.project-body.orientation-portrait .project-info{ width:auto; flex:1 1 auto; min-width:0; }
.project-body.orientation-square .project-info{ width:auto; flex:1 1 auto; min-width:0; }

.project-info-head{ flex-shrink:0; }
.project-cat{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.project-info h2{ font-family:var(--serif); font-size:clamp(24px,2.4vw,32px); margin-bottom:16px; line-height:1.12; }
.project-meta-row{ display:flex; gap:22px; margin-bottom:0; flex-wrap:wrap; }
.project-meta-item{ font-size:12px; color:var(--ink-soft); }
.project-meta-item strong{ display:block; color:var(--ink); font-weight:500; font-size:12.5px; margin-bottom:2px; }

.project-info-bottom{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

.project-desc-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  margin-top:18px;
  scrollbar-width:thin;
  scrollbar-color:rgba(47,41,69,.25) transparent;
}
.project-desc-scroll::-webkit-scrollbar{ width:5px; background:transparent; }
.project-desc-scroll::-webkit-scrollbar-track{ background:transparent; }
.project-desc-scroll::-webkit-scrollbar-thumb{ background:rgba(47,41,69,.25); border-radius:10px; }

.project-desc{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:12px; }
.project-desc:last-of-type{ margin-bottom:40px; }

.testimonial-card{ margin-bottom:6px; padding:22px 24px 18px; background:transparent; border:1px solid rgba(47,41,69,.14); }

.project-info-foot{ flex-shrink:0; padding-top:36px; }

@media (max-width:900px){
  .project-modal, .project-modal.orientation-portrait, .project-modal.orientation-square, .project-modal.orientation-landscape{ height:88vh; max-width:100%; }
  .project-body{ flex-direction:column; }
  .project-body.orientation-portrait,
  .project-body.orientation-square{ padding:0; gap:0; }
  .project-media,
  .project-media.orientation-portrait,
  .project-media.orientation-square,
  .project-media.orientation-landscape,
  .project-body.orientation-portrait .project-media,
  .project-body.orientation-square .project-media{
    width:100%; height:auto; border-radius:0; flex-shrink:0;
  }
  /* Each orientation still reads differently once stacked — portrait
     stays noticeably taller than landscape/square rather than every
     shape collapsing to the same flat strip. Capped with max-height
     (not aspect-ratio alone) so a tall portrait crop can't eat almost
     the whole viewport and squeeze the info panel below it down to
     nothing — object-fit:cover on the image keeps the crop looking
     intentional at this shorter height instead of stretched. */
  .project-media.orientation-portrait{ aspect-ratio:21/29; max-height:38vh; }
  .project-media.orientation-square{ aspect-ratio:1/1; max-height:34vh; }
  .project-media.orientation-landscape{ aspect-ratio:16/9; max-height:34vh; }
  .project-info,
  .project-body.orientation-portrait .project-info,
  .project-body.orientation-square .project-info{
    width:100%; flex:1 1 auto; min-height:0; padding:24px 22px;
  }
  .project-info-landscape{ flex-direction:column; align-items:flex-start; gap:14px; padding:22px; height:auto; max-height:none; }
  .pil-desc{ padding:0; }
  .pil-footer{ padding-left:0; }
}

/* ---------- Custom minimal video player ---------- */
.video-frame{ position:relative; width:100%; height:100%; overflow:hidden; background:#000; }
.project-video{ width:100%; height:100%; object-fit:cover; display:block; }

.video-play-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:opacity .35s var(--ease-soft), transform .3s var(--ease-soft), visibility .35s;
}
.video-play-center:hover{ transform:translate(-50%,-50%) scale(1.08); }
.video-play-center.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.video-controls{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-soft), visibility .3s;
  pointer-events:none;
}
.video-controls.visible{ opacity:1; visibility:visible; pointer-events:all; }
.video-ctrl-btn{
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease);
}
.video-ctrl-btn:hover{ background:rgba(0,0,0,.6); }
.video-controls-right{ display:flex; align-items:center; gap:8px; }
.video-volume{
  width:60px; height:3px;
  accent-color:#fff;
  opacity:.85;
}

/* ---------- Rive preview frame ---------- */
.rive-frame{ width:100%; height:100%; background:var(--surface); }
.rive-canvas{ width:100%; height:100%; display:block; }

/* ---------- CTA as animated gradient text (not a heavy button) ---------- */
.cta-gradient-text{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--lavender), var(--accent));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--accent);
  animation:ctaGradientShift 4s linear infinite;
  position:relative;
  padding-bottom:2px;
  border-bottom:1px solid rgba(89,81,166,.35);
  transition:border-color .3s var(--ease-soft);
}
.cta-gradient-text svg{ color:var(--accent); flex-shrink:0; }
.cta-gradient-text:hover{ border-color:var(--accent); }
@keyframes ctaGradientShift{
  0%{ background-position:0% 50%; }
  100%{ background-position:300% 50%; }
}