/* 1. Стиль слова-триггера в тексте */
      .hover-trigger {
        position: relative;
        text-decoration: none;
        color: #0066cc;
        border-bottom: 1px dashed #0066cc;
        cursor: pointer;
        display: inline-block; /* Защищает структуру слова при наведении */
      }

      /* 2. Скрытый блок подсказки (по умолчанию) */
      .hover-trigger .hover-content {
        display: none;
        position: absolute;
        top: 100%; /* Появляется ровно под словом */
        left: 0;
        width: 350px; /* Строгая ширина окна */
        height: 150px; /* Строгая высота окна */
        padding: 15px; /* Отступы от рамки до контента */
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 10;

        /* Защита от переполнения и выхода за рамки */
        box-sizing: border-box;
        overflow: hidden;
      }

      /* 3. Активация и отображение блока при наведении мыши */
      .hover-trigger:hover .hover-content {
        display: flex;
        flex-direction: row; /* Фото слева, текст справа */
        align-items: center; /* Центрирование по вертикали */
        gap: 15px; /* Пространство между фото и текстом */
      }

      /* 4. Настройки для изображения (левый блок) */
      .hover-content img {
        width: 120px; /* Фиксированная ширина контейнера под фото */
        height: 120px; /* Фиксированная высота контейнера под фото */
        object-fit: contain; /* Фото уменьшается пропорционально и влезает целиком */
        flex-shrink: 0; /* Запрещает тексту сжимать картинку */
      }

      /* 5. Настройки для текста (правый блок) */
      .hover-content span {
        font-size: 14px;
        color: #333333;
        text-align: left;

        /* Защита текста от вытягивания в одну строку */
        flex-grow: 1;
        word-break: break-word;
        white-space: normal;
      }

      /* --- СТИЛИ ДЛЯ УВЕЛИЧЕНИЯ ПО КЛИКУ --- */

      /* Делаем курсор-лупу при наведении на маленькое фото */
      .hover-content img {
        cursor: zoom-in;
      }

      /* Фон модального окна (затемнение на весь экран) */
      .lightbox {
        display: none; /* По умолчанию скрыто */
        position: fixed;
        z-index: 1000; /* Выше всех элементов на странице */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
        justify-content: center;
        align-items: center;
      }

      /* Ограничение размеров для увеличенной картинки */
      .lightbox-content {
        max-width: 80%; /* Занимает максимум 80% ширины экрана */
        max-height: 80vh; /* Занимает максимум 80% высоты экрана */
        object-fit: contain; /* Сохраняет пропорции без искажений и обрезки */
        border: 3px solid #ffffff;
        border-radius: 4px;
        background-color: #000;
      }

      /* Кнопка закрытия (крестик) */
      .lightbox-close {
        position: absolute;
        top: 20px;
        right: 35px;
        color: #ffffff;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s;
      }

      .lightbox-close:hover {
        color: #bbb;
      }