/* ============================================================
   Case showcase: device frames + per-case accent theming +
   vanilla scroll choreography (bake-off winner).
   Loaded by app/cases/[slug].
   ============================================================ */

/* ---------- Device frames ---------- */
.df { position: relative; margin: 0; }

.df-browser {
  border-radius: 14px;
  background: #101114;
  border: 1px solid var(--dark-border, #2a2a2a);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.df-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #16181c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.df-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.df-dot:nth-child(1) { background: rgba(255, 95, 87, 0.75); }
.df-dot:nth-child(2) { background: rgba(254, 188, 46, 0.75); }
.df-dot:nth-child(3) { background: rgba(40, 200, 64, 0.75); }
.df-url {
  margin-left: 10px;
  flex: 1;
  min-width: 0;
  background: #0c0d10;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 5px 12px;
  font-family: var(--font-onest), sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-dim, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.df-url b { color: var(--yellow); font-weight: 600; }

/* LaptopFrame — рамка MacBook Pro вокруг экрана.
   Пропорции из макета 4340×2860: крышка ~92% ширины, вырез камеры сверху,
   основание с выемкой. Алюминий тёмный — страница кейса на тёмном фоне. */
.lf { width: 100%; }
.lf-lid {
  position: relative;
  width: 92%;
  margin: 0 auto;
  padding: 10px;
  border-radius: 20px 20px 6px 6px;
  /* Грань крышки: сверху ловит свет, снизу уходит в тень. */
  background: linear-gradient(170deg, #6d7075 0%, #35383d 14%, #2a2c31 88%, #4a4d53 100%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* Пропорцию экрана держим сами (16:10, как у MacBook Pro): иначе её диктует
   вложенный скриншот, и крышка получается приплюснутой. Кадр вписывается
   по ширине, лишнее по высоте уходит в обрезку. */
.lf-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px 12px 2px 2px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}
/* Вырез камеры — как на MacBook Pro: чёрная площадка по центру верхней кромки. */
.lf-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 19%;
  height: 15px;
  background: #0b0c0e;
  border-radius: 0 0 8px 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lf-cam {
  width: 5px; height: 5px; border-radius: 50%;
  background: #1c1f24;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
/* Основание: узкая полоса корпуса под крышкой + выемка для открывания. */
.lf-base {
  position: relative;
  width: 100%;
  height: 13px;
  margin-top: -1px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #4e5157 0%, #303338 42%, #1e2024 100%);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45);
}
.lf-base::before,
.lf-base::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4%;
  height: 100%;
  background: linear-gradient(180deg, #55585e, #2a2c30);
}
.lf-base::before { left: 0; border-radius: 0 0 0 12px; }
.lf-base::after { right: 0; border-radius: 0 0 12px 0; }
.lf-notch-bottom {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14%;
  height: 6px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #202226, #34373c);
}

@media (max-width: 700px) {
  .lf-lid { padding: 6px; border-radius: 14px 14px 4px 4px; }
  .lf-notch { height: 10px; top: 6px; }
  .lf-base { height: 9px; }
}

/* PhoneFrame — векторная рамка iPhone со скриншотом внутри.
   Геометрия из макета 654×1347, экран rect(9,10,636,1327) rx=100.
   Проценты ниже — от этих чисел, поэтому рамка и скриншот совпадают
   при любом размере блока. */
/* Шрифт и иконки статус-бара масштабируются вместе с рамкой, а не
   наследуют кегль страницы — иначе на маленьком телефоне часы огромные. */
.pf { position: relative; margin: 0; line-height: 0; container-type: inline-size; }
.pf-screen {
  position: absolute;
  left: 1.376%;   /* 9/654 */
  top: 0.742%;    /* 10/1347 */
  width: 97.248%; /* 636/654 */
  height: 98.515%;/* 1327/1347 */
  border-radius: 15.72% / 7.53%; /* 100/636 и 100/1327 */
  overflow: hidden;
  background: #000;
}
/* Экран = полоса статус-бара + кадр, вместе они точно заполняют вырез.
   Раньше картинка сдвигалась margin'ом и была выше контейнера: сверху
   оставалась чёрная полоса, снизу кадр вылезал за рамку. */
.pf-screen {
  display: flex;
  flex-direction: column;
}
.pf-statusbar {
  flex: 0 0 auto;
  height: 5.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7.5% 0.5%;
  position: relative;
  color: #fff;
  font-size: 4.6cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  background: #000;
}
.pf-island {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  height: 58%;
  background: #0a0a0a;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.pf-icons { display: flex; align-items: center; gap: 0.3em; }
.pf-icons svg { display: block; width: auto; height: 0.75em; }
/* Кадр занимает остаток экрана: вписываем по ширине, лишнее снизу обрезаем. */
.pf-shot { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pf-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.pf-frame {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.55));
}

/* Корпус телефона. Титановая грань — тонкий светлый градиент по краю,
   как на реальном устройстве, где рант ловит свет сверху. */
.df-phone {
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(160deg, #3a3d44 0%, #17181c 28%, #101114 70%, #2c2f35 100%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  overflow: visible;
  position: relative;
}
/* Экран скруглён чуть меньше корпуса — концентрично рамке. */
.df-phone .df-screen {
  border-radius: 38px;
  overflow: hidden;
  background: #000;
  position: relative;
}
/* Вписываем по ШИРИНЕ: скриншот снят ровно по ширине экрана, и обрезать
   его по бокам нельзя — срезает логотип и текст. Кадр короче экрана,
   поэтому низ добирается фоном страницы сайта. */
.df-phone .df-screen img {
  width: 100%;
  height: auto;
  display: block;
}
/* Боковые кнопки — громкость слева, питание справа. */
.df-phone::before,
.df-phone::after {
  content: '';
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, #43464d, #24262b);
  border-radius: 2px;
}
.df-phone::before { left: -2px; top: 21%; height: 13%; box-shadow: 0 34px 0 #33363c; }
.df-phone::after { right: -2px; top: 27%; height: 17%; }

.df-screen { position: relative; overflow: hidden; background: #0a0b0d; }
.df-screen img { display: block; width: 100%; height: auto; }

/* Framed images inside markdown case body (renderCaseBody #frame= hook) */
.case-detail-body .df { margin: 32px 0; }
.case-detail-body .df img { border-radius: 0; }
.case-detail-body .df-phone { max-width: 340px; margin-left: auto; margin-right: auto; }
.df-caption {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-dim, #888);
  text-align: center;
}

/* Detail cover hover-scroll (mirror of listing .scroll-preview, see cases.css) */
.case-detail-cover.scroll-preview { container-type: size; }
.case-detail-cover.scroll-preview img { transition: transform 7s linear; }
.case-detail-cover.scroll-preview:hover img { transform: translateY(-72%); }
@supports (height: 100cqh) {
  .case-detail-cover.scroll-preview:hover img {
    transform: translateY(calc(-100% + 100cqh));
  }
}

/* Per-case brand accents: inline style provides --case-* vars (lib/cases.ts),
   this mapping feeds them into the design system. Light theme takes the
   darker accent for contrast on the pale background. */
.case-detail[data-themed],
.cs[data-themed] {
  --yellow: var(--case-accent);
  --yellow-dark: var(--case-accent-dark);
  --orange: var(--case-accent-2);
}
[data-theme='light'] .case-detail[data-themed],
[data-theme='light'] .cs[data-themed] {
  --yellow: var(--case-accent-dark);
}

/* Tag/industry pills: styled in cases.css for the listing, but the
   detail page never loaded that file — define them here for [slug]. */
.case-detail-meta .case-tag {
  display: inline-block;
  font-family: var(--font-unbounded), sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 999px;
  padding: 6px 14px;
}
.case-detail-meta .case-industry {
  color: var(--text-dim);
  font-size: 0.88rem;
}