/**
 * Карточка поста LOOKY в теле статьи («сниппет»).
 *
 * Размеры и цвета взяты из карточки ленты looky.com (looky-web:
 * co/PostCard, PostMedia, PostActions, Follows/FollowButton, PostVideo),
 * чтобы карточка в статье выглядела как пост, на который она ведёт.
 * Шрифт не задаём — карточка наследует шрифт статьи.
 *
 * Отдельный файл, а не часть looky-cms.css: он подключается только на
 * страницах с карточкой, и новое имя файла не упирается в 30-дневный
 * кэш nginx для /css/.
 *
 * Внутри карточки всё сброшено явно: глобальные стили Webflow задают свои
 * отступы абзацам, картинкам и ссылкам.
 */

.looky-post {
  --looky-brand: #793ff3;
  --looky-brand-hover: #7431e0;
  --looky-accent: #833bfc;
  --looky-text: rgba(30, 30, 30, 0.88);
  --looky-muted: rgba(30, 30, 30, 0.48);
  --looky-card-border: rgba(30, 30, 30, 0.08);
  --looky-card-inline: 24px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 600px;
  margin: 8px 0 16px;
  padding: var(--looky-card-inline);
  border: 1px solid var(--looky-card-border);
  border-radius: 16px;
  background: #fff;
  color: var(--looky-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.looky-post *,
.looky-post *::before,
.looky-post *::after {
  box-sizing: border-box;
}

/* Сброс через :where — со специфичностью класса, а не класса и тега:
   иначе он перебивал бы цвет кнопки «Подписаться» и иконок ниже */
.looky-post :where(a) {
  color: inherit;
  text-decoration: none;
}

.looky-post p {
  margin: 0;
}

.looky-post img,
.looky-post video,
.looky-post svg {
  display: block;
}

/* --- шапка: автор и «Подписаться» ---------------------------------------- */

.looky-post-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.looky-post-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.looky-post-avatar {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  overflow: visible;
}

.looky-post-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
}

/* Без аватара — заглушка из looky-web (assets/default_avatar.svg) */
.looky-post-avatar.is-empty {
  background: #d9d9d9 no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Ccircle cx='250' cy='250' r='250' fill='%23D9D9D9'/%3E%3Cg opacity='.5' fill='none' stroke='%233E4757' stroke-width='16.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M149.778 362.5c0-34.595 44.871-62.639 100.222-62.639s100.222 28.044 100.222 62.639'/%3E%3Cpath d='M250 262.278c34.594 0 62.639-28.045 62.639-62.639C312.639 165.044 284.594 137 250 137c-34.595 0-62.639 28.044-62.639 62.639 0 34.594 28.044 62.639 62.639 62.639z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Галочка подтверждённого аккаунта (assets/verify_badge.svg): 14px в правом нижнем углу */
.looky-post-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' rx='23' fill='%23fff'/%3E%3Cpath fill='%230679FF' fill-rule='evenodd' d='M23.58 6.295a6.667 6.667 0 0 1 8.84 0l2.849 2.427c.344.294.772.47 1.222.507l3.731.297a6.667 6.667 0 0 1 6.251 6.251l.298 3.731c.036.451.213.878.506 1.223l2.428 2.849a6.667 6.667 0 0 1 0 8.84l-2.428 2.849a2.222 2.222 0 0 0-.506 1.222l-.298 3.732a6.667 6.667 0 0 1-6.251 6.25l-3.731.298c-.45.036-.878.213-1.222.507l-2.849 2.427a6.667 6.667 0 0 1-8.84 0l-2.849-2.427a2.222 2.222 0 0 0-1.222-.507l-3.732-.297a6.667 6.667 0 0 1-6.25-6.251l-.298-3.732a2.222 2.222 0 0 0-.507-1.222L6.295 32.42a6.667 6.667 0 0 1 0-8.84l2.427-2.849c.294-.344.47-.772.507-1.222l.298-3.732a6.667 6.667 0 0 1 6.25-6.25l3.732-.298c.45-.036.878-.213 1.222-.507l2.849-2.427z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M36.65 21.683a2.333 2.333 0 0 1 0 3.3l-9.333 9.334a2.333 2.333 0 0 1-3.3 0l-4.667-4.667a2.333 2.333 0 1 1 3.3-3.3l3.017 3.017 7.683-7.684a2.333 2.333 0 0 1 3.3 0z'/%3E%3C/svg%3E");
}

.looky-post-name {
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--looky-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.looky-post .looky-post-follow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--looky-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease-in-out;
}

.looky-post .looky-post-follow:hover {
  background: var(--looky-brand-hover);
  color: #fff;
}

/* --- медиа --------------------------------------------------------------- */

.looky-post-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(30, 30, 30, 0.04);
}

