/* ---------- PORTFOLIO TABS & VIDEO SHOWCASE ---------- */
#portfolio { position: relative; overflow: hidden; }
#portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, black, transparent 75%);
  mask-image: radial-gradient(circle at 50% 35%, black, transparent 75%);
  opacity: .4;
  pointer-events: none;
}
#portfolio::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(240px circle at 8% 15%, rgba(var(--teal-rgb), 0.08), transparent 55%),
    radial-gradient(240px circle at 92% 85%, rgba(var(--accent-rgb), 0.06), transparent 55%);
  pointer-events: none;
}
#portfolio .wrap { position: relative; z-index: 1; }

/* Outer Container Card */
.pf-supabase-card {
  background: var(--bg-elev-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1. Category Tabs (Top) */
.pf-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 22px;
  border-radius: 25px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.pf-tab-btn:hover {
  color: #ffffff;
  border-color: var(--accent-3);
  background: rgba(255, 200, 87, 0.1);
  transform: translateY(-2px);
}

.pf-tab-btn.active {
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
  color: #1a0d06;
  border-color: var(--accent-3);
  font-weight: 700;
  box-shadow: 0 0 16px rgba(255, 122, 61, 0.5);
}

/* Mobile: tighter, more compact pill buttons — ~38-40px tall instead of
   ~44px. Shape, active gradient/glow, and inactive colors are untouched;
   only sizing shrinks. */
@media (max-width: 768px) {
  .pf-tabs {
    gap: 8px;
  }
  .pf-tab-btn {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* 2. Centered Video Frame (16:9) */
.pf-featured-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #000;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}

.pf-featured-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: the real restricting selector was .pf-supabase-card's 32px
   horizontal padding — it wraps both the video and the details card, so
   on a 375px screen that's 32px + the .wrap gutter on each side eaten
   before the video even starts, which is what read as "narrow video,
   huge side gaps." Cut to 16px horizontal only (vertical rhythm between
   tabs/video/details untouched) so both the video and the details card
   below it — which share this same parent padding — get noticeably wider
   together. The video/video-element rules below are the earlier
   width/aspect-ratio reinforcement; kept since it's still correct, just
   not the actual cause. */
@media (max-width: 768px) {
  .pf-supabase-card {
    padding: 32px 16px;
  }
  .pf-featured-img {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 16 / 9;
  }
  .pf-featured-img video {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* 3. Bottom Scrollable Details Card */
.pf-details-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}

.pf-details-scroll {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Scrollbar styling */
.pf-details-scroll::-webkit-scrollbar {
  width: 6px;
}

.pf-details-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

.pf-details-scroll::-webkit-scrollbar-thumb {
  background: var(--accent-3);
  border-radius: 3px;
}

/* Typography & White Colors */
.pf-details-scroll h3 {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.pf-details-scroll p {
  color: #ffffff;
  font-size: 15.5px;
  line-height: 1.6;
}

/* Tech Stack Tags */
.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.stack-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  display: inline-block;
}

/* Key Features List */
.pf-features-wrapper {
  margin-top: 6px;
}

.pf-features-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-features-list li {
  font-size: 15px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile: same card height (max-height stays 320px) and same width/colors/
   border/font-sizes — only internal padding, gaps, and the scrollbar get
   more compact so the card feels tighter against the video above it. */
@media (max-width: 768px) {
  .pf-details-card {
    padding: 16px 18px;
  }
  .pf-details-scroll {
    gap: 8px;
    padding-right: 8px;
    scrollbar-width: thin;
  }
  .pf-details-scroll::-webkit-scrollbar {
    width: 4px;
  }
  .pf-details-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
  }
  .pf-details-scroll h3 {
    margin-bottom: 4px;
  }
  .pf-features-wrapper {
    margin-top: 4px;
  }
  .pf-features-list {
    gap: 6px;
    margin-top: 6px;
  }
  .pf-stat-label {
    margin-bottom: 4px;
  }
  .pf-stats {
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
  }
  .pf-stats > div {
    padding: 12px 14px;
  }
}

.pf-features-list li::before {
  content: "▹";
  color: var(--teal);
  font-size: 16px;
}

/* Modern Stats Cards */
.pf-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pf-stats > div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
}

.pf-stat-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 6px;
}

.pf-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-3);
}

/* Request a Quote button (replaces the price value) */
.pf-quote-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent-3), var(--accent) 55%, var(--accent-2));
  color: #1a0d06;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(255, 122, 61, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pf-quote-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(255, 122, 61, 0.75);
}

.pf-quote-btn:active {
  transform: translateY(0);
}

.pf-quote-btn:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 3px;
}

.pf-quote-btn .pf-quote-arrow {
  transition: transform 0.18s ease;
}

.pf-quote-btn:hover .pf-quote-arrow {
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .pf-quote-btn {
    font-size: 12.5px;
    padding: 10px 10px;
  }
}