/* news/components/NewsCard.vue */

/* ===== CSS hovers вместо inline @mouseenter/@mouseleave ===== */

/* Save button hover — scale */
.save-btn[data-v-90038927] {
  transition: transform 0.2s ease, background 0.2s ease;
}
.save-btn[data-v-90038927]:hover {
  transform: scale(1.1);
}

/* Card title hover — brand color */
.card-title[data-v-90038927] {
  transition: color 0.2s ease;
  color: var(--ink);
}
.card-title[data-v-90038927]:hover {
  color: var(--brand);
}

/* Резерв ровно 3 строки под заголовок (Вариант 1): все карточки в ряду
   идеально одинаковой высоты, независимо от длины заголовка.
   3 строки при leading 1.3 = 3.9em (em масштабируется от font-size). */
.headline-3lines[data-v-90038927] {
  min-height: 3.9em;
}

/* Gradient minitext title hover — opacity */
.gradient-minitext .card-title[data-v-90038927] {
  transition: opacity 0.2s ease;
}
.gradient-minitext .card-title[data-v-90038927]:hover {
  opacity: 0.85;
}

/* ===== Усиленная редакционная типографика (gradient-editorial) ===== */
.editorial-dropcap[data-v-90038927] {
  font-family: var(--font-serif);
  font-size: 84px;
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  user-select: none;
}
@media (min-width: 640px) {
.editorial-dropcap[data-v-90038927] {
    font-size: 116px;
}
}
.editorial-index[data-v-90038927] {
  font-size: 34px;
}
@media (min-width: 640px) {
.editorial-index[data-v-90038927] {
    font-size: 44px;
}
}

/* Миниатюра превью (compact «Читайте также»): фиксированные размеры через scoped-CSS,
   а не произвольные Tailwind-классы (w-[88px] и т.п.) — те не попадают в статическую
   таблицу styles.tsx и схлопывают плашку в нулевой размер (виден только текст). */
.compact-thumb[data-v-90038927] {
  width: 88px;
  height: 66px;
}
@media (min-width: 640px) {
.compact-thumb[data-v-90038927] {
    width: 104px;
    height: 78px;
}
}

/* Чип-круг рубрики в центре плашки (compact «Читайте также»): фиксированные размеры
   через scoped-CSS — sm:w-9/sm:h-9 отсутствуют в styles.tsx и схлопнули бы чип на десктопе. */
.compact-chip[data-v-90038927] {
  width: 32px;
  height: 32px;
}
@media (min-width: 640px) {
.compact-chip[data-v-90038927] {
    width: 36px;
    height: 36px;
}
}

/* Миниатюра горизонтальной плашки (image left, text right): фиксированная ширина,
   flex-shrink:0 и align-self:flex-start через scoped-CSS. Классы self-start отсутствует
   в статической таблице styles.tsx, из-за чего миниатюра растягивалась на всю высоту
   карточки (align-items:stretch) и картинка рендерилась узкой вертикальной полосой
   вместо 4:3 (урок compact-thumb). w-36/sm:w-44/lg:w-52 в таблице есть, но для надёжности
   размеры заданы здесь же. */
.h-thumb[data-v-90038927] {
  position: relative;
  width: 144px;
  flex-shrink: 0;
  align-self: flex-start;
  overflow: hidden;
  aspect-ratio: 4/3;
}
@media (min-width: 640px) {
.h-thumb[data-v-90038927] {
    width: 176px;
}
}
@media (min-width: 1024px) {
.h-thumb[data-v-90038927] {
    width: 208px;
}
}

/* Иконка-чип рубрики в центре плашки превью (compact «Читайте также»), как на странице автора */
.compact-card-icon[data-v-90038927] {
  width: 16px;
  height: 16px;
  display: block;
}
.compact-card-icon svg[data-v-90038927] {
  width: 100%;
  height: 100%;
  display: block;
}
@media (min-width: 640px) {
.compact-card-icon[data-v-90038927] {
    width: 18px;
    height: 18px;
}
}

/* SVG-символ рубрики на широкой 2/3 редакционной плашке (gradientWide) */
.gradient-wide-icon[data-v-90038927] {
  width: 96px;
  height: 96px;
  color: rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.3));
  user-select: none;
}
.gradient-wide-icon svg[data-v-90038927] {
  width: 100%;
  height: 100%;
  display: block;
}
@media (min-width: 640px) {
.gradient-wide-icon[data-v-90038927] {
    width: 140px;
    height: 140px;
}
}
@media (min-width: 1024px) {
.gradient-wide-icon[data-v-90038927] {
    width: 180px;
    height: 180px;
}
}
.gradient-editorial .card-title[data-v-90038927] {
  transition: color 0.2s ease;
}
.gradient-editorial .card-title[data-v-90038927]:hover {
  color: var(--brand);
}

/* ad-mini-block: override compact ad height for mobile (200px) */
.ad-mini-block[data-v-90038927] .ad-premium-compact {
  height: 200px;
}
@media (min-width: 1024px) {
.ad-mini-block[data-v-90038927] .ad-premium-compact {
    height: 359px;
}
}