/* portfolio.css — portfolio list, case study, sobre, contato, legal */

/* ── Portfolio Page ── */
.portfolio-page { background: var(--background); }
.portfolio-page__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;
}
.portfolio-page__title { font-weight: 800; color: var(--foreground); }
.portfolio-page__sub { font-size: 1rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* ── Case Study ── */
.cs-back { padding-block: 1.25rem 0; }
.cs-back__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.15s; }
.cs-back__link:hover { color: var(--foreground); }
.cs-header { background: #fff; }
.cs-header__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.cs-header__title { font-weight: 800; margin-bottom: 1rem; color: var(--foreground); }
.cs-header__excerpt { font-size: 1em; color: var(--muted-foreground); line-height: 1.5em; max-width: 56rem; margin-bottom: 1.25rem; }
.cs-header__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.cs-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); padding: 0.375rem 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.cs-meta-item--link { color: var(--accent); cursor: pointer; transition: background 0.15s; }
.cs-meta-item--link:hover { background: rgba(16,29,64,0.06); }

/* ── Media / Video Section ── */
.cs-media { background: #fff; }

/* Header da seção de vídeo */
.cs-media__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.cs-media__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Tabs: Desktop / Mobile */
.cs-video-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
}
.cs-video-tab {
  padding: 0.3125rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cs-video-tab.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cs-video-tab:hover:not(.active) { color: var(--foreground); }

/* Dual video layout */
.cs-media-duo {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 640px) {
  .cs-media-duo { grid-template-columns: 3fr 1fr; }
}

.cs-media-slot { display: flex; flex-direction: column; gap: 0.5rem; }
.cs-media-slot__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  text-align: center;
}
.cs-media__video-wrap {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  cursor: pointer;
  border-radius: var(--radius-xl);
}
.cs-media__video-wrap--desktop { aspect-ratio: 16/9; }
.cs-media__video-wrap--mobile  { aspect-ratio: 9/16; }
.cs-media__cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-media__play-btn {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(16,29,64,0.35);
  color: #fff; transition: background 0.2s;
  border: none; cursor: pointer;
}
.cs-media__play-btn:hover { background: rgba(16,29,64,0.5); }
.cs-media__play-btn svg { width: 3rem; height: 3rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.cs-media__video { width: 100%; object-fit: contain; background: #000; display: block; border-radius: var(--radius-xl); }

/* Simple single video (when only desktop_url or neither) */
.cs-media__single { border-radius: var(--radius-xl); overflow: hidden; }

/* CTA buttons row under video */
.cs-media__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.cs-metrics { background: var(--surface); border-block: 1px solid var(--border); }
.cs-stack { background: var(--background); }
.cs-stack__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-section-title { font-size: 1em; font-weight: 700; color: var(--foreground); margin-bottom: 1.25rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border); }
.cs-content { background: var(--background); }
.cs-content__inner { }
.cs-prints { background: var(--surface); }
.cs-prints__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cs-prints__grid { grid-template-columns: repeat(2, 1fr); } }
.cs-print { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.cs-print img { width: 100%; display: block; }
.cs-print figcaption { padding: 0.5rem 1rem; font-size: 0.75rem; color: var(--muted-foreground); background: var(--card); text-align: center; }
.cs-related { background: var(--surface); }

/* ── Sobre ── */
.sobre-header {
  display: grid; gap: 2rem; margin-bottom: 3rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) { .sobre-header { grid-template-columns: 1fr auto; } }
.sobre-header__title { font-weight: 800; color: var(--foreground); margin-bottom: 0.375rem; }
.sobre-header__headline { font-size: 1em; color: var(--accent); font-weight: 600; margin-bottom: 1rem; }
.sobre-header__summary { font-size: 1em; color: var(--muted-foreground); line-height: 1.5em; margin-bottom: 1.25rem; max-width: 42rem; }
.sobre-header__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sobre-header__meta { display: flex; flex-direction: column; gap: 0.5rem; align-self: flex-start; }
.sobre-meta-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.sobre-meta-item a { color: var(--accent); }
.sobre-section { margin-bottom: 2.5rem; }
.sobre-section__title { font-size: 1em; font-weight: 700; color: var(--foreground); margin-bottom: 1.25rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border); }
.highlights-list { display: flex; flex-direction: column; gap: 0.875rem; }
.highlight-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1em; color: var(--muted-foreground); line-height: 1.5em; }
.highlight-item svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.experience-list { display: flex; flex-direction: column; gap: 1.5rem; }
.experience-item { padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.experience-item__header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.experience-item__role { font-size: 1rem; font-weight: 700; color: var(--foreground); }
.experience-item__company { font-size: 0.875rem; color: var(--muted-foreground); }
.experience-item__period { font-size: 0.8125rem; color: var(--accent); font-weight: 500; flex-shrink: 0; white-space: nowrap; }
.experience-item__desc { font-size: 1em; color: var(--muted-foreground); line-height: 1.5em; }
.competencies-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.education-list { display: flex; flex-direction: column; gap: 1rem; }
.education-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.education-item__icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.education-item__degree { font-size: 0.9375rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.25rem; }
.education-item__school { font-size: 0.875rem; color: var(--muted-foreground); }
.education-item__period { font-size: 0.8125rem; color: var(--accent); font-weight: 500; }

/* ── Contato ── */
.contato-header { text-align: center; margin-bottom: 2.5rem; }
.contato-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .contato-grid { grid-template-columns: 1fr 1.5fr; } }
.contato-channels { display: flex; flex-direction: column; gap: 1.25rem; }
.contato-channel { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.contato-channel__icon { color: var(--accent); flex-shrink: 0; }
.contato-channel__label { font-size: 0.875rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.25rem; }
.contato-channel__value { font-size: 0.875rem; color: var(--accent); }
.contato-channel__hint { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.contato-form-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2rem; }
.form-field { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.4375rem; }
.form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  color: var(--foreground);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16,29,64,0.1); }
.form-textarea { resize: vertical; min-height: 7rem; }
.form-notice { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.75rem; }

