/* Portfolio / case-study component.
   Shared by website-issues.html and email-deliverability.html.
   Extracted from website-issues.html inline <style> on 2026-08-16 so both pages use one source.
   Card markup stays in each page's HTML (crawlable); only CSS + behaviour are shared. */


/* --- WEBSITE PORTFOLIO SECTION --- */
.portfolio-section { padding: 70px 0; background: #ffffff; }
.portfolio-header { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.portfolio-header h2 { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
.portfolio-header p { color: #666; font-size: 16px; line-height: 1.6; }

.portfolio-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0 40px;
}
.portfolio-stats .pf-stat-item { text-align: center; }
.portfolio-stats .pf-stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #F5B400;
  font-family: 'Inter', sans-serif;
}
.portfolio-stats .pf-stat-label {
  font-size: 0.85rem;
  color: #666;
  letter-spacing: 0.5px;
}

.portfolio-filter { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 0 30px; }
.pf-filter-btn {
  padding: 8px 18px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  background: #fff;
  color: #333;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}
.pf-filter-btn:hover, .pf-filter-btn.active {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 1rem;
}
.pf-card {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.pf-card:hover {
  border-color: #F5B400;
  box-shadow: 0 8px 22px rgba(245, 180, 0, 0.12);
  transform: translateY(-3px);
}
.pf-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f4f6fa;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.pf-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.4s ease;
}
.pf-card:hover .pf-shot img { transform: scale(1.04); }
.pf-shot.no-shot { display: flex; align-items: center; justify-content: center; }
.pf-shot.no-shot::after {
  content: attr(data-fallback);
  color: #94a3b8;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}
.pf-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.pf-card h3 {
  font-size: 1.2rem;
  color: #0f172a;
  margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
}
.pf-card .pf-domain {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 12px;
}
.pf-card p {
  color: #444;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 14px;
}
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pf-tags .pf-tag {
  background: #fff8e1;
  color: #8a6300;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
}

@media (max-width: 600px) {
  .pf-grid { grid-template-columns: 1fr; }
  .portfolio-stats { gap: 1.5rem; }
}