/* Фото показываем целиком: высоту задаёт соотношение сторон самого снимка */
.looky-post-media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Видео, наоборот, ограничиваем по высоте — иначе вертикальный ролик занимает
   весь экран; по бокам остаётся серое поле, как в ленте */
.looky-post-media.is-video {
  max-height: 740px;
}

.looky-post-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Своя площадь клика поверх видео: браузерных контролов у карточки нет */
.looky-post-playback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.looky-post-play-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.looky-post-media.is-paused .looky-post-play-icon {
  display: flex;
}

.looky-post-play-icon svg {
  width: 42px;
  height: 42px;
  margin-left: 2px;
}

/* Кнопка звука: капсула в правом нижнем углу кадра */
.looky-post-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-tap-highlight-color: transparent;
}

.looky-post-sound svg {
  width: 20px;
  height: 20px;
}

.looky-post-sound .looky-post-sound-on,
.looky-post-media.is-muted .looky-post-sound .looky-post-sound-off {
  display: block;
}

.looky-post-sound .looky-post-sound-off,
.looky-post-media.is-muted .looky-post-sound .looky-post-sound-on {
  display: none;
}

/* --- действия: лайк, комментарий | закладка, открыть ---------------------- */

.looky-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.looky-post-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.looky-post .looky-post-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #1e1e1e;
  transition: opacity 0.15s ease-in-out;
}

.looky-post .looky-post-action:hover {
  opacity: 0.6;
  color: #1e1e1e;
}

.looky-post-action svg {
  width: 22px;
  height: 22px;
}

/* --- подпись ------------------------------------------------------------- */

.looky-post-caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  /* Глобальный стиль Webflow центрирует figcaption — подпись держим слева, как в ленте */
  text-align: left;
}

.looky-post-text {
  /* Развёрнутая подпись показывается с исходными переносами строк */
  white-space: pre-line;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--looky-text);
  overflow-wrap: anywhere;
}

.looky-post-text a {
  color: var(--looky-accent);
}

.looky-post-text-full {
  display: none;
}

.looky-post.is-expanded .looky-post-text-full {
  display: inline;
}

.looky-post.is-expanded .looky-post-text-short,
.looky-post.is-expanded .looky-post-more {
  display: none;
}

/* Неброская кнопка в конце обрезанного текста: раскрывает подпись целиком */
.looky-post-more {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--looky-muted);
  cursor: pointer;
}

.looky-post-more:hover {
  color: var(--looky-accent);
}

/* Каждый хештег — ссылка на ленту по нему в LOOKY */
.looky-post-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--looky-accent);
}

.looky-post-hashtags a:hover {
  text-decoration: underline;
}

/* --- телефон ------------------------------------------------------------- */

@media (max-width: 500px) {
  /* Снимок тянем до границ карточки: своих полей и скруглений у него там
     нет, экрана и без того мало */
  .looky-post-media {
    width: auto;
    margin-left: calc(-1 * var(--looky-card-inline));
    margin-right: calc(-1 * var(--looky-card-inline));
    border-radius: 0;
  }

  .looky-post-play-icon {
    width: 48px;
    height: 48px;
  }

  .looky-post-play-icon svg {
    width: 32px;
    height: 32px;
    margin-left: 1px;
  }
}