/* =========================================================================
   Cards do portfolio: moldura de navegador + preview em escala real do
   desktop do projeto (mesmo dentro de um card pequeno) + modal com troca
   de dispositivo (desktop / tablet / mobile).
   Carregado depois do design-system.css — reaproveita os tokens --ds-*.
   ========================================================================= */

.op-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: min(28rem, 94%);
  display: flex;
  flex-direction: column;
  border-radius: inherit;
  overflow: hidden;
  background: var(--ds-surface-raised, #0d1b2d);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- barra de navegador (com os botoes de dispositivo) ----------- */

.op-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.op-chrome-dots {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.op-chrome-dots span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.op-chrome-url {
  flex: 1;
  min-width: 0;
  font-size: 0.68rem;
  letter-spacing: -0.01em;
  color: var(--ds-text-faint, #64748b);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-device-icons {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 0.15rem;
}

.op-device-icons button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ds-text-faint, #64748b);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.op-device-icons button svg {
  width: 0.85rem;
  height: 0.85rem;
}

.op-device-icons button:hover {
  color: var(--ds-text-on-dark, #f3f6ff);
}

.op-device-icons button.is-active {
  background: var(--ds-brand-gradient, var(--ds-brand-500, #0052ff));
  color: #fff;
}

/* ---------- preview em escala -------------------------------------------- */

.op-thumb {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--ds-surface-dark, #050b13);
}

.op-thumb-frame {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transition: transform 0.25s var(--ds-ease-out-expo, ease),
              left 0.25s var(--ds-ease-out-expo, ease),
              top 0.25s var(--ds-ease-out-expo, ease);
}

.op-thumb-frame iframe {
  display: block;
  border: 0;
  pointer-events: none;
  background: #fff;
}

.op-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(rgba(5, 11, 19, 0) 55%, rgba(5, 11, 19, 0.82));
  color: var(--ds-text-on-dark, #f3f6ff);
  font-family: var(--ds-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 0.3s var(--ds-ease-out-expo, ease);
}

.op-thumb:hover .op-thumb-overlay,
.op-thumb:focus-visible .op-thumb-overlay {
  opacity: 1;
}

.op-thumb-overlay::after {
  content: "↗";
}

@media (hover: none) {
  /* touch: sem hover, o convite fica sempre visivel */
  .op-thumb-overlay {
    opacity: 1;
    background: linear-gradient(rgba(5, 11, 19, 0) 70%, rgba(5, 11, 19, 0.85));
    align-items: flex-end;
    padding-bottom: 0.9rem;
  }
}

/* ---------- modal de preview --------------------------------------------- */

.op-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(3, 6, 12, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ds-ease-out-expo, ease);
}

.op-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.op-modal {
  width: min(1320px, 100%);
  height: min(880px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ds-surface-raised, #0d1b2d);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ds-r-lg, 1.75rem);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s var(--ds-ease-out-expo, ease);
}

.op-modal-backdrop.is-open .op-modal {
  transform: translateY(0) scale(1);
}

.op-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--ds-font-sans);
}

.op-modal-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  color: var(--ds-text-on-dark, #f3f6ff);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
}

.op-modal-title span {
  color: var(--ds-text-faint, #64748b);
  font-weight: 400;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-device-toggle {
  display: flex;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--ds-r-btn, 0.85rem);
  padding: 0.2rem;
}

.op-device-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ds-text-muted, #94a3b8);
  font-family: var(--ds-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.4rem 0.75rem;
  border-radius: calc(var(--ds-r-btn, 0.85rem) - 0.2rem);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.op-device-toggle button:hover {
  color: var(--ds-text-on-dark, #f3f6ff);
}

.op-device-toggle button.is-active {
  background: var(--ds-brand-gradient, var(--ds-brand-500, #0052ff));
  color: #fff;
}

.op-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.op-modal-open-link,
.op-modal-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ds-text-on-dark, #f3f6ff);
  font-family: var(--ds-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: var(--ds-r-btn, 0.85rem);
  cursor: pointer;
  line-height: 1;
}

.op-modal-close {
  padding: 0.45rem 0.65rem;
}

.op-modal-open-link:hover,
.op-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.op-modal-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--ds-surface-dark, #050b13);
  padding: 1.25rem;
}

.op-modal-frame-wrap {
  position: absolute;
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform-origin: top left;
  transition: transform 0.28s var(--ds-ease-out-expo, ease),
              left 0.28s var(--ds-ease-out-expo, ease),
              top 0.28s var(--ds-ease-out-expo, ease);
}

.op-modal-frame-wrap iframe {
  display: block;
  border: 0;
  background: #fff;
}

@media (max-width: 720px) {
  .op-modal-header {
    padding: 0.75rem 0.85rem;
  }
  .op-modal-title span {
    display: none;
  }
  .op-modal-body {
    padding: 0.6rem;
  }
}