/* ==========================================================================
   APEX MEDIA — portfolio.css
   Additive stylesheet for the Portfolio page only. Loaded AFTER style.css
   and reuses the same design tokens (colors, type, spacing, easing)
   defined in :root there. Does not modify or override any Home, Services,
   Team or Pricing selector — every new class below is scoped to elements
   unique to portfolio.html. Card visuals (.p-card / .p-thumb / .p-play /
   .p-info / .p-cat / .p-title) are reused as-is from style.css so every
   portfolio item looks identical to the rest of the site's design system.
   ========================================================================== */

/* ---- Breadcrumb + active nav state (same pattern as services.css / team.css) ---- */
.breadcrumb{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; color:var(--gray-dim); letter-spacing:.04em; margin:0 0 22px;
}
.breadcrumb a{ color:var(--gray-dim); transition:color .3s; }
.breadcrumb a:hover{ color:var(--red-bright); }
.breadcrumb span{ color:var(--gray-dim); opacity:.6; }
.breadcrumb em{ font-style:normal; color:var(--white); }
.main-nav a.active{ color:var(--white); }
.main-nav a.active::after{ width:100%; }

/* ---- Compact hero modifier — keeps the page short & focused ---- */
.hero-compact{ min-height:auto; padding:150px 32px 100px; }
.hero-compact .hero-title{ font-size:clamp(38px,6.6vw,78px); margin-bottom:20px; }
.hero-compact .hero-sub{ margin-bottom:0; }

/* ==========================================================================
   GALLERY SECTIONS
   ========================================================================== */
.gallery-section{ padding:130px 0; }
.gallery-section.alt{ background:var(--black-deep); }

.gallery-label{
  font-family:var(--font-body); font-weight:800; font-size:14.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--white);
  margin:56px 0 26px; padding-left:16px; position:relative;
}
.gallery-label::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:3px;
  border-radius:3px; background:linear-gradient(180deg, var(--red-bright), var(--red));
  box-shadow:0 0 12px var(--red-glow);
}
.gallery-label-spaced{ margin-top:76px; }

/* ---- Grid: 4 per row on desktop for every gallery on this page ---- */
.gallery-grid{
  margin-top:52px; display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.gallery-label + .gallery-grid{ margin-top:0; }
.gallery-grid.mode-thumb .p-info{ padding:16px 18px 20px; }

/* ==========================================================================
   COMPACT CTA — reuses .final-cta from style.css with tighter padding
   ========================================================================== */
.final-cta-compact{ padding:120px 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  .gallery-section{ padding:100px 0; }
}

@media (max-width:640px){
  .breadcrumb{ font-size:11.5px; }
  .hero-compact{ padding:130px 20px 80px; }
  .gallery-grid{ grid-template-columns:1fr; gap:20px; }
  .gallery-label{ margin:44px 0 20px; }
  .gallery-label-spaced{ margin-top:58px; }
  .final-cta-compact{ padding:90px 0; }
}