/* Оформление sput.dyndns.org поверх встроенного шаблона Cassiopeia.
   Файл user.css шаблон подключает сам, обновления Joomla его не трогают. */

:root {
  --sput-navy: #0b2a4a;
  --sput-blue: #1565c0;
  --sput-accent: #f59e0b;
  --sput-text: #1f2933;
  --sput-muted: #5b6b7b;
  --cassiopeia-color-primary: var(--sput-navy);
  --cassiopeia-color-link: var(--sput-blue);
  --cassiopeia-color-hover: #0d47a1;
  --link-color: var(--sput-blue);
  --link-color-rgb: 21, 101, 192;
}

body.site {
  background: #f3f6fa;
  color: var(--sput-text);
}

/* Шапка: картинка с тарелками и пультом под тёмной заливкой */
.container-header {
  background-color: var(--sput-navy);
  background-image: linear-gradient(100deg, #081c34 0%, var(--sput-navy) 55%, #123d6b 100%);
}
.container-header .grid-child { padding-top: .75rem; }
.container-header .navbar-brand { padding: 1.5rem 0 .5rem; }
.container-header .navbar-brand .brand-logo {
  color: #fff;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.container-header .navbar-brand a,
.container-header .navbar-brand a:hover { text-decoration: none; }
.container-header .site-description {
  color: #cfe0f5;
  font-size: 1.05rem;
}

/* Главное меню — «пилюли» на тёмном фоне */
.container-header .container-nav { padding-bottom: .75rem; }
.container-header .mod-menu.nav-pills { gap: .35rem; flex-wrap: wrap; }
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  color: #e6eef8;
  border-radius: 999px;
  padding: .45rem .95rem;
  transition: background-color .15s, color .15s;
}
.container-header .mod-menu > li > a:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  background: var(--sput-accent);
  color: #1b1b1b;
  font-weight: 600;
}


.site-grid { margin-top: 0; }

/* Статьи — карточки */
.com-content-category-blog .blog-item,
.site-grid .com-content-article {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .08), 0 6px 18px rgba(16, 42, 67, .06);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}
.blog-items.masonry-2 { column-gap: 1.5rem; }
.blog-item .item-content { padding: 0; }
.page-header h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.page-header h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.page-header h2, .page-header h1 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--sput-navy);
}
.page-header h2 a { color: var(--sput-navy); text-decoration: none; }
.page-header h2 a:hover { color: var(--sput-blue); }
/* Сведения о статье — одной строкой мелким шрифтом */
.article-info {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.1rem;
  color: var(--sput-muted);
  font-size: .82rem;
  border-left: 3px solid var(--sput-accent);
  padding-left: .75rem;
  margin: .35rem 0 1rem;
}
.article-info .article-info-term { display: none; }
.article-info dd { margin: 0; }
.blog-item img, .com-content-article img { max-width: 100%; height: auto; border-radius: 8px; }

