.home-media-banners .banner-imagine-custom-services { grid-area: imagine; }
/* Современные медийные баннеры главной страницы */

/* Контейнер для медийных баннеров: фиксированная сетка 3x3 с именованными областями */
.home-media-banners,
.admin-icons-grid.home-banners-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "midjourney flux imagine"
    "animate    animate news"
    "animate    animate upscale" !important;
  gap: 8px !important;
  padding: 20px !important; /* равные отступы со всех сторон */
  justify-items: stretch !important;
  align-items: stretch !important;
  box-sizing: border-box;
}

/* TWA режим: вертикальная компоновка */
body.twa-mode .home-media-banners,
body.twa-mode .admin-icons-grid.home-banners-grid {
  display: grid !important;  
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "midjourney flux imagine"
    "animate    animate news"
    "animate    animate upscale"!important;
  gap: 16px !important;
  padding: 16px 0 !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  box-sizing: border-box;
}

/* Медийный баннер */
.media-banner,
.admin-icon-item.home-banner {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  min-height: 180px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  /* Выпуклая кнопка (средняя интенсивность): внешняя + внутренние тени */
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),          /* внешняя тень — подъём */
    0 2px 0 rgba(255,255,255,0.04) inset,   /* верхняя тонкая подсветка */
    0 -3px 6px rgba(0,0,0,0.55) inset,      /* нижняя тень — грань */
    0 0 0 1px rgba(255,255,255,0.05) inset; /* внутренняя окантовка */
}

/* Hover эффекты для десктопа */
body:not(.twa-mode) .media-banner:hover,
body:not(.twa-mode) .admin-icon-item.home-banner:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.55),
    0 2px 0 rgba(255,255,255,0.06) inset,
    0 -4px 8px rgba(0,0,0,0.6) inset,
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

/* Все баннеры одинаковой высоты */
.media-banner,
.admin-icon-item.home-banner { 
  height: 100%;
  width: 100% !important;
}

/* Первая строка: авто-высота по ширине контента */
.home-media-banners .banner-midjourney,
.home-media-banners .banner-flux,
.home-media-banners .banner-imagine {
  height: auto !important;
}
.home-media-banners .banner-midjourney .media-banner-content,
.home-media-banners .banner-flux .media-banner-content,
.home-media-banners .banner-imagine .media-banner-content {
  position: static !important;
  width: 100% !important;
  height: auto !important;
}
.home-media-banners .banner-midjourney .media-banner-image,
.home-media-banners .banner-flux .media-banner-image,
.home-media-banners .banner-imagine .media-banner-image {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Медиа контент (изображение или видео) */
.media-banner-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Дополнительные тени поверх медиа (без фона), чтобы усилить рельеф по краям */
.media-banner::after,
.admin-icon-item.home-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1; /* над изображением/видео, под текстом */
  box-shadow:
    inset 0 5px 8px rgba(255, 255, 255, 0.151), /* мягкий верхний подсвет */
    inset 0 -14px 16px rgba(0, 0, 0, 0.28);      /* мягкая нижняя тень */
}

/* Фоновые баннеры (центрируем и не влияем на высоту блока) */
.media-banner-bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0.95);
}

.media-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Оверлей для читаемости текста */
.media-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.3) 60%,
    rgba(0,0,0,0.7) 100%
  );
  pointer-events: none;
}

