/* =============================================================
   BOBELS INTERNATIONAL & ASSOCIATES
   Showcase Page Styles  ·  showcase.css
   Image Gallery · Filter Bar · Lightbox
   ============================================================= */

/* ============ GALLERY FILTER BAR ============ */
.gallery-filter{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:48px;
}
.gf-btn{
  font-family:var(--font-display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 24px;border-radius:var(--radius);
  border:1px solid var(--line);color:var(--ink-dim);
  background:transparent;
  cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.gf-btn:hover{border-color:var(--steel);color:var(--ink);transform:translateY(-2px);}
.gf-btn.active{
  background:var(--amber);color:#081420;border-color:var(--amber);
}

/* ============ GALLERY GRID ============ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:start;
}
/* Wide cards span 2 columns */
.gal-card--wide{grid-column:span 2;}

@media (max-width:768px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gal-card--wide{grid-column:span 2;}
}
@media (max-width:480px){
  .gallery-grid{grid-template-columns:1fr;}
  .gal-card--wide{grid-column:span 1;}
}

/* ============ GALLERY CARD ============ */
.gal-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  display:flex;
  flex-direction:column;
  cursor:pointer;
}
.gal-card:hover{
  transform:translateY(-6px);
  border-color:var(--steel);
  box-shadow:var(--shadow-md);
}

/* Image area */
.gal-img-wrap{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--bg-raised);
  flex-shrink:0;
}
/* Real images (added by user) */
.gal-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .5s var(--ease);
}
.gal-card:hover .gal-img-wrap img{transform:scale(1.06);}
/* Hide browser broken-image icon while src is empty */
.gal-img-wrap img:not([src]), .gal-img-wrap img[src=""]{opacity:0;}

/* Placeholder block */
.ph-img{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg-raised) 0%,var(--bg-card) 100%);
  border-bottom:1px dashed var(--line);
}
.ph-inner{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--ink-faint);pointer-events:none;
}
.ph-inner svg{width:48px;height:48px;opacity:.5;}
.ph-inner span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6;
}

/* Hover overlay with zoom icon */
.gal-overlay{
  position:absolute;inset:0;
  background:rgba(8,20,32,.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s var(--ease);
  backdrop-filter:blur(2px);
}
.gal-card:hover .gal-overlay{opacity:1;}
.gal-zoom{
  width:52px;height:52px;border-radius:50%;
  background:var(--amber);color:#081420;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.8);transition:transform .3s var(--ease-out);
  cursor:pointer;
  box-shadow:0 8px 32px -8px rgba(242,169,59,.6);
}
.gal-card:hover .gal-zoom{transform:scale(1);}
.gal-zoom svg{width:20px;height:20px;}

/* Card body */
.gal-body{padding:24px 26px 26px;}
.gal-cat{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:10px;
}
.gal-title{
  font-family:var(--font-display);font-size:18px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.2;margin-bottom:10px;
  transition:color .2s;
}
.gal-card:hover .gal-title{color:var(--amber);}
.gal-desc{font-size:14px;color:var(--ink-dim);line-height:1.7;margin:0;}

/* ============ EMPTY STATE ============ */
.gallery-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:80px 20px;
  border:1px dashed var(--line);border-radius:var(--radius-lg);
  text-align:center;margin-top:8px;
}
.gallery-empty svg{width:56px;height:56px;color:var(--ink-faint);opacity:.45;}
.gallery-empty p{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.lightbox.open{opacity:1;pointer-events:auto;}

.lb-backdrop{
  position:fixed;inset:0;z-index:399;
  background:rgba(4,11,20,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.lb-backdrop.open{opacity:1;pointer-events:auto;}

.lb-inner{
  position:relative;z-index:401;
  max-width:1100px;width:100%;
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:translateY(20px) scale(.97);
  transition:transform .35s var(--ease-out);
}
.lightbox.open .lb-inner{transform:translateY(0) scale(1);}

.lb-img{
  display:block;width:100%;
  max-height:78vh;
  object-fit:contain;
  background:rgba(4,11,20,.65);
  border-bottom:1px solid var(--line);
}
.lb-meta{padding:28px 32px;}
.lb-cat{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:10px;
}
.lb-meta h3{
  font-family:var(--font-display);font-size:22px;text-transform:uppercase;
  margin-bottom:10px;
}
.lb-meta p{font-size:15px;color:var(--ink-dim);line-height:1.7;margin:0;}

.lb-close{
  position:fixed;top:24px;right:28px;z-index:402;
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--line);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}
.lb-close:hover{border-color:var(--amber);color:var(--amber);transform:rotate(90deg);}
.lb-close svg{width:18px;height:18px;}

/* ============ FILTER FADE-IN ANIMATION ============ */
@keyframes galFadeIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* ============ VIDEO SECTION ============ */
.vid-section{ padding:var(--section-gap) 0; }

/* Grid – single column by default, expands to 2 columns at larger screens */
.vid-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));
  gap:28px;
}

/* Card shell */
.vid-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.vid-card:hover{
  transform:translateY(-5px);
  border-color:var(--steel);
  box-shadow:var(--shadow-md);
}

/* Responsive 16:9 iframe wrapper */
.vid-frame-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg-raised);
  flex-shrink:0;
}
.vid-iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* Card body */
.vid-body{padding:22px 26px 26px;}
.vid-cat{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:10px;
}
.vid-title{
  font-family:var(--font-display);font-size:18px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.2;margin-bottom:10px;
  transition:color .2s;
}
.vid-card:hover .vid-title{color:var(--amber);}
.vid-desc{font-size:14px;color:var(--ink-dim);line-height:1.7;margin:0 0 18px;}

/* "Watch on YouTube" link */
.vid-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;
  transition:gap .2s var(--ease),opacity .2s;
}
.vid-link:hover{gap:14px;opacity:.8;}
.vid-link svg{width:16px;height:16px;flex-shrink:0;}

@media(max-width:640px){
  .vid-grid{grid-template-columns:1fr;}
  .vid-body{padding:18px 20px 22px;}
}

/* ---- Thumbnail click-to-play ---- */
.yt-thumb-wrap{
  cursor:pointer;
  position:relative;
}
.yt-thumb-wrap img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s var(--ease),filter .3s;
}
.yt-thumb-wrap:hover img,
.yt-thumb-wrap:focus-visible img{
  transform:scale(1.04);
  filter:brightness(.75);
}
.yt-no-thumb{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-raised);
  color:var(--ink-faint);
}
.yt-no-thumb svg{width:48px;height:48px;opacity:.4;}

/* Play button */
.yt-play-btn{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.85);
  transition:transform .25s var(--ease-out),opacity .25s;
  opacity:.92;
  pointer-events:none;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.55));
}
.yt-thumb-wrap:hover .yt-play-btn,
.yt-thumb-wrap:focus-visible .yt-play-btn{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}

/* Date + category row */
.yt-meta-row{
  display:flex;align-items:center;gap:14px;
  margin-bottom:10px;
}
.yt-date{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---- Loading skeleton ---- */
.yt-loader{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));
  gap:28px;
  margin-top:8px;
}
.yt-skeleton{
  height:320px;
  border-radius:var(--radius-lg);
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-raised) 50%,var(--bg-card) 75%);
  background-size:200% 100%;
  animation:ytShimmer 1.6s infinite linear;
  border:1px solid var(--line);
}
@keyframes ytShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}