/* ═══════════════════════════════════════════════
   PORTFOLIO PAGE — styles specific to portafolio.html
   (tokens, nav, footer, .wrap, .btn/.btn-solid are in styles.css)
═══════════════════════════════════════════════ */

/* ─── HERO ─── */
.pf-hero{
  padding:clamp(120px,14vw,180px) 0 clamp(64px,8vw,96px);
  width:var(--wrap);margin-inline:auto;
}
.pf-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  color:var(--e);text-transform:uppercase;margin-bottom:20px;display:block;
}
.pf-title{
  font-size:clamp(32px,3.8vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.08;
  margin-bottom:20px;
}
.pf-sub{
  font-size:clamp(14px,1.2vw,17px);font-weight:300;color:var(--w-60);
  line-height:1.75;max-width:560px;
}

/* ─── FILTERS ─── */
.pf-filters{
  width:var(--wrap);margin-inline:auto;margin-bottom:clamp(40px,5vw,64px);
  display:flex;gap:8px;flex-wrap:wrap;
}
.pf-filter{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 16px;border-radius:3px;border:1px solid var(--w-10);
  color:var(--w-30);background:transparent;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.pf-filter:hover,.pf-filter[aria-pressed="true"]{
  border-color:var(--e-30);color:var(--e);background:var(--e-06);
}

/* ─── GRID ─── */
.pf-grid{
  width:var(--wrap);margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);
  margin-bottom:clamp(80px,10vw,120px);
}

/* ─── CARD ─── */
.pf-card{
  background:var(--ink-1);border:1px solid var(--w-10);border-radius:6px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .28s,transform .28s var(--ease-film),box-shadow .28s;
  cursor:default;
}
.pf-card:hover{
  border-color:var(--e-30);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,232,255,.08);
}
.pf-card-thumb{
  aspect-ratio:16/9;background:var(--ink-2);position:relative;overflow:hidden;
}
.pf-card-thumb-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.pf-card-thumb::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--e),transparent);
  opacity:.5;
}
.pf-thumb-icon{width:48px;height:48px;opacity:.12}
.pf-card-body{
  padding:clamp(20px,2vw,28px);flex:1;display:flex;flex-direction:column;gap:12px;
}
.pf-card-cat{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  color:var(--e);text-transform:uppercase;opacity:.8;
}
.pf-card-title{
  font-size:clamp(15px,1.2vw,18px);font-weight:700;letter-spacing:-.02em;
  color:var(--w);line-height:1.3;
}
.pf-card-desc{
  font-size:13px;font-weight:300;color:var(--w-60);line-height:1.65;flex:1;
}
.pf-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,2vw,28px);
  border-top:1px solid var(--w-10);
}
.pf-card-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  color:var(--w-30);
}
.pf-card-cta{
  font-family:var(--mono);font-size:9px;letter-spacing:.10em;
  color:var(--e);text-transform:uppercase;display:flex;align-items:center;gap:5px;
  opacity:.7;transition:opacity .2s,gap .2s;
}
.pf-card:hover .pf-card-cta{opacity:1;gap:8px}
.pf-card-cta svg{width:11px;height:11px}

/* ─── CARD THUMB WITH REAL IMAGE ─── */
.pf-card-thumb--img{
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}
.pf-card-thumb--img::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(4,13,20,0) 30%, rgba(4,13,20,0.55) 100%);
}
.pf-card-thumb--img .pf-card-thumb-badge{z-index:2}

/* ─── PROJECT-TYPE BADGE ─── */
.pf-card-thumb-badge{
  position:absolute;bottom:12px;left:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.10em;text-transform:uppercase;
  background:rgba(4,13,20,.72);border:1px solid var(--e-30);
  color:var(--e);padding:4px 10px;border-radius:2px;
  backdrop-filter:blur(8px);
}

/* ─── NEXT card subtle style ─── */
.pf-card--next{opacity:.55;transition:opacity .3s}
.pf-card--next:hover{opacity:.8;transform:none;box-shadow:none}

/* ─── CTA STRIP ─── */
.pf-cta-strip{
  width:var(--wrap);margin-inline:auto;margin-bottom:clamp(80px,10vw,120px);
  padding:clamp(40px,5vw,64px);
  background:var(--ink-1);border:1px solid var(--e-14);border-radius:6px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;
}
.pf-cta-strip h2{
  font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.03em;
}
.pf-cta-strip p{
  font-size:15px;font-weight:300;color:var(--w-60);max-width:480px;line-height:1.7;
}

/* ─── RESPONSIVE ─── */
@media(max-width:600px){
  .pf-hero{padding:100px 0 40px}
  .pf-title{font-size:clamp(36px,11vw,56px)}
  .pf-sub{font-size:14px}
  .pf-cta-strip{padding:32px 20px;text-align:center}
  .pf-cta-strip h2{font-size:22px}
  .pf-cta-strip p{font-size:14px}
}
@media(max-width:900px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .pf-grid{grid-template-columns:1fr}
  .pf-card-thumb{aspect-ratio:16/8}
}
@media(max-width:480px){
  .pf-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
    width:100vw;
    padding-left:clamp(16px,4vw,24px);
    padding-right:clamp(16px,4vw,24px);
    margin-left:calc(-1 * clamp(16px,4vw,24px));
  }
  .pf-filters::-webkit-scrollbar{display:none}
  .pf-filter{white-space:nowrap;flex-shrink:0}
}

/* ─── CONTACT FORM ─── */
.pf-contact-section{
  padding:clamp(80px,10vw,120px) 0 clamp(80px,10vw,120px);
  border-top:1px solid var(--w-10);
}
.pf-contact-wrap{
  width:var(--wrap);margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,6vw,96px);
  align-items:start;
}
.pf-contact-title{
  font-size:clamp(28px,3.5vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1.08;
  margin:16px 0 16px;
}
.pf-contact-sub{
  font-size:15px;font-weight:300;color:var(--w-60);line-height:1.7;
}
.pf-form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.pf-field{display:flex;flex-direction:column;gap:7px}
.pf-field--full{grid-column:1/-1}
.pf-field label{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--w-60);
}
.pf-field input,
.pf-field textarea{
  background:var(--ink-1);border:1px solid var(--w-10);border-radius:4px;
  color:var(--w);font-family:var(--sans);font-size:14px;font-weight:300;
  padding:12px 14px;outline:none;
  transition:border-color .2s;resize:none;
}
.pf-field input::placeholder,
.pf-field textarea::placeholder{color:var(--w-30)}
.pf-field input:focus,
.pf-field textarea:focus{border-color:var(--e-30)}
.pf-form-footer{
  grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px;
}
.pf-form-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--w-30);
}
.pf-form-error{
  grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:#ff8a8a;margin-top:4px;
}

@media(max-width:768px){
  .pf-contact-wrap{grid-template-columns:1fr}
  .pf-form{grid-template-columns:1fr}
  .pf-field--full{grid-column:1}
  .pf-form-footer{grid-column:1}
}
@media(max-width:480px){
  .pf-contact-title{font-size:28px}
}