/* =========================================================
   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);
}
.thumb:hover{ box-shadow:0 26px 60px -24px rgba(47,41,69,.38); }
.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);
}
.project-modal.layout-landscape{ height:88vh; }
.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; }
.project-body.layout-portrait{ flex-direction:row; }
.project-body.layout-landscape{ flex-direction:column; }

.project-media{
  background:var(--surface);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.layout-portrait .project-media{ width:60%; }
.layout-landscape .project-media{ width:100%; height:60%; }
.project-media-fill{ width:100%; height:100%; }

.project-info{
  padding:40px 36px;
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.layout-portrait .project-info{ width:40%; }
.layout-landscape .project-info{ width:100%; height:40%; }

.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; }

/* Transparent wrapper by default (portrait): children behave as direct
   flex-column children of .project-info, unaffected by this grouping. */
.project-info-bottom{ display:contents; }

.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:20px; }

.testimonial-card{ margin-bottom:6px; padding:22px 24px 18px; }

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

/* Landscape: bottom area becomes 3 columns — button/meta anchor left,
   description centered, testimonial docked bottom-right. */
.layout-landscape .project-info-bottom{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:28px;
  align-items:end;
  flex:1;
  min-height:0;
}
.layout-landscape .project-desc-scroll{ grid-column:2; margin-top:0; align-self:center; max-height:100%; }
.layout-landscape .testimonial-card{ grid-column:3; margin-bottom:0; align-self:end; }
.layout-landscape .project-info-foot{ grid-column:1; padding-top:0; align-self:end; }

@media (max-width:900px){
  .project-modal{ height:88vh; }
  .project-body.layout-portrait{ flex-direction:column; }
  .layout-portrait .project-media{ width:100%; height:220px; flex-shrink:0; }
  .layout-portrait .project-info{ width:100%; flex:1; min-height:0; }
  .layout-landscape .project-info{ height:auto; flex:1; min-height:0; }
  .layout-landscape .project-info-bottom{ display:flex; flex-direction:column; }
  .layout-landscape .testimonial-card{ display:none; }
  .project-info{ padding:24px 22px; }
}

/* ---------- 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; }