/* Правая колонка */
.container-sidebar-right .card {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .08), 0 6px 18px rgba(16, 42, 67, .06);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.container-sidebar-right .card-header {
  background: var(--sput-navy);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: 0;
}
.container-sidebar-right .mod-custom img { display: block; margin: 0 auto; }
.btn-primary {
  background: var(--sput-blue);
  border-color: var(--sput-blue);
}
.btn-primary:hover { background: #0d47a1; border-color: #0d47a1; }
/* Восстановление пароля письмом не работает — ссылки прячем */
.mod-login__options { display: none; }

/* Постраничная навигация */
.pagination .page-link { border-radius: 8px; margin: 0 .15rem; }
.pagination .active .page-link { background: var(--sput-navy); border-color: var(--sput-navy); }

/* Подвал */
.container-footer {
  background: var(--sput-navy);
  color: #cfe0f5;
  margin-top: 2rem;
}

@media (max-width: 767.98px) {
  .container-header .navbar-brand { padding-top: 1rem; }
  .com-content-category-blog .blog-item, .site-grid .com-content-article { padding: 1.1rem; }
}

/* Длинное название на узком экране переносится, а не обрезается */
.container-header .navbar-brand { white-space: normal; max-width: 100%; }
.container-header .navbar-brand .brand-logo { display: inline-block; white-space: normal; overflow-wrap: anywhere; }

/* Кнопка свёрнутого меню на телефоне */
.container-header .navbar-toggler {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
  margin-bottom: .75rem;
}
.container-header .navbar-collapse .mod-menu { flex-direction: column; }
@media (min-width: 992px) {
  .container-header .navbar-collapse .mod-menu { flex-direction: row; }
}

/* Картинка с тарелками и пультом — полосой во всю ширину сразу под шапкой.
   Края исходника белые, поэтому картинку чуть увеличиваем и обрезаем */
.container-banner { display: block; padding: 0; margin: 0 0 1.75rem; max-width: none; overflow: hidden; }
.container-banner .mod-custom p { margin: 0; }
.container-banner .mod-custom img {
  display: block;
  width: 100% !important;
  height: clamp(110px, 19vw, 300px) !important;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0;
  transform: scale(1.035);
}

/* Ссылка на админку Joomla в подвале */
.sput-admin-link { margin: 0; font-size: .85rem; }
.sput-admin-link a { color: #cfe0f5; text-decoration: none; }
.sput-admin-link a:hover { color: #fff; text-decoration: underline; }

/* На широком экране правая колонка узкая и прижата вправо: в ней только курс, вход и меню.
   Общая ширина как у баннера с меню в шапке — до 88rem */
@media (min-width: 992px) {
  .site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(3, minmax(0, 24rem)) minmax(0, 15rem) [main-end] minmax(0, 1fr) [full-end];
  }
  .container-header > .grid-child { max-width: 88rem; }
  .container-footer > .grid-child { max-width: 88rem; }
}
/* Пустая строка над курсом в старом модуле даёт лишний отступ */
.container-sidebar-right .mod-custom > p:not(:has(img, a, iframe)) { display: none; }
.container-sidebar-right .mod-custom p { margin: 0; }

/* Меню в шапке — плотнее, чтобы все пункты помещались в одну строку */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span { padding: .4rem .8rem; }
.container-header .mod-menu.nav-pills { gap: .2rem; }
.container-header .mod-menu > li { margin: 0; }

/* ===== Украшения ===== */

/* Значок спутниковой тарелки перед названием сайта */
.container-header .navbar-brand .brand-logo::before {
  content: "";
  display: inline-block;
  width: .95em;
  height: .95em;
  margin-right: .05em; /* после значка и так идёт пробел из разметки */
  vertical-align: -.08em;
  background: var(--sput-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10a7.31 7.31 0 0 0 10 10Z'/%3E%3Cpath d='m9 15 3-3'/%3E%3Cpath d='M17 13a6 6 0 0 0-6-6'/%3E%3Cpath d='M21 13A10 10 0 0 0 11 3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10a7.31 7.31 0 0 0 10 10Z'/%3E%3Cpath d='m9 15 3-3'/%3E%3Cpath d='M17 13a6 6 0 0 0-6-6'/%3E%3Cpath d='M21 13A10 10 0 0 0 11 3'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}

/* Оранжевая черта между картинкой и содержимым */
.container-banner { border-bottom: 4px solid var(--sput-accent); }

/* Карточки статей приподнимаются под курсором, сверху загорается полоска */
.com-content-category-blog .blog-item,
.site-grid .com-content-article { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.com-content-category-blog .blog-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sput-accent), var(--sput-blue));
  opacity: 0;
  transition: opacity .2s;
}
.com-content-category-blog .blog-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(16, 42, 67, .1), 0 14px 30px rgba(16, 42, 67, .12);
}
.com-content-category-blog .blog-item:hover::before { opacity: 1; }

/* Мягкое появление карточек при загрузке */
@media (prefers-reduced-motion: no-preference) {
  .com-content-category-blog .blog-item,
  .container-sidebar-right .card { animation: sput-rise .45s ease-out both; }
  .com-content-category-blog .blog-item:nth-child(2) { animation-delay: .06s; }
  .com-content-category-blog .blog-item:nth-child(3) { animation-delay: .12s; }
  .com-content-category-blog .blog-item:nth-child(n+4) { animation-delay: .18s; }
}
@keyframes sput-rise { from { opacity: 0; transform: translateY(10px); } }

/* Заголовки блоков справа — с оранжевой меткой слева */
.container-sidebar-right .card-header { border-left: 4px solid var(--sput-accent); }

/* Список старых новостей — отдельной карточкой */
.items-more {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .08), 0 6px 18px rgba(16, 42, 67, .06);
  padding: 1.1rem 1.6rem 1.2rem;
  margin-bottom: 1.5rem;
}
.items-more::before {
  content: "Ещё новости";
  display: block;
  font-weight: 700;
  color: var(--sput-navy);
  margin-bottom: .5rem;
}
.com-content-blog__links { list-style: none; padding: 0; margin: 0; }
.com-content-blog__links li { border-top: 1px solid #e8eef5; }
.com-content-blog__links li:first-child { border-top: 0; }
.com-content-blog__links a {
  display: block;
  padding: .5rem 0 .5rem 1.1rem;
  position: relative;
  color: var(--sput-text);
  text-decoration: none;
}
.com-content-blog__links a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--sput-accent);
  font-weight: 700;
}
.com-content-blog__links a:hover { color: var(--sput-blue); }

/* Кнопка «Наверх» — круглая оранжевая */
.back-to-top-link {
  background: var(--sput-accent) !important;
  color: #1b1b1b !important;
  border: 0 !important;
  border-radius: 50% !important;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

/* Подвал: оранжевая кромка сверху, подпись слева, вход справа */
.container-footer { border-top: 3px solid var(--sput-accent); }
.sput-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; align-items: center; font-size: .85rem; }
.sput-footer p { margin: 0; }

.container-footer .mod-custom { flex: 1; }
.sput-footer .sput-admin-link { padding-right: 4.75rem; } /* не под кнопкой «Наверх» */

/* На телефоне кнопка меню ближе к названию */
@media (max-width: 767.98px) {
  .container-header .container-nav { padding-top: 0; }
  .container-header .container-nav .navbar { margin-top: 0; }
}