/* =========================================
   COMPONENT — Mockups (app / device frames)
   ========================================= */

/* --- Frame de celular --- */
.mockup-phone {
  position: relative;
  width: 260px;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border-strong);
  border-radius: 40px;
  padding: 14px;
  box-shadow: var(--shadow-xl),
              inset 0 0 0 1px rgba(255,255,255,0.04);
}

.mockup-phone__notch {
  width: 80px;
  height: 6px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-3);
}

.mockup-phone__screen {
  width: 100%;
  aspect-ratio: 9 / 19;
  background: var(--color-bg);
  border-radius: 28px;
  overflow: hidden;
}

.mockup-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Frame de browser / dashboard --- */
.mockup-browser {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.mockup-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.mockup-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.mockup-browser__dot:nth-child(1) { background: #FF5F57; }
.mockup-browser__dot:nth-child(2) { background: #FFBD2E; }
.mockup-browser__dot:nth-child(3) { background: #28C840; }

.mockup-browser__url {
  flex: 1;
  height: 22px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  margin: 0 var(--space-4);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mockup-browser__screen {
  aspect-ratio: 16 / 9;
  background: var(--color-bg);
  overflow: hidden;
}

.mockup-browser__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Floating card sobre mockup --- */
.mockup-floating-card {
  position: absolute;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  backdrop-filter: blur(12px);
  animation: float 4s var(--ease-in-out) infinite;
}

/* Placeholder de imagem de seção (aspect-ratio variável) */
.img-placeholder {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  width: 100%;
}

.img-placeholder--4-3 { aspect-ratio: 4 / 3; }
.img-placeholder--16-7 { aspect-ratio: 16 / 7; }
.img-placeholder--1-1 { aspect-ratio: 1; border-radius: var(--radius-lg); }

/* Placeholder quando imagem não existe */
.mockup-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  background: repeating-linear-gradient(
    45deg,
    var(--color-bg-elevated),
    var(--color-bg-elevated) 10px,
    var(--color-bg-card)     10px,
    var(--color-bg-card)     20px
  );
}