/* ==========================================================================
   SHOWCASE — apresentações dentro do modal de case
   Interfaces desenhadas em HTML/CSS (biolink, landing, chat de IA) para
   demonstrar entregas sem depender de imagem estática.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Identidade visual
   -------------------------------------------------------------------------- */
.brand-showcase {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .brand-showcase { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
}
.brand-showcase__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1rem;
}
.brand-showcase__print { display: grid; gap: 1rem; }
@media (min-width: 520px) {
  .brand-showcase__print { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   2. Stories
   -------------------------------------------------------------------------- */
.stories-showcase {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  justify-items: center;
}
.stories-showcase .mk-phone { max-width: 210px; }

/* --------------------------------------------------------------------------
   3. Contêiner das interfaces em HTML
   -------------------------------------------------------------------------- */
.ui-showcase {
  display: grid;
  gap: 2rem;
  align-items: center;
  justify-items: center;
}
@media (min-width: 860px) {
  .ui-showcase {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 3rem;
    justify-items: stretch;
  }
  .ui-showcase .mk-phone { justify-self: center; }
}
.ui-showcase--full { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .ui-showcase--full { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.ui-showcase__notes h4 {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.ui-showcase__notes ul { display: grid; gap: 0.9rem; }
.ui-showcase__notes li {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.6;
  padding-left: 1.1rem;
  position: relative;
}
.ui-showcase__notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.ui-showcase__notes b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   4. Biolink (dentro do mockup de celular)
   -------------------------------------------------------------------------- */
.ui-biolink {
  height: 100%;
  padding: 2.2rem 1.15rem 1.25rem;
  background: var(--areia);
  color: var(--floresta);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: hidden;
}
.ui-biolink__top { text-align: center; margin-bottom: 0.6rem; }
.ui-biolink__avatar {
  width: 66px; height: 66px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.7rem;
  border: 2px solid var(--linho);
}
.ui-biolink__top b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}
.ui-biolink__top span {
  display: block;
  font-size: 0.62rem;
  color: color-mix(in srgb, var(--floresta) 60%, transparent);
  margin-top: 0.2rem;
  line-height: 1.45;
}
.ui-biolink__cta,
.ui-biolink__item {
  display: block;
  text-align: center;
  padding: 0.7rem 0.75rem;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 500;
}
.ui-biolink__cta {
  background: var(--floresta);
  color: var(--areia);
  padding-block: 0.85rem;
  font-size: 0.75rem;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--floresta) 28%, transparent);
}
.ui-biolink__item {
  background: #fff;
  border: 1px solid var(--linho);
  color: var(--floresta);
}
.ui-biolink__foot {
  margin-top: auto;
  text-align: center;
  font-size: 0.6rem;
  color: color-mix(in srgb, var(--floresta) 45%, transparent);
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   5. Landing (dentro do mockup de navegador)
   -------------------------------------------------------------------------- */
.ui-landing {
  display: grid;
  background: var(--areia);
  color: var(--floresta);
  min-height: 300px;
}
@media (min-width: 640px) {
  .ui-landing { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.ui-landing__copy {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  display: grid;
  align-content: center;
  gap: 0.75rem;
}
.ui-landing__tag {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oliva);
}
.ui-landing h4 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.ui-landing p {
  font-size: 0.78rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--floresta) 68%, transparent);
  max-width: 34ch;
}
.ui-landing__timer { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.ui-landing__timer div {
  background: #fff;
  border: 1px solid var(--linho);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  text-align: center;
  min-width: 52px;
}
.ui-landing__timer b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.ui-landing__timer span {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--floresta) 52%, transparent);
}
.ui-landing__cta {
  justify-self: start;
  margin-top: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--r-full);
  background: var(--floresta);
  color: var(--areia);
  font-size: 0.74rem;
  font-weight: 500;
}
.ui-landing__micro {
  font-size: 0.6rem;
  color: color-mix(in srgb, var(--floresta) 50%, transparent);
}
.ui-landing__art { position: relative; min-height: 200px; background: var(--linho); }
.ui-landing__art img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   6. Chat do agente de IA
   -------------------------------------------------------------------------- */
.ui-chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--linho);
  color: var(--floresta);
}
.ui-chat__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 2.1rem 0.9rem 0.75rem;
  background: var(--floresta);
  color: var(--areia);
}
.ui-chat__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--areia) 22%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  flex-shrink: 0;
}
.ui-chat__bar b { display: block; font-size: 0.72rem; font-weight: 500; }
.ui-chat__bar i {
  font-style: normal;
  font-size: 0.58rem;
  color: color-mix(in srgb, var(--areia) 62%, transparent);
}
.ui-chat__body {
  flex: 1;
  padding: 0.85rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow: hidden;
}
.ui-chat__msg {
  max-width: 84%;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  font-size: 0.66rem;
  line-height: 1.45;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--floresta) 10%, transparent);
}
.ui-chat__msg b { font-weight: 600; }
.ui-chat__msg--in {
  align-self: flex-start;
  background: #fff;
  border-bottom-left-radius: 4px;
}
.ui-chat__msg--out {
  align-self: flex-end;
  background: color-mix(in srgb, var(--salvia) 55%, #fff);
  border-bottom-right-radius: 4px;
}
.ui-chat__msg--handoff {
  background: var(--floresta);
  color: var(--areia);
}