/* portfolio-index.css
 * Styles for the /portfolio index page.
 * Extends theme.css (dark navy, Syne+Satoshi, amber accent).
 * Adds: portfolio grid cards, browser preview mockups, per-preview themes.
 */

/* ── HEADER ───────────────────────────────────────────── */
.port-header {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy) 100%);
}
.port-header-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 6rem 2rem 5rem;
}

/* ── PORTFOLIO GRID ───────────────────────────────────── */
.port-grid-section { padding: 0; }
.port-grid-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 5rem 2rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* ── CARD ─────────────────────────────────────────────── */
.port-card {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  display: flex; flex-direction: column;
}
.port-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}

/* ── BROWSER PREVIEW ──────────────────────────────────── */
.port-preview-link {
  display: block; position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.port-preview {
  aspect-ratio: 16/10; overflow: hidden;
  position: relative;
}
.port-preview-overlay {
  position: absolute; inset: 0;
  background: rgba(11,15,26,0.75);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
  backdrop-filter: blur(2px);
}
.port-preview-overlay span {
  font-family: var(--font-display);
  font-size: 0.875rem; font-weight: 700;
  color: var(--amber); letter-spacing: 0.04em;
  border: 1px solid var(--amber);
  padding: 0.5rem 1.1rem; border-radius: 100px;
}
.port-preview-link:hover .port-preview-overlay { opacity: 1; }

/* browser chrome bar */
.pv-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #1a1a2e; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pv-chrome.light { background: #e8e2da; border-bottom: 1px solid rgba(0,0,0,0.08); }
.pv-chrome.dark  { background: #111111; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pv-dots { display: flex; gap: 4px; }
.pv-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.pv-dots.dark span { background: rgba(0,0,0,0.18); }
.pv-url {
  flex: 1; text-align: center;
  font-size: 0.6rem; color: rgba(255,255,255,0.25);
  font-family: 'Satoshi', sans-serif; letter-spacing: 0.04em;
}
.pv-url.dark { color: rgba(0,0,0,0.3); }

/* shared mock elements */
.pv-content { padding: 12px; flex: 1; }
.pv-nav-mock { height: 8px; background: rgba(255,255,255,0.05); border-radius:2px; margin-bottom:10px; }
.pv-nav-mock.light { background: rgba(0,0,0,0.07); }
.pv-nav-mock.dark  { background: rgba(255,255,255,0.04); }

/* ── VAULTLY PREVIEW ──────────────────────────────────── */
.vaultly-preview { background: #09090f; }
.vaultly-preview .pv-content { display:flex; gap:12px; }
.vaultly-preview .pv-hero-mock { flex:1; padding-top:4px; }
.pv-chip-mock { width:90px; height:10px; background:rgba(0,229,180,0.18); border-radius:100px; margin-bottom:10px; }
.pv-h1-mock { height:10px; background:rgba(255,255,255,0.12); border-radius:3px; margin-bottom:5px; }
.pv-h1-mock.short { width:70%; }
.pv-sub-mock { height:7px; background:rgba(255,255,255,0.06); border-radius:2px; margin-bottom:4px; }
.pv-sub-mock.shorter { width:65%; }
.pv-btns-mock { display:flex; gap:6px; margin-top:10px; }
.pv-btn { height:16px; border-radius:4px; }
.pv-btn.teal { width:70px; background:#00e5b4; opacity:0.7; }
.pv-btn.ghost { width:55px; background:rgba(255,255,255,0.1); }
.pv-btn.terra { width:80px; background:#c38b64; opacity:0.75; }
.pv-btn.text-link { width:60px; background:transparent; border-bottom:1px solid rgba(195,139,100,0.3); border-radius:0; height:12px; }
.pv-btn.white { width:80px; background:rgba(255,255,255,0.85); }
.pv-dash-mock {
  width:48%; background:rgba(255,255,255,0.03);
  border:1px solid rgba(0,229,180,0.1);
  border-radius:6px; padding:6px; align-self:flex-start;
}
.pv-dash-bar { height:8px; background:rgba(255,255,255,0.07); border-radius:2px; margin-bottom:6px; }
.pv-dash-row { height:8px; background:rgba(255,255,255,0.04); border-radius:2px; margin-bottom:3px; }
.pv-dash-row.active { background:rgba(0,229,180,0.1); }

/* ── EMBER PREVIEW ────────────────────────────────────── */
.ember-preview { background: #f8f4ef; }
.ember-preview .pv-content { display:flex; gap:12px; }
.ember-preview .pv-hero-mock { flex:1; padding-top:2px; }
.pv-tag-mock { width:100px; height:7px; background:rgba(195,139,100,0.3); border-radius:2px; margin-bottom:8px; }
.pv-serif-h1 { height:11px; background:rgba(42,36,32,0.15); border-radius:2px; margin-bottom:5px; }
.pv-serif-h1.italic { width:55%; background:rgba(195,139,100,0.2); }
.pv-sub-mock.warm { background:rgba(42,36,32,0.08); }
.pv-btn.terra { width:80px; background:#c38b64; opacity:0.8; }
.pv-sched-mock {
  width:44%; display:flex; gap:5px; align-self:flex-start; padding-top:6px;
}
.pv-sched-col { flex:1; display:flex; flex-direction:column; gap:4px; }
.pv-sched-col div { height:14px; background:rgba(42,36,32,0.07); border-radius:3px; border:1px solid rgba(195,139,100,0.12); }

/* ── OBSDN PREVIEW ────────────────────────────────────── */
.obsdn-preview { background: #080808; }
.obsdn-preview .pv-content { display:flex; gap:10px; }
.obsdn-preview .pv-hero-mock { flex:1; padding-top:4px; }
.pv-drop-tag { width:80px; height:7px; background:rgba(200,169,106,0.25); border-radius:100px; margin-bottom:10px; }
.pv-bebas-h1 { height:16px; background:rgba(255,255,255,0.1); border-radius:2px; margin-bottom:4px; width:85%; }
.pv-sub-mock.muted { background:rgba(255,255,255,0.05); }
.pv-btn.white { width:70px; background:rgba(240,237,232,0.8); }
.pv-bottle-mock {
  width:36px; align-self:flex-end;
  display:flex; flex-direction:column; align-items:center; padding-bottom:4px;
}
.pv-bottle-cap-m {
  width:22px; height:10px;
  background:linear-gradient(180deg, #252525, #181818);
  border-radius:2px 2px 0 0;
}
.pv-bottle-body-m {
  width:30px; height:80px;
  background:linear-gradient(160deg, #1a1a1a, #0a0a0a);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:2px 2px 6px 6px;
}
.pv-bottle-glow-m {
  width:24px; height:4px; margin-top:2px;
  background:radial-gradient(ellipse, rgba(200,169,106,0.2) 0%, transparent 70%);
}

/* ── CARD META ────────────────────────────────────────── */
.port-card-meta { padding: 1.5rem 1.75rem 1.75rem; flex:1; display:flex; flex-direction:column; }
.port-card-tags { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.875rem; }
.port-tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber);
  background: var(--amber-dim); border: 1px solid rgba(245,158,11,0.2);
  padding: 3px 8px; border-radius: 4px;
}
.port-card-meta h3 {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--fg); margin-bottom: 0.5rem;
}
.port-card-meta p {
  font-size: 0.875rem; color: var(--fg-muted);
  line-height: 1.7; flex: 1;
}
.port-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.port-stat {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.78rem; color: var(--fg-faint);
}
.port-view-btn {
  font-size: 0.82rem; font-weight: 700; color: var(--amber);
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.port-view-btn:hover { opacity: 0.7; }

/* ── CTA STRIP ────────────────────────────────────────── */
.port-cta {
  background: var(--navy-card);
  border-top: 1px solid var(--border);
}
.port-cta-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 5rem 2rem;
  display: grid; grid-template-columns: 1fr auto;
  gap: 3rem; align-items: center;
}
.port-cta-right {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  flex-shrink: 0;
}
.port-cta-note { font-size: 0.8rem; color: var(--fg-muted); }

/* ── FOOTER OVERRIDES ─────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 2rem; }
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.footer-brand { font-size: 1rem; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: 0.85rem; color: var(--fg-muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--fg); }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 960px) {
  .port-grid-inner { grid-template-columns: 1fr 1fr; }
  .port-cta-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .port-grid-inner { grid-template-columns: 1fr; }
  .port-cta-right { align-items: stretch; }
  .port-cta-right .btn-primary { text-align: center; }
}