/* Small Fox Studio — Hero Mockup */

/* ─── Browser mockup base ────────────────────────────── */
.browser-mockup {
  background: var(--c-dark);
  border-radius: 8px;
  position: relative;
}

.browser-mockup__bar {
  background: #221F1C;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px 8px 0 0;
}

.browser-mockup__dots {
  display: flex;
  gap: 5px;
}
.browser-mockup__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

.browser-mockup__content {
  padding: 18px;
  background: var(--c-bg);
  border-radius: 0 0 8px 8px;
}

.browser-mockup__badge {
  position: absolute;
  bottom: -14px;
  left: 28px;
  background: var(--c-bg);
  border: 1px solid var(--c-hairline);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-accent);
  white-space: nowrap;
}

/* ─── Hero variant ───────────────────────────────────── */
.browser-mockup--hero {
  width: min(100%, 859px);
  min-height: 551px;
  margin-inline: auto;
  background: #E8E3DD;
  border: 1px solid rgba(26, 23, 21, 0.08);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(26, 23, 21, 0.13);
  isolation: isolate;
}

.browser-mockup--hero .browser-mockup__bar {
  background: #E3DFDA;
  padding: 12px 17px;
  border-bottom: 1px solid rgba(26, 23, 21, 0.06);
}

.browser-mockup--hero .browser-mockup__dots span {
  background: rgba(26, 23, 21, 0.14);
}

.browser-mockup--hero .browser-mockup__content {
  min-height: 507px;
  padding: 37px 44px 44px;
  background: var(--c-bg);
}

.browser-mockup--hero .browser-mockup__content--live {
  --preview-scale: 0.596;
  --preview-height: 507px;
  position: relative;
  height: var(--preview-height);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #F4F0EA;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 -1px 0 rgba(26, 23, 21, 0.05);
}

.browser-mockup--hero .browser-mockup__badge {
  top: auto;
  bottom: -24px;
  left: 28px;
  z-index: 6;
  background: rgba(248, 245, 240, 0.96);
  border-color: rgba(232, 100, 46, 0.3);
  box-shadow: 0 14px 32px rgba(26, 23, 21, 0.1);
  padding: 9px 14px;
}

/* ─── Template previews ──────────────────────────────── */
.template-preview {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  max-width: none;
  pointer-events: none;
  transform-origin: top left;
  background: var(--c-bg);
}

.template-preview--deepchill-desktop {
  width: 1440px;
  height: 851px;
  transform: scale(var(--preview-scale));
}

.template-preview__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  cursor: pointer;
}
.template-preview__link:hover        { box-shadow: inset 0 0 0 1px rgba(232, 100, 46, 0.28); }
.template-preview__link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -5px; }

.template-preview__tag {
  display: none;
  position: absolute;
  left: 16px;
  bottom: 15px;
  z-index: 3;
  pointer-events: none;
  padding: 5px 8px;
  border-radius: 3px;
  background: rgba(248, 245, 240, 0.92);
  color: var(--c-text);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(26, 23, 21, 0.12);
}

/* ─── Mini-sites ─────────────────────────────────────── */
.mini-site {
  position: absolute;
  background: var(--c-bg);
  border: 1px solid rgba(26, 23, 21, 0.09);
  border-radius: 8px;
  box-shadow: 0 20px 45px rgba(26, 23, 21, 0.16);
  z-index: 3;
}

.mini-site--phone {
  --phone-scale: 0.5;
  --phone-preview-scale: 0.43125;
  left: 50%;
  bottom: -130px;
  width: calc(414px * var(--phone-scale));
  height: calc(896px * var(--phone-scale));
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  transform: translateX(-50%);
  z-index: 5;
}

.mini-site--phone .template-preview--deepchill-phone {
  width: 480px;
  height: 1039px;
  transform: scale(var(--phone-preview-scale));
  background: #E4EDF1;
}

.mini-site--card {
  right: -58px;
  bottom: -48px;
  width: 390px;
  height: 262px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #CDD9DF;
  color: #F8F5F0;
  z-index: 4;
}

.mini-site--live { padding: 0; }

.mini-site--card .template-preview--deepchill-card {
  left: 0;
  width: 1440px;
  height: 970px;
  transform: scale(0.271);
  background: #CDD9DF;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .browser-mockup--hero { margin-left: 0; }
  .mini-site--card       { right: -12px; }
}

@media (max-width: 600px) {
  .browser-mockup--hero {
    min-height: 0;
    box-shadow: 0 18px 42px rgba(26, 23, 21, 0.12);
  }

  .browser-mockup--hero .browser-mockup__content {
    min-height: 0;
    padding: 24px;
  }

  .browser-mockup--hero .browser-mockup__content--live {
    --preview-scale: 0.62;
    --preview-height: 330px;
    height: var(--preview-height);
    min-height: 0;
    padding: 0;
  }

  .browser-mockup--hero .browser-mockup__badge {
    left: 18px;
    bottom: -18px;
  }

  .mini-site { display: none; }
}