/* ==========================================================================
   Portfolio — filterable grid, cards & single layout.
   Uses the shared :root design tokens (--bc-*) only.
   ========================================================================== */

/* --- Intro --- */
.bc-pf-intro {padding:clamp(40px, 6vw, 80px) 0 10px;}
.bc-pf-intro__inner {display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:flex-start;}
.bc-pf-intro__eyebrow {display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--bc-secondary); font-weight:600; margin-bottom:18px;}
.bc-pf-intro__eyebrow-dot {width:8px; height:8px; border-radius:50%; background:var(--bc-secondary);}
.bc-pf-intro__title {font-size:clamp(34px, 5vw, 64px); letter-spacing:-0.03em;}
.bc-pf-intro__right {color:var(--bc-muted); font-size:18px; line-height:1.8;}
.bc-pf-intro__right p + p {margin-top:1em;}

@media (max-width: 900px) {
.bc-pf-intro__inner {grid-template-columns:1fr; gap:28px;}
}

/* --- Grid + filters --- */
.bc-pf {padding:clamp(32px, 4vw, 56px) 0 var(--bc-section-y);}
.bc-pf__filters {display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(36px, 4vw, 56px);}
.bc-pf__filter {font-size:14px; font-weight:600; color:var(--bc-text); background:var(--bc-bg-soft); border:1px solid transparent; padding:11px 22px; border-radius:var(--bc-radius-pill); transition:background .25s var(--bc-ease), color .25s var(--bc-ease), box-shadow .25s var(--bc-ease);}
.bc-pf__filter:hover {color:var(--bc-primary);}
.bc-pf__filter.is-active {background:var(--bc-primary); color:#fff; box-shadow:0 10px 24px rgba(var(--bc-primary-rgb), 0.25);}

.bc-pf__grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:28px;}
.bc-pf-card {display:block; border-radius:var(--bc-radius-lg); overflow:hidden; background:#fff; box-shadow:var(--bc-shadow-sm); transition:transform .35s var(--bc-ease), box-shadow .35s var(--bc-ease), opacity .35s var(--bc-ease);}
.bc-pf-card:hover {transform:translateY(-8px); box-shadow:var(--bc-shadow-md);}
.bc-pf-card.is-hidden {display:none;}
.bc-pf-card__media {position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--bc-bg-soft);}
.bc-pf-card__media img {width:100%; height:100%; object-fit:cover; transition:transform .6s var(--bc-ease);}
.bc-pf-card:hover .bc-pf-card__media img {transform:scale(1.06);}
.bc-pf-card__gradient {position:absolute; inset:0; background:linear-gradient(135deg, var(--bc-primary), var(--bc-secondary));}
.bc-pf-card__overlay {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(var(--bc-primary-rgb), 0.35); opacity:0; transition:opacity .35s var(--bc-ease);}
.bc-pf-card:hover .bc-pf-card__overlay {opacity:1;}
.bc-pf-card__icon {width:64px; height:64px; border-radius:50%; background:#fff; color:var(--bc-primary); display:inline-flex; align-items:center; justify-content:center; transform:translateY(12px); transition:transform .35s var(--bc-ease);}
.bc-pf-card:hover .bc-pf-card__icon {transform:translateY(0);}
.bc-pf-card__icon .bc-icon {font-size:28px;}
.bc-pf-card__body {padding:24px 26px 28px;}
.bc-pf-card__cat {display:inline-block; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--bc-secondary); margin-bottom:12px;}
.bc-pf-card__title {font-size:22px; letter-spacing:-0.02em; margin-bottom:8px;}
.bc-pf-card__sub {font-size:14.5px; color:var(--bc-muted);}

@media (max-width: 520px) {
.bc-pf__grid {grid-template-columns:1fr;}
}

/* --- Single portfolio item --- */
.bc-pf-hero {position:relative; min-height:62vh; display:flex; align-items:flex-end; padding:clamp(120px, 16vw, 220px) 0 clamp(48px, 6vw, 80px); overflow:hidden;}
.bc-pf-hero__media {position:absolute; inset:0; z-index:0;}
.bc-pf-hero__media img {width:100%; height:100%; object-fit:cover;}
.bc-pf-hero__overlay {position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,26,51,0.45), rgba(10,26,51,0.85));}
.bc-pf-hero__inner {position:relative; z-index:1; color:#fff;}
.bc-pf-hero__crumbs {display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.8); margin-bottom:18px;}
.bc-pf-hero__crumbs a:hover {color:#fff;}
.bc-pf-hero__crumbs .bc-icon {font-size:16px;}
.bc-pf-hero__cat {display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; background:rgba(255,255,255,0.16); padding:7px 14px; border-radius:var(--bc-radius-pill); margin-bottom:16px;}
.bc-pf-hero__title {font-size:var(--bc-h1); font-weight:800; letter-spacing:-0.04em; max-width:16ch;}
.bc-pf-hero__meta {margin-top:16px; font-size:16px; color:rgba(255,255,255,0.85);}
.bc-pf-hero .bc-btn {margin-top:26px;}

.bc-pf-single {padding:var(--bc-section-y) 0;}
.bc-pf-single__inner {max-width:var(--bc-container-narrow); margin:0 auto;}
.bc-pf-single__content {margin-bottom:clamp(40px, 5vw, 64px);}
.bc-pf-single__gallery {display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px;}
.bc-pf-single__gallery-item {border-radius:var(--bc-radius-md); overflow:hidden; background:var(--bc-bg-soft); box-shadow:var(--bc-shadow-sm); transition:transform .3s var(--bc-ease);}
.bc-pf-single__gallery-item:hover {transform:translateY(-4px);}
.bc-pf-single__gallery-item img {width:100%; height:auto; display:block;}