/*
 * Shared product-screenshot presentation for BotLabs case pages.
 * The existing case markup stays intact: its picture elements become the
 * outer brand surface and the image itself provides the light inset surface.
 */

:is(
  .fayni-lyody,
  .nfm-agro-crm,
  .uamade,
  .w8shipping-support,
  .finboto,
  .medhouse-club,
  .veres-chatbot,
  .rehau-chatbot,
  .virtualnyi-druh-selia
) {
  --case-shot-accent: #315ff4;
  --case-shot-deep: #142966;
  --case-shot-outer-pad: clamp(10px, 1.15vw, 18px);
  --case-shot-inner-pad: clamp(6px, 0.7vw, 10px);
  --case-shot-outer-radius: clamp(18px, 1.65vw, 26px);
  --case-shot-inner-radius: clamp(11px, 1.05vw, 17px);
  --case-shot-shadow: 0 18px 42px rgba(13, 24, 51, 0.18);
}

.fayni-lyody {
  --case-shot-accent: #1478e7;
  --case-shot-deep: #061e46;
}

.nfm-agro-crm {
  --case-shot-accent: #d71920;
  --case-shot-deep: #5f090e;
}

.uamade {
  --case-shot-accent: #8457c7;
  --case-shot-deep: #3d265f;
}

.w8shipping-support {
  --case-shot-accent: #db287b;
  --case-shot-deep: #771040;
}

.finboto {
  --case-shot-accent: #28a1ed;
  --case-shot-deep: #155782;
}

.medhouse-club {
  --case-shot-accent: #54b7c6;
  --case-shot-deep: #246875;
}

.veres-chatbot {
  --case-shot-accent: #1a9548;
  --case-shot-deep: #075126;
}

.rehau-chatbot {
  --case-shot-accent: #e30620;
  --case-shot-deep: #7c0615;
}

.virtualnyi-druh-selia {
  --case-shot-accent: #7749ef;
  --case-shot-deep: #3a2184;
}

/* Product screens, admin screens and feature galleries use one visual rule. */
:is(
  .fayni-lyody,
  .nfm-agro-crm,
  .uamade,
  .w8shipping-support,
  .finboto,
  .medhouse-club,
  .veres-chatbot,
  .rehau-chatbot,
  .virtualnyi-druh-selia
) :is(.astra-bot__img, .astra-admin__item, .astra-panel__img-item) > picture {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--case-shot-outer-pad);
  overflow: hidden;
  border-radius: var(--case-shot-outer-radius);
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, var(--case-shot-accent), var(--case-shot-deep));
  box-shadow:
    var(--case-shot-shadow),
    0 0 0 1px rgba(11, 20, 42, 0.1);
}

:is(
  .fayni-lyody,
  .nfm-agro-crm,
  .uamade,
  .w8shipping-support,
  .finboto,
  .medhouse-club,
  .veres-chatbot,
  .rehau-chatbot,
  .virtualnyi-druh-selia
) .astra-admin__items {
  align-items: flex-start;
}

:is(
  .fayni-lyody,
  .nfm-agro-crm,
  .uamade,
  .w8shipping-support,
  .finboto,
  .medhouse-club,
  .veres-chatbot,
  .rehau-chatbot,
  .virtualnyi-druh-selia
) :is(.astra-admin__item, .astra-panel__img-item) {
  align-self: flex-start;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

:is(
  .fayni-lyody,
  .nfm-agro-crm,
  .uamade,
  .w8shipping-support,
  .finboto,
  .medhouse-club,
  .veres-chatbot,
  .rehau-chatbot,
  .virtualnyi-druh-selia
) :is(.astra-admin__item, .astra-panel__img-item) > picture {
  height: auto;
}

:is(
  .fayni-lyody,
  .nfm-agro-crm,
  .uamade,
  .w8shipping-support,
  .finboto,
  .medhouse-club,
  .veres-chatbot,
  .rehau-chatbot,
  .virtualnyi-druh-selia
) :is(.astra-bot__img, .astra-admin__item, .astra-panel__img-item) > picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--case-shot-inner-pad);
  border-radius: var(--case-shot-inner-radius);
  background: #fff;
  outline: 1px solid rgba(15, 23, 42, 0.11);
  outline-offset: -1px;
  box-shadow: 0 10px 24px rgba(11, 20, 42, 0.15);
}

:is(
  .fayni-lyody,
  .nfm-agro-crm,
  .uamade,
  .w8shipping-support,
  .finboto,
  .medhouse-club,
  .veres-chatbot,
  .rehau-chatbot,
  .virtualnyi-druh-selia
) :is(.astra-admin__item, .astra-panel__img-item) > picture > img {
  height: auto;
  min-height: 0;
  object-fit: contain;
}

@media (max-width: 767px) {
  :is(
    .fayni-lyody,
    .nfm-agro-crm,
    .uamade,
    .w8shipping-support,
    .finboto,
    .medhouse-club,
    .veres-chatbot,
    .rehau-chatbot,
    .virtualnyi-druh-selia
  ) {
    --case-shot-outer-pad: 9px;
    --case-shot-inner-pad: 5px;
    --case-shot-outer-radius: 18px;
    --case-shot-inner-radius: 11px;
    --case-shot-shadow: 0 12px 28px rgba(13, 24, 51, 0.16);
  }
}

/* SELIA v2 assets already contain purpose-built phone/browser mockups. */
.virtualnyi-druh-selia :is(.astra-bot__img, .astra-admin__item, .astra-panel__img-item) > picture {
  padding: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.virtualnyi-druh-selia :is(.astra-bot__img, .astra-admin__item, .astra-panel__img-item) > picture > img {
  padding: 0;
  border-radius: 18px;
  background: transparent;
  outline: 0;
  box-shadow: none;
}