/* =========================================================
   Portfólio de Websites — complementa ../../style.css
========================================================= */

/* HERO */
.ws-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 72px;
  background: var(--white);
}
.ws-hero__inner { position: relative; z-index: 1; }
.ws-hero h1 { max-width: 820px; }
.ws-hero h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 18px; }
.ws-hero__lead { color: var(--muted); font-size: 18px; max-width: 640px; margin-bottom: 28px; }

.ws-breadcrumb {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--muted); margin-bottom: 22px;
}
.ws-breadcrumb a:hover { color: var(--primary); }
.ws-breadcrumb strong { color: var(--text); font-weight: 600; }

/* PROJETOS */
.ws-projects { padding: 72px 0 96px; background: var(--bg-soft); }
.ws-projects__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}

.ws-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-chip {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  transition: all .25s var(--ease);
}
.ws-chip:hover { border-color: var(--primary); color: var(--primary); }
.ws-chip.active { background: var(--primary); border-color: var(--primary); color: var(--white); }

.ws-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ws-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* CARD */
.ws-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.ws-card[hidden] { display: none; }
.ws-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-primary); border-color: transparent; }

.ws-card__browser { padding: 14px 14px 0; background: var(--bg-soft); }
.ws-card__bar {
  display: flex; align-items: center; gap: 6px;
  background: var(--white); border-radius: 10px 10px 0 0;
  padding: 9px 12px; border: 1px solid var(--border); border-bottom: 0;
}
.ws-card__bar i { width: 9px; height: 9px; border-radius: 50%; background: #e2e2ea; }
.ws-card__bar i:nth-child(1) { background: #ff5f57; }
.ws-card__bar i:nth-child(2) { background: #febc2e; }
.ws-card__bar i:nth-child(3) { background: #28c840; }
.ws-card__bar span { flex: 1; height: 8px; margin-left: 10px; border-radius: 99px; background: var(--bg-soft); }

.ws-card__shot {
  aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--border); border-bottom: 0;
  background: var(--white);
}
.ws-card__shot img, .ws-card__shot .ws-mock {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform 1.2s var(--ease);
}
.ws-card:hover .ws-card__shot img { transform: translateY(-6%); }
.ws-card:hover .ws-card__shot .ws-mock { transform: scale(1.04); }

.ws-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ws-card__cat { color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ws-card__body h3 { font-size: 20px; }
.ws-card__body p { color: var(--muted); font-size: 15px; }
.ws-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.ws-card__tags li { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--bg-soft); color: var(--text); }
.ws-card__body .btn { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; }
.ws-card__soon { margin-top: auto; font-size: 13px; color: var(--muted); font-style: italic; }

/* CAPA AUTOMÁTICA (quando não há print) */
.ws-mock { --c: var(--primary); display: flex; flex-direction: column; background: #fff; }
.ws-mock__nav { display: flex; align-items: center; gap: 8px; padding: 8% 7% 0; }
.ws-mock__nav i { width: 18%; height: 8px; border-radius: 4px; background: var(--c); margin-right: auto; }
.ws-mock__nav span { width: 9%; height: 5px; border-radius: 3px; background: #d8d8e2; }
.ws-mock__hero {
  margin: 6% 7% 0; padding: 7% 7%; border-radius: 10px; color: #fff;
  background: color-mix(in srgb, var(--c) 78%, #000);
  display: flex; flex-direction: column; gap: 6px;
}
.ws-mock__hero b { font-size: clamp(13px, 1.4vw, 17px); line-height: 1.15; letter-spacing: -.01em; }
.ws-mock__hero em { display: block; height: 5px; width: 80%; border-radius: 3px; background: rgba(255,255,255,.55); }
.ws-mock__hero em.s { width: 55%; }
.ws-mock__hero u { display: block; width: 30%; height: 12px; border-radius: 99px; background: #fff; margin-top: 4px; }
.ws-mock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; padding: 6% 7%; }
.ws-mock__cards span { height: 34px; border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, #fff); }

/* RESPONSIVO */
@media (max-width: 960px) {
  .ws-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .ws-hero { padding: 24px 0 56px; }
  .ws-hero__lead { font-size: 16px; }
  .ws-projects { padding: 56px 0 72px; }
  .ws-grid { grid-template-columns: 1fr; gap: 20px; }
  .ws-filters { overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: 4px; }
  .ws-chip { white-space: nowrap; }
}