/* BrandNVend — portfolio.css FINAL */

/* ── HERO ── */
.port-hero { position:relative; padding:140px 0 80px; overflow:hidden; text-align:center; }
.port-hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,#0a1228,#0e1a3a 60%,#1a0a10); }
.port-hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(204,31,54,.15),transparent 70%); }
.port-hero .container { position:relative; z-index:2; }
.port-title { font-family:'Anton',sans-serif; font-size:clamp(42px,8vw,80px); text-transform:uppercase; letter-spacing:2px; color:#fff; margin:8px 0; line-height:1; }
.port-title span { color:#e8253f; }
.port-sub { font-size:1rem; color:rgba(255,255,255,.6); max-width:540px; margin:16px auto 0; font-weight:400; line-height:1.7; }

/* ── FILTER BAR ── */
.port-filter-bar { background:#0e1a3a; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:96px; z-index:400; box-shadow:0 4px 20px rgba(0,0,0,.4); }
.port-filters { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.port-filters::-webkit-scrollbar { display:none; }
.pf-btn { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.6); background:none; border:none; padding:18px 20px; cursor:pointer; white-space:nowrap; position:relative; transition:color .2s; flex-shrink:0; }
.pf-btn::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#cc1f36; transform:scaleX(0); transition:transform .25s; }
.pf-btn:hover { color:#fff; }
.pf-btn.active { color:#e8253f; }
.pf-btn.active::after { transform:scaleX(1); }

/* ── SECTIONS ── */
.port-section { padding:80px 0; scroll-margin-top:160px; }
.port-section.alt-bg { background:rgba(255,255,255,.02); }
.port-section.hidden { display:none; }
.port-sec-header { display:flex; align-items:flex-start; justify-content:space-between; gap:40px; margin-bottom:48px; flex-wrap:wrap; }
.port-cat-title { font-family:'Anton',sans-serif; font-size:clamp(32px,5vw,52px); text-transform:uppercase; color:#fff; line-height:1; }
.port-cat-title span { color:#e8253f; }
.port-cat-desc { font-size:.95rem; color:rgba(255,255,255,.6); max-width:460px; line-height:1.7; font-weight:400; margin-top:8px; flex-shrink:0; }

/* ══════════════════════════════════════════
   CAROUSEL
   MOBILE: CSS grid — all cards visible, stacked
   DESKTOP 769px+: flex row with JS sliding
══════════════════════════════════════════ */

/* Wrap — no special styles needed on mobile */
.carousel-wrap { position:relative; }

/* MOBILE DEFAULT — grid, all cards visible */
.carousel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

/* Hide arrows and dots on mobile */
.carr-arrow { display:none !important; }
.carousel-dots { display:none; }

/* ── DESKTOP CAROUSEL ── */
@media(min-width:769px) {
  .carousel-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .carousel {
    display: flex !important;
    flex-direction: row;
    gap: 20px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
  }

  .port-card {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px;
  }

  .carr-arrow {
    display: flex !important;
    width: 44px; height: 44px; min-width: 44px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff; font-size: 1rem;
    align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer;
    transition: all .2s;
  }
  .carr-arrow:hover { background:#cc1f36; border-color:#cc1f36; }

  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  .c-dot { width:8px; height:8px; background:rgba(255,255,255,.15); border-radius:50%; cursor:pointer; transition:all .25s; border:none; padding:0; }
  .c-dot.active { background:#cc1f36; width:24px; border-radius:4px; }
}

/* ── CARDS ── */
.port-card { background:#111e44; border:1px solid rgba(255,255,255,.08); overflow:hidden; transition:border-color .3s,box-shadow .3s; position:relative; width:100%; }
.port-card:hover { border-color:rgba(204,31,54,.4); box-shadow:0 16px 40px rgba(0,0,0,.5); }

/* Image */
.port-card-img { width:100%; height:220px; position:relative; overflow:hidden; display:block; background:#0e1a3a; }
.port-card-img img { width:100% !important; height:100% !important; object-fit:cover; display:block; cursor:pointer; transition:transform .4s; }
.port-card:hover .port-card-img img { transform:scale(1.04); }

/* Overlay */
.port-overlay { position:absolute; inset:0; background:rgba(204,31,54,.88); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; cursor:pointer; }
.port-overlay span, .port-overlay a { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:.9rem; letter-spacing:3px; text-transform:uppercase; color:#fff; text-decoration:none; }
.port-card:hover .port-overlay { opacity:1; }

/* Card info */
.port-card-info { padding:20px; }
.port-card-cat { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:3px; text-transform:uppercase; color:#e8253f; margin-bottom:6px; }
.port-card-name { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.2rem; letter-spacing:.5px; text-transform:uppercase; color:#fff; margin-bottom:8px; }
.port-card-desc { font-size:.85rem; color:rgba(255,255,255,.6); line-height:1.6; font-weight:400; }

/* Coming soon */
.coming-soon-card { opacity:.6; }
.cs-img { display:flex !important; align-items:center; justify-content:center; background:linear-gradient(135deg,#111e44,#0e1a3a) !important; border:2px dashed rgba(255,255,255,.1) !important; }
.cs-inner { text-align:center; color:rgba(255,255,255,.6); }
.cs-plus { font-size:2.5rem; display:block; color:rgba(255,255,255,.2); line-height:1; margin-bottom:8px; }
.cs-inner p { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:2px; text-transform:uppercase; }

/* ── CTA ── */
.cta-band { background:linear-gradient(135deg,#cc1f36,#8b0000); padding:80px 5%; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-text h2 { font-family:'Anton',sans-serif; font-size:clamp(28px,4vw,48px); text-transform:uppercase; color:#fff; line-height:1.1; letter-spacing:1px; }
.cta-text h2 em { font-style:italic; color:rgba(255,255,255,.75); }
.cta-tag { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:8px; }
.btn-white { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:.9rem; letter-spacing:3px; text-transform:uppercase; color:#cc1f36; background:#fff; padding:16px 36px; border:none; text-decoration:none; display:inline-block; white-space:nowrap; transition:all .2s; }
.btn-white:hover { background:#0b1531; color:#fff; }

/* ── LIGHTBOX ── */
.lightbox { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.94); align-items:center; justify-content:center; padding:16px; cursor:zoom-out; }
.lightbox.open { display:flex !important; }
.lb-inner { position:relative; max-width:94vw; max-height:94vh; cursor:default; display:flex; flex-direction:column; align-items:center; }
.lb-inner img { max-width:94vw; max-height:86vh; object-fit:contain; display:block; box-shadow:0 0 80px rgba(0,0,0,.8); }
.lb-close { position:absolute; top:-48px; right:0; font-size:2.2rem; color:rgba(255,255,255,.6); cursor:pointer; background:none; border:none; line-height:1; padding:4px 10px; transition:color .2s; }
.lb-close:hover { color:#e8253f; }
.lb-caption { text-align:center; font-family:'Barlow Condensed',sans-serif; font-size:.8rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:14px; }