/* ========================================
   PORTOFOLIU – Futuristic, mobile-first
   Videos open in modal (no crop), slides stay
   ======================================== */

   :root{
    --ring-glow: 0 0 40px rgba(204,204,204,.25);
    --dot-size: 10px;
  }
  
  /* Section */
  .works-section {
    padding: 80px 20px;
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.06) 0%, transparent 60%),
      radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.05) 0%, transparent 60%),
      linear-gradient(135deg, var(--deep-space) 0%, var(--midnight-black) 100%);
  }
  
  /* Intro */
  .works-intro {
    max-width: 980px; margin: 0 auto 50px; padding: 36px 28px; text-align:center;
    position: relative; overflow: hidden;
  }
  .works-intro h1 { font-size: 2.6rem; margin-bottom: .5rem; }
  .works-intro p { color: var(--light-grey); font-size: 1.05rem; line-height: 1.65; max-width: 820px; margin: 0 auto; }
  .works-intro .halo{
    position:absolute; inset:-1px; pointer-events:none; border-radius: var(--border-radius-large);
    background: radial-gradient(600px 300px at 50% -10%, rgba(255,255,255,.08) 0%, transparent 60%);
    border: 1px solid var(--glass-border); box-shadow: var(--shadow-glow);
  }
  
  /* =============================
     VIDEO GALLERY (poster cards)
     ============================= */
  .video-gallery{
    display:grid; gap:24px; margin:0 auto 56px; max-width:1200px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px){ .video-gallery{ grid-template-columns: repeat(2,1fr);} }
  @media (min-width: 1024px){ .video-gallery{ grid-template-columns: repeat(3,1fr);} }
  
  .video-card{
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: var(--glass-blur);
    border:1px solid var(--glass-border);
    border-radius: var(--border-radius-medium);
    overflow:hidden; transition: var(--transition-medium); position:relative;
  }
  .video-card:hover{ transform: translateY(-6px); box-shadow: var(--ring-glow); border-color: rgba(255,255,255,.18); }
  .video-card h3{ margin: 12px 14px 16px; font-size: 1.05rem; color: var(--off-white); text-align:center; }
  
  /* Aspect helpers (poster box keeps ratio; image fits contain) */
  .video-card .poster{ position:relative; background:#0a0a0a; overflow:hidden; }
  .aspect-16x9 .poster{ aspect-ratio: 16 / 9; }
  .aspect-9x16 .poster{ aspect-ratio: 9 / 16; }
  .aspect-auto .poster{ aspect-ratio: 1 / 1; } /* safe default */
  .video-card .poster img{
    width:100%; height:100%; object-fit: contain; display:block;
  }
  
  /* Play button */
  .play-btn{
    position:absolute; inset:auto 50% 50% auto; transform: translate(50%, 50%);
    width:64px; height:64px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.55); display:grid; place-items:center; cursor:pointer;
    box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: var(--transition-fast);
  }
  .play-btn span{
    width:0; height:0; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:2px;
  }
  .play-btn:hover{ transform: translate(50%, 50%) scale(1.06); background: rgba(0,0,0,.8); }
  
  /* =============================
     PHOTO SLIDESHOWS
     ============================= */
  .photo-showcase{ max-width:1200px; margin:0 auto 60px; display:grid; grid-template-columns:1fr; gap:28px; }
  @media (min-width:1024px){ .photo-showcase{ grid-template-columns:1fr 1fr; gap:36px; } }
  
  .slideshow-block h2{ color:var(--white); font-size:1.6rem; margin-bottom:12px; text-align:center; }
  
  .slideshow{
    position:relative; overflow:hidden; border-radius: var(--border-radius-medium);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: var(--glass-blur);
    border:1px solid var(--glass-border); box-shadow: var(--shadow-medium); outline:none;
  }
  .slideshow .slide{ display:none; width:100%; }
  .slideshow .slide.active{ display:block; }
  .slideshow .slide img{ width:100%; height:auto; object-fit:cover; display:block; }
  
  .slideshow .controls{
    position:absolute; top:50%; left:0; right:0; transform: translateY(-50%);
    display:flex; justify-content:space-between; padding:0 8px; pointer-events:none;
  }
  .slideshow .controls button{
    pointer-events:all; background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
    color:#fff; width:42px; height:42px; border-radius:50%; font-size:1.05rem; cursor:pointer; transition: var(--transition-fast);
    display:grid; place-items:center;
  }
  .slideshow .controls button:hover{ background: rgba(0,0,0,.8); transform: scale(1.06); }
  
  /* Dots */
  .slideshow .dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
  .slideshow .dots button{
    width: var(--dot-size); height: var(--dot-size); border-radius:50%;
    border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.18);
    cursor:pointer; transition: var(--transition-fast);
  }
  .slideshow .dots button.active,
  .slideshow .dots button:hover{ background: var(--silver); border-color: rgba(255,255,255,.4); }
  
  /* Footer spacing adjustments for this page */
  body.page-portofoliu .main-content{ min-height: unset !important; padding-bottom:0 !important; }
  body.page-portofoliu .works-section{ padding-bottom:0; }
  body.page-portofoliu .works-section > *:last-child{ margin-bottom:0; }
  body.page-portofoliu footer{ margin-top:0 !important; }
  
  /* =============================
     MODAL VIDEO PLAYER
     ============================= */
  .video-modal{ position:fixed; inset:0; display:none; z-index:5000; }
  .video-modal.open{ display:block; }
  .vm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); }
  .vm-dialog{
    position:absolute; inset:6% 4%; display:flex; flex-direction:column;
    border-radius: var(--border-radius-large); border:1px solid var(--glass-border);
    background: rgba(18,18,18,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--shadow-heavy);
  }
  .vm-close{
    position:absolute; top:10px; right:14px; width:42px; height:42px; border-radius:50%;
    background: rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.18);
    font-size:1.4rem; cursor:pointer; transition: var(--transition-fast); z-index:10;
  }
  .vm-close:hover{ background: rgba(0,0,0,.8); transform: scale(1.05); }
  
  .vm-stage{
    margin:auto; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .vm-video{
    max-width:90vw; max-height:80vh; width:auto; height:auto;
    display:block; background:#000; border-radius:12px; box-shadow: var(--shadow-medium);
    object-fit: contain; /* key: never crop, keep full frame */
  }
  
  /* Responsive tweaks */
  @media (max-width: 768px){
    .works-section{ padding:64px 16px; }
    .works-intro{ padding:28px 18px; }
    .works-intro h1{ font-size:2.2rem; }
    .video-gallery{ gap:18px; }
    .slideshow .controls button{ width:38px; height:38px; font-size:1rem; }
    .vm-dialog{ inset:8% 3%; }
  }
  @media (max-width: 480px){
    .works-intro{ padding:22px 14px; }
    .works-intro h1{ font-size:1.9rem; }
    .slideshow .controls button{ width:34px; height:34px; font-size:.95rem; }
    .slideshow .dots{ bottom:8px; }
    .vm-dialog{ inset:10% 2%; }
  }
  @media (prefers-reduced-motion: reduce){
    .video-card:hover{ transform:none; }
  }