/* ====================================================================
   Rodeo Graphics — portfolio.css
   (archive-portfolio.php, taxonomy-portfolio_category.php, single-portfolio.php)
   ==================================================================== */

/* FILTER TABS */
.pf-filters { padding: 2rem 5%; border-bottom: 1px solid var(--gray-100); background: var(--white); }
.pf-filters-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pf-filter { font-size: 0.85rem; font-weight: 600; padding: 0.45rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--gray-200); color: var(--gray-600); cursor: pointer; text-decoration: none; transition: all 0.15s; background: var(--white); }
.pf-filter:hover, .pf-filter.active { background: var(--red); color: #fff; border-color: var(--red); }

/* PORTFOLIO GRID */
.pf-section { padding: 3.5rem 5% 5rem; }
.pf-section-title { font-family: 'Sora', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--gray-900); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.pf-section-title::after { content: ''; flex: 1; height: 1px; background: var(--gray-100); }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 3rem; }
.pf-card { border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--gray-100); aspect-ratio: 4/3; display: block; text-decoration: none; }
.pf-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.pf-card:hover img { transform: scale(1.05); }
.pf-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: var(--red-pale); }
.pf-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,24,39,0.88) 0%, transparent 55%); opacity: 0; transition: opacity 0.22s; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; }
.pf-card:hover .pf-overlay { opacity: 1; }
.pf-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); background: var(--red-pale); padding: 0.2rem 0.55rem; border-radius: var(--r-pill); display: inline-block; margin-bottom: 0.4rem; width: fit-content; }
.pf-title { color: #fff; font-size: 0.9rem; font-weight: 700; }
.pf-sub { color: rgba(255,255,255,0.7); font-size: 0.75rem; margin-top: 0.2rem; }
.pf-empty { padding: 3rem 0; text-align: center; color: var(--gray-600); }
.pf-empty a { color: var(--red); font-weight: 700; text-decoration: none; }

/* CASE STUDY CARD */
.case-study-card { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--r-xl); padding: 2.5rem; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.csc-text .eyebrow { color: var(--red); }
.csc-text h3 { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.csc-text p { font-size: 0.95rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 1.5rem; }
.csc-stats { display: flex; gap: 2rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.csc-stat-num { font-family: 'Sora', sans-serif; font-size: 1.75rem; font-weight: 800; color: var(--red); }
.csc-stat-label { font-size: 0.78rem; color: var(--gray-600); }
.csc-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; }
.csc-img img { width: 100%; height: 100%; object-fit: cover; }

/* SINGLE PORTFOLIO ITEM */
.pf-single { padding: 0 5% 4rem; }
.pf-single-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; margin-top: -2.5rem; }
.pf-single-img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; background: var(--gray-100); box-shadow: 0 8px 40px rgba(0,0,0,0.1); }
.pf-single-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-single-ph { font-size: 4rem; }
.pf-single-tags { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pf-tag-link { font-size: 0.75rem; font-weight: 700; color: var(--red); background: var(--red-pale); border: 1px solid var(--red-pale2); padding: 0.3rem 0.75rem; border-radius: var(--r-pill); text-decoration: none; }
.pf-single-content { font-size: 0.975rem; color: var(--gray-600); line-height: 1.8; }
.pf-single-content p { margin-bottom: 1rem; }

@media (max-width: 960px) {
  .pf-grid { grid-template-columns: 1fr 1fr; }
  .case-study-card { grid-template-columns: 1fr; }
  .pf-single-grid { grid-template-columns: 1fr; margin-top: 0; }
}
@media (max-width: 600px) {
  .pf-grid { grid-template-columns: 1fr; }
}