/* ═══════════════════════════════════════════════════════════════════
   Pipocou — Editorial CSS (compartilhado entre todas as páginas)
   ═══════════════════════════════════════════════════════════════════
   Importa este CSS em qualquer HTML pra ter:
   - Variables de cor + fontes editoriais
   - Header dark sticky com blur
   - Footer dark 4 colunas
   - Utilitários: .ed-mono, .ed-eyebrow, .ed-btn-*, .ed-container, etc
   - Reset CSS global obrigatório (overflow-x hidden, padding fluido)

   Uso esperado:
   <link rel="stylesheet" href="pipocou-editorial.css">
   <script src="pipocou-auth.js?cb=..." defer></script>
   ─────────────────────────────────────────────────────────────────── */

:root {
  --carvao: #0A0612;
  --carvao-soft: #15101F;
  --vinho: #2A1845;
  --vinho-soft: #3D2560;
  --carmim: #E63946;
  --carmim-soft: #C8202D;
  --amarelo: #FFD93D;
  --marfim: #F5E9D8;
  --marfim-soft: #EADCC5;
  --marfim-lighter: #FAF3E5;
  --gray-100: #ECE5D8;
  --gray-300: #C9BFB2;
  --gray-500: #8B8278;
  --gray-700: #4A413A;
  --green: #1B7A3E;
  --spotlight-bg:
    radial-gradient(ellipse 80% 100% at 30% 50%, rgba(255, 99, 72, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 90% at 70% 60%, rgba(140, 80, 200, 0.22) 0%, transparent 65%),
    linear-gradient(180deg, #0A0612 0%, #2A1845 100%);
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-sans: 'DM Sans', system-ui, sans-serif;
  --container-max: 1280px;
  --container-pad: clamp(16px, 4vw, 40px);
}

/* ─── RESET global obrigatório ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p { overflow-wrap: anywhere; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ─── HEADER editorial (dark sticky com blur) ──────────────────── */
.ed-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 6, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 233, 216, 0.08);
}
.ed-header-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 16px var(--container-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: nowrap;
}
.ed-header-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
}
.ed-header-logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.ed-header-logo-text {
  font-family: var(--ff-display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.025em; color: var(--marfim);
}
.ed-header-nav { display: flex; gap: 24px; align-items: center; flex: 1; margin-left: 24px; }
.ed-header-nav a, .ed-header-nav span {
  font-family: var(--ff-sans); font-size: 14px; font-weight: 500;
  color: var(--gray-300); cursor: pointer; transition: color 0.2s;
}
.ed-header-nav a:hover, .ed-header-nav span:hover { color: var(--marfim); }
.ed-header-nav .active { color: var(--marfim); }
.ed-header-actions { display: flex; gap: 10px; align-items: center; }

.ed-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(245, 233, 216, 0.2);
  color: var(--marfim);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.ed-icon-btn:hover { background: rgba(245, 233, 216, 0.1); border-color: var(--marfim); }

/* User chip dark variant pro header */
.ed-user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid rgba(245, 233, 216, 0.25);
  border-radius: 999px;
  background: rgba(245, 233, 216, 0.05); transition: all 0.15s;
  text-decoration: none; color: var(--marfim);
}
.ed-user-chip:hover { border-color: rgba(245, 233, 216, 0.5); }
.ed-user-chip-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: linear-gradient(135deg, var(--carmim), var(--vinho));
  background-size: cover; background-position: center;
}
.ed-user-chip-name {
  font-size: 13px; font-weight: 600; color: var(--marfim);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── BUTTONS editoriais ──────────────────────────────────────── */
.ed-btn {
  font-family: var(--ff-sans); font-weight: 600; font-size: 13px;
  padding: 9px 20px; border-radius: 999px; border: none;
  transition: all 0.2s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.ed-btn-primary { background: var(--carmim); color: #fff; }
.ed-btn-primary:hover { background: #cf2f3c; transform: translateY(-1px); }
.ed-btn-yellow { background: var(--amarelo); color: var(--carvao); }
.ed-btn-yellow:hover { background: #f5cb22; transform: translateY(-1px); }
.ed-btn-ghost-light {
  background: transparent; color: var(--marfim);
  border: 1px solid rgba(245, 233, 216, 0.3);
}
.ed-btn-ghost-light:hover { background: rgba(245, 233, 216, 0.1); }
.ed-btn-ghost-dark {
  background: transparent; color: var(--carvao);
  border: 1px solid var(--gray-300);
}
.ed-btn-ghost-dark:hover { background: var(--marfim-soft); }
.ed-btn:disabled { opacity: 0.6; cursor: wait; }

/* ─── UTILITIES editoriais ────────────────────────────────────── */
.ed-container {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
}
.ed-mono {
  font-family: var(--ff-sans); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.ed-eyebrow {
  color: var(--carmim);
  display: flex; align-items: center; gap: 12px;
}
.ed-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}
.ed-display {
  font-family: var(--ff-display); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.02;
}

/* ─── FOOTER editorial (dark 4 colunas) ──────────────────────── */
.ed-footer { background: var(--carvao); color: var(--marfim); padding: 64px 0 28px; }
.ed-footer-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
}
.ed-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.ed-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ed-footer-brand svg { width: 32px; height: 32px; flex-shrink: 0; }
.ed-footer-brand-name {
  font-family: var(--ff-display); font-weight: 800; font-size: 26px;
  letter-spacing: -0.025em; color: var(--marfim);
}
.ed-footer-brand-text {
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-size: 16px; color: rgba(245, 233, 216, 0.7);
  line-height: 1.4; max-width: 360px;
}
.ed-footer-col-title {
  font-family: var(--ff-sans); font-size: 11px;
  color: var(--amarelo); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 18px;
}
.ed-footer-col a {
  display: block; font-family: var(--ff-sans); font-size: 14px;
  color: rgba(245, 233, 216, 0.7); text-decoration: none;
  padding: 6px 0; transition: color 0.2s; cursor: pointer;
}
.ed-footer-col a:hover { color: var(--marfim); }
.ed-footer-bottom {
  padding-top: 28px; border-top: 1px solid rgba(245, 233, 216, 0.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--ff-sans); font-size: 12px; color: var(--gray-500);
}
.ed-footer-tmdb {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(245, 233, 216, 0.05);
  font-family: var(--ff-sans); font-size: 11px;
  color: rgba(245, 233, 216, 0.4);
  text-align: center;
}
.ed-footer-tmdb a {
  color: rgba(245, 233, 216, 0.55); text-decoration: none;
  transition: color 0.2s;
}
.ed-footer-tmdb a:hover { color: var(--marfim); }
.ed-footer-tmdb strong {
  color: rgba(255, 217, 61, 0.85);
  letter-spacing: 0.06em; font-weight: 700;
  margin-left: 4px;
}

/* ─── SVG defs ─ usado em logos/clusters ──────────────────────── */
.ed-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ─── RESPONSIVO global ──────────────────────────────────────── */
@media (max-width: 980px) {
  .ed-header-nav { display: none; }
  .ed-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ed-footer-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 580px) {
  .ed-header-actions .ed-btn-ghost-light,
  .ed-header-actions .ed-btn-ghost-dark { display: none; }
  .ed-footer-grid { grid-template-columns: 1fr; }
}