/* Декоративные подписи для Animate */
.animate-label-top {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.animate-subline-bottom {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  z-index: 3;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* Подпись внизу слева для MidJourney/Flux/Imagine в стиле Animate */
.banner-label-bottom-left {
  position: absolute;
  left: 6px;
  bottom: 8px;
  z-index: 3;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* Список фич Imagine в правом верхнем углу */
/* Однострочная (двухстрочная) подпись Imagine сверху по центру */
.imagine-feature-inline {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  color: #f763ad;
  font-size: 7px;
  line-height: 1.2;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* САЙТ (не TWA): адаптивные размеры текста по viewport */
body:not(.twa-mode) .imagine-feature-inline {
  top: clamp(6px, 0.8vw, 14px);
  font-size: clamp(10px, 1.2vw, 12px);
}
body:not(.twa-mode) .banner-label-bottom-left {
  left: clamp(6px, 0.8vw, 16px);
  bottom: clamp(8px, 0.8vw, 16px);
  font-size: clamp(12px, 1.4vw, 20px);
}
body:not(.twa-mode) .animate-label-top {
  top: clamp(6px, 0.8vw, 14px);
  left: clamp(8px, 1vw, 18px);
  font-size: clamp(12px, 1.2vw, 18px);
}

/* Контент текста */
.media-banner-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: white;
  z-index: 2;
}

.media-banner-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
}

.media-banner-subtitle {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* TWA специфичные размеры */
body.twa-mode .media-banner {
  min-height: 160px;
  border-radius: 12px;
}

body.twa-mode .media-banner-text {
  padding: 16px;
}

body.twa-mode .media-banner-title {
  font-size: 20px;
}

body.twa-mode .media-banner-subtitle {
  font-size: 12px;
}

body.twa-mode .media-banner.banner-animate {
  min-height: 180px ; 
}

/* Поддержка старой разметки для совместимости */
.admin-dashboard-grid-container {
  padding: 0;
  margin: 0;
}

.home-media-banners {
  max-width: 100%;
  width: 100%;
}

/* Fallback стили если grid не работает */
.media-banner {
  display: block !important;
  width: 100% !important;
}

/* Переопределяем размеры из admin_specific.css для медиа баннеров */
.admin-icon-item.home-banner .admin-icon-bg {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}

/* Скрыть все старые элементы и тексты */
.admin-icon-item.home-banner .admin-icon-bg i.bi,
.home-banner-decor,
.home-banner-title-top,
.home-banner-meta-bottom,
.admin-icon-item.home-banner > span {
  display: none !important;
}

/* Привязка элементов к именованным областям сетки */
.home-media-banners .banner-midjourney { grid-area: midjourney; }
.home-media-banners .banner-flux { grid-area: flux; }
.home-media-banners .banner-imagine { grid-area: imagine; }
.home-media-banners .banner-animate { grid-area: animate; grid-column: 1 / span 2; grid-row: 2 / span 2; }
.home-media-banners .banner-news { grid-area: news; grid-column: 3 !important; grid-row: 2 !important; height: 120px !important; margin: 0 !important; }
.home-media-banners .banner-upscale { grid-area: upscale; grid-column: 3 !important; grid-row: 3 !important; height: 120px !important; margin: 0 !important; }

/* Дополнительная привязка по slug для надёжности */
.home-media-banners [data-module-slug="midjourney"] { grid-area: midjourney !important; }
.home-media-banners [data-module-slug="flux"] { grid-area: flux !important; }
.home-media-banners [data-module-slug="imagine"] { grid-area: imagine !important; }
.home-media-banners [data-module-slug="imagine-custom-services"] { grid-area: imagine !important; }
.home-media-banners [data-module-slug="animate"] { grid-area: animate !important; grid-column: 1 / span 2 !important; grid-row: 2 / span 2 !important; }
.home-media-banners [data-module-slug="news"] { grid-area: news !important; }
.home-media-banners [data-module-slug="upscale"] { grid-area: upscale !important; }

/* Отображение видео в Animate полностью (без кропа) */
.home-media-banners .banner-animate .media-banner-video {
  object-fit: cover !important;
  background: #000 !important;
}

/* Пропорциональное вписывание картинок News/ Upscale, без черных обрезов */
/* Для маленьких блоков используем фоновое изображение через .media-banner-bg */
.home-media-banners .banner-news .media-banner-bg,
.home-media-banners .banner-upscale .media-banner-bg {
  background-size: cover !important; /* убираем черные полосы по краям */
  background-color: #0b0b0b;
  border-radius: 14px;
}

/* TWA адаптация: портрет и ландшафт */
/* Контейнер на всю ширину экрана c безопасной зоной */
body.twa-mode .admin-dashboard-grid-container {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 12px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

/* УНИФИЦИРОВАННЫЙ РЕЖИМ TWA (портрет и ландшафт): повторяем сайт, но компактнее */
body.twa-mode .home-media-banners {
  /* TWA: 2 колонки в первой строке (midjourney | flux), затем imagine | news / imagine | upscale, и animate на всю ширину */
  width: 92vw !important;
  margin: 0 auto !important;
  padding: 12px !important;
  gap: 8px !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "midjourney flux imagine"
    "animate animate news"
    "animate animate upscale" !important;
}
/* В TWA убираем минимальную высоту карточек, чтобы строки сетки управляли высотой */
body.twa-mode .media-banner,
body.twa-mode .admin-icon-item.home-banner {
  height: 100% !important;
}
/* Медиа внутри карточек всегда заполняют блок */
body.twa-mode .media-banner-content { position: absolute !important; inset: 0 !important; }
body.twa-mode .media-banner-image,
body.twa-mode .media-banner-video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* Убираем скругление переполнения и обеспечиваем независимые слои */
body.twa-mode .media-banner { position: relative !important; overflow: hidden !important; border-radius: 12px !important; }
/* Малые карточки справа */
/* Первая строка: фиксированная высота карточек */
/* Сброс фиксированных высот/позиций; используем grid-areas выше */
body.twa-mode .home-media-banners .banner-midjourney,
body.twa-mode .home-media-banners .banner-flux,
body.twa-mode .home-media-banners .banner-imagine,
body.twa-mode .home-media-banners .banner-news,
body.twa-mode .home-media-banners .banner-upscale,
body.twa-mode .home-media-banners .banner-animate {
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
body.twa-mode .home-media-banners .banner-midjourney { grid-area: midjourney !important; }
body.twa-mode .home-media-banners .banner-flux { grid-area: flux !important; }
body.twa-mode .home-media-banners .banner-imagine { grid-area: imagine !important; }
body.twa-mode .home-media-banners .banner-news { grid-area: news !important; }
body.twa-mode .home-media-banners .banner-upscale { grid-area: upscale !important; }
body.twa-mode .home-media-banners .banner-animate { grid-area: animate !important; }

/* Первая строка: уменьшаем карточки примерно в 4 раза от ширины контейнера */
/* Сбрасываем явные размеры для карточек в TWA, размером управляет сетка */
body.twa-mode .home-media-banners .media-banner,
body.twa-mode .home-media-banners .admin-icon-item.home-banner {
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
}

/* Остальные пока как есть, второй этап настроим позже */

/* Внутренние отступы сверху/снизу, чтобы выглядели аккуратно одна над другой */
.home-media-banners .banner-news .media-banner-content,
.home-media-banners .banner-upscale .media-banner-content {
  position: absolute;
  inset: 0;
  padding: 6px;
  box-sizing: border-box;
}


body.twa-mode .home-media-banners .banner-animate {
    min-height: 180px !important;
  }