/* ================================================================
   RAMOS AUTOMATIONS — PORTFOLIO PAGE STYLES (work.html)
   Loaded AFTER styles.css; reuses its tokens (--navy, --orange,
   --border, --radius-*, --muted …). Everything here is prefixed
   "pf-" so it can't clash with the main site.

   SECTIONS
   1. Page hero tweak + nav current state
   2. Filter chips
   3. Project groups & grids
   4. Project cards
   5. Screenshot slider
   6. Responsive
================================================================ */

/* ---------------------------------------------------------------
   1. PAGE HERO + NAV CURRENT STATE
--------------------------------------------------------------- */
.pf-hero { padding: 88px 0 64px; }
.main-nav a.is-current { color: var(--orange); }

/* ---------------------------------------------------------------
   2. FILTER CHIPS
--------------------------------------------------------------- */
.pf-filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 56px;
}
.pf-chip {
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px; font-weight: 700;
  min-height: 44px; padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(11,30,58,0.18);
  background: var(--white); color: var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pf-chip:hover { border-color: rgba(11,30,58,0.4); }
.pf-chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pf-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------------------------------------------------------------
   3. GROUPS & GRIDS
--------------------------------------------------------------- */
.pf-group { margin-bottom: 72px; }
.pf-group:last-child { margin-bottom: 0; }
.pf-group[hidden] { display: none; }
.pf-group-head { margin-bottom: 36px; }

.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

/* ---------------------------------------------------------------
   4. PROJECT CARDS
--------------------------------------------------------------- */
.pf-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pf-card:hover { box-shadow: 0 16px 40px rgba(11,30,58,0.1); transform: translateY(-2px); }
.pf-meta { padding: 24px 26px 28px; }
.pf-meta .project-tag { color: #C24E15; }
.pf-meta h3 { font-size: 17px; font-weight: 700; margin: 8px 0; }
.pf-meta p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.pf-card-featured { flex-direction: row; margin-bottom: 26px; }
.pf-card-featured .pf-slider { flex: 1.4 1 0; height: auto; min-height: 340px; }
.pf-card-featured .pf-meta { flex: 1 1 0; padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.pf-card-featured .pf-meta h3 { font-size: 22px; }
.pf-card-featured .pf-meta p { font-size: 15.5px; line-height: 1.65; }

/* ---------------------------------------------------------------
   5. SCREENSHOT SLIDER
   Track moves with transform (NOT scrollIntoView — that makes the
   whole page jump). Arrows/dots are injected by portfolio.js.
--------------------------------------------------------------- */
.pf-slider {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg,
    rgba(11,30,58,0.05) 0px, rgba(11,30,58,0.05) 10px,
    rgba(11,30,58,0.09) 10px, rgba(11,30,58,0.09) 20px);
}
.pf-slider-tall { height: 280px; }

.pf-slide-link { position: absolute; inset: 0; display: block; }
.pf-track {
  display: flex; height: 100%;
  transition: transform 0.45s ease;
}
.pf-track img {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* Missing screenshot → striped placeholder with a label */
.pf-track .pf-missing {
  flex: 0 0 100%;
  display: flex; align-items: center; justify-content: center;
}
.pf-track .pf-missing span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600;
  color: var(--navy-soft);
  background: rgba(255,255,255,0.85);
  padding: 6px 12px; border-radius: 6px;
}

.pf-badge {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--navy); color: var(--white);
  font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 999px;
  transition: background 0.15s ease;
}
.pf-slide-link:hover .pf-badge,
.pf-slide-link:focus-visible .pf-badge { background: var(--orange); }

.pf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(11,30,58,0.12);
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background 0.15s ease;
}
.pf-arrow:hover { background: var(--white); }
.pf-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pf-prev { left: 10px; }
.pf-next { right: 10px; }

.pf-dots {
  position: absolute; right: 14px; bottom: 20px;
  display: flex; gap: 6px; z-index: 2; pointer-events: none;
}
.pf-dots span {
  display: block; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(11,30,58,0.3);
  transition: width 0.2s ease, background 0.2s ease;
}
.pf-dots span.is-active { width: 20px; background: var(--orange); }

/* ---------------------------------------------------------------
   6. RESPONSIVE
--------------------------------------------------------------- */
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-card-featured { flex-direction: column; }
  .pf-card-featured .pf-slider { flex: none; height: 260px; min-height: 0; }
  .pf-card-featured .pf-meta { padding: 24px 26px 28px; }
}
@media (max-width: 600px) {
  .pf-hero { padding: 56px 0 40px; }
  .pf-slider, .pf-slider-tall { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-track, .pf-card { transition: none; }
}