/* ── Legal ── */
.legal-content { max-width: 48rem; }
.legal-content h1 { margin-bottom: 1.5rem; }
.legal-content h2 { font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
.legal-content p { font-size: 1em; color: var(--muted-foreground); line-height: 1.5em; margin-bottom: 0.875rem; }
.legal-content a { color: var(--accent); }
.legal-content a:hover { text-decoration: underline; }
.cookies-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.875rem; }
.cookies-table th, .cookies-table td { border: 1px solid var(--border); padding: 0.625rem 0.875rem; text-align: left; }
.cookies-table th { background: var(--surface-2); font-weight: 600; }
.cookies-table td { color: var(--muted-foreground); }
.sitemap-list { list-style: none; padding-left: 0; margin-bottom: 1.5rem; }
.sitemap-list li { padding: 0.4375rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.sitemap-list li:last-child { border-bottom: none; }
.sitemap-list a { color: var(--accent); }
.sitemap-list a:hover { text-decoration: underline; }

/* ── 404 ── */
.not-found { background: var(--background); }
.not-found__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 4em; }
.not-found__code { font-size: 6rem; font-weight: 900; color: rgba(16,29,64,0.15); line-height: 1; margin-bottom: 0.5rem; }
.not-found__title { font-weight: 700; color: var(--foreground); margin-bottom: 0.75rem; }
.not-found__sub { font-size: 1em; color: var(--muted-foreground); margin-bottom: 1.75rem; }
.not-found__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

  /* ── Portfolio Search ── */
  .portfolio-page__header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .portfolio-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.375rem 0.875rem;
    transition: border-color 0.15s;
  }
  .portfolio-search-wrap:focus-within { border-color: var(--accent); }
  .portfolio-search-wrap svg { color: var(--muted-foreground); flex-shrink: 0; }
  .portfolio-search-input {
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    width: 12rem;
    min-width: 0;
  }
  .portfolio-search-input::placeholder { color: var(--muted-foreground); }
  @media (max-width: 640px) {
    .portfolio-search-input { width: 100%; }
    .portfolio-search-wrap  { flex: 1; }
    .portfolio-page__header-right { width: 100%; }
  }

  /* ── Case Study Skeleton ── */
  .cs-content--loading {
    pointer-events: none;
    min-height: 12rem;
  }
  

  /* ══════════════════════════════════════════════════════════════════════════
     Case Study — Container único (cs-page-wrap)
     Elimina o espaçamento excessivo causado por div.container individuais
     em cada seção. Todas as seções principais compartilham um único container.
     ══════════════════════════════════════════════════════════════════════════ */

  /* Container unificado que envolve cs-back + cs-header + cs-media + cs-stack + cs-content */
  .cs-page-wrap {
    padding-block: 1.25rem 2.5rem;
  }

  /* Seção interna — separador visual, sem padding excessivo */
  .cs-section {
    padding-block: 1.75rem;
    border-top: 1px solid var(--border);
    background: #fff!important;
  }
  .cs-section--first {
    border-top: none;
    padding-top: 1rem;
  }

  /* cs-back agora vive dentro do cs-page-wrap */
  .cs-page-wrap .cs-back {
    padding-block: 0 0.5rem;
  }

  /* cs-media dentro do container único — remove padding duplicado */
  .cs-page-wrap .cs-media {
    /* seção já tem padding via .cs-section */
  }

  /* Ajuste no duo de vídeos para não vazar do container */
  .cs-page-wrap .cs-media-duo {
    gap: 1.25rem;
  }

  /* cs-content dentro do container único */
  .cs-page-wrap .cs-content__inner {
    margin-top: 0;
  }

  @media (max-width: 768px) {
    .cs-page-wrap {
      padding-block: 0.75rem 2rem;
    }
    .cs-section {
      padding-block: 1.25rem;
    }
  }