/* Joomla Center — approved JoomProjects catalogue and project designs.
   Load AFTER template.css, custom.css and the component's site/gallery CSS.
   RU / EN, existing HTML. No rules for tags, project-icons, comments content
   or global pagination. Standalone versions view is a separate design stage. */

#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) {
  --jp-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jp-text: #172334;
  --jp-intro: #173c55;
  --jp-link: #236093;
  --jp-muted: #61758c;
  --jp-icon: #6b85a0;
  --jp-line: #d8e1eb;
  --jp-soft: #f3f6f9;
  --jp-hero: url("/images/joomprojects-downloads-hero.webp");
  min-inline-size: 0;
}

/* 1. All projects and category projects: same markup, same rules. */
#sp-component #JoomProjects.projects { container: jp-catalogue / inline-size; }
#sp-component #JoomProjects.projects > .category.info {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 240px;
  margin: 0 0 24px !important; /* Bootstrap mb-5 */
  padding: 28px 40% 28px 32px;
  overflow: hidden;
  border: 1px solid #4f87be;
  border-radius: 12px;
  background: radial-gradient(ellipse at 93% 65%, #76b6ed33, transparent 52%),
    linear-gradient(110deg, #143b74, #1b5798 64%, #2a6eac);
  box-shadow: none;
}
#sp-component #JoomProjects.projects > .category.info::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 43%;
  max-inline-size: 360px;
  background: var(--jp-hero) right 12px center / auto 224px no-repeat;
  pointer-events: none;
}
#sp-component #JoomProjects.projects > .category.info > h1 {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important; /* Existing .view-projects h1 has an important background color. */
  box-shadow: none;
  color: #fff;
  font: 750 clamp(28px, 4.3cqi, 38px)/1.15 var(--jp-font);
  letter-spacing: -.03em;
  text-align: start;
  text-transform: none;
  text-shadow: none;
  overflow-wrap: break-word;
  text-wrap: balance;
}
#sp-component #JoomProjects.projects > .category.info > h1::before,
#sp-component #JoomProjects.projects > .category.info > h1::after { content: none; }
#sp-component #JoomProjects.projects > .category.info > .description {
  margin: 12px 0 0;
  color: #e3efff;
  font: 400 16px/1.6 var(--jp-font);
  overflow-wrap: break-word;
}
#sp-component #JoomProjects.projects > .category.info > .description p { margin: 0; }
#sp-component #JoomProjects.projects > .category.info > .description a { color: inherit; }
#sp-component #JoomProjects.projects .projectsList > .items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
#sp-component #JoomProjects.projects .projectsList > .items::before,
#sp-component #JoomProjects.projects .projectsList > .items::after { content: none; }
#sp-component #JoomProjects.projects .projectsList > .items > .project {
  display: flex !important; /* Legacy article.project.col uses display:block!important. */
  inline-size: auto;
  min-inline-size: 0;
  margin: 0 !important; /* Same legacy rule adds a 30px bottom margin. */
  padding: 0;
  transform: none;
  box-shadow: none;
}
#sp-component #JoomProjects.projects .projectsList > .items > .project > .card {
  flex: 1;
  min-inline-size: 0;
  block-size: auto !important; /* h-100 */
  padding: 0;
  border: 1px solid var(--jp-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#sp-component #JoomProjects.projects .projectsList > .items > .project:hover > .card {
  border-color: #b9ccdf;
  box-shadow: 0 5px 16px #17344e0d;
}
#sp-component #JoomProjects.projects .projectsList .card-body { padding: 20px; }
#sp-component #JoomProjects.projects .projectsList .card-body > .row { margin: 0 0 12px !important; }
#sp-component #JoomProjects.projects .projectsList header > a { color: var(--jp-link) !important; text-decoration: none; }
#sp-component #JoomProjects.projects .projectsList h2 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--jp-link);
  font: 650 18px/1.4 var(--jp-font);
  letter-spacing: -.015em;
  overflow-wrap: break-word;
  transition: color .18s ease;
}
#sp-component #JoomProjects.projects .projectsList header > a:hover h2 {
  color: #0b4675;
  text-decoration: underline;
  text-underline-offset: .16em;
}
#sp-component #JoomProjects.projects .projectsList .card-body > p {
  display: block !important; /* Keep existing introduction readable on mobile. */
  margin: 0;
  color: var(--jp-intro);
  font: 400 14px/1.65 var(--jp-font);
  overflow-wrap: break-word;
}
#sp-component #JoomProjects.projects .projectsList .project-buttons { padding: 16px 20px 20px; border-radius: 0 0 9px 9px; }

/* 2. Metadata: Font Awesome already loaded by the template.
   Labels remain available to screen readers. The order follows the current
   component template; project metadata may include optional extension fields. */
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--jp-muted);
  font: 400 12px/1.5 var(--jp-font);
}
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled > li,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li {
  position: relative;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled > li::before,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li::before {
  content: "\f12e";
  display: inline-block;
  inline-size: 14px;
  margin-inline-end: 5px;
  color: var(--jp-icon);
  font: 900 12px/1 "Font Awesome 5 Free";
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled > li:first-child::before,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:first-child::before { content: "\f07c"; }
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled > li:nth-child(2)::before,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:has(> span)::before { content: "\f126"; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:has(> time)::before { content: "\f133"; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:nth-child(5):not(:last-child)::before,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta:not(:has(> li > time)) > li:nth-child(3):not(:last-child)::before { content: "\f1b3"; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:last-child:not(:has(> a, > span, > time))::before {
  content: "\f1aa";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled > li > strong,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:first-child > strong,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:has(> span, > time) > strong {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled a,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta a {
  color: var(--jp-muted);
  text-decoration: none;
  transition: color .18s ease;
}
#sp-component #JoomProjects.projects .projectsList header > .list-unstyled a:hover,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta a:hover { color: #115a91; text-decoration: underline; text-underline-offset: .16em; }

/* 3. Buttons: match the actual news Read more / Discuss variants.
   Only project actions and project-version actions; never generic .btn rules. */
#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons > .btn,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions td > .btn,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions td > span > .btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto !important; /* Existing w-100 and btn-group utilities. */
  max-inline-size: 100%;
  min-block-size: 38px;
  margin: 0 !important; /* Existing me-2 / mb-2. */
  padding: 8px 14px;
  border: 1px solid #115a91;
  border-radius: 8px !important;
  background: #115a91;
  color: #fff;
  font: 500 14px/20px var(--jp-font);
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  white-space: nowrap;
  transition: color .4s, background-color .4s, border-color .4s, box-shadow .16s;
}
#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons > .btn:hover,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions td > .btn:hover {
  border-color: #0b4675;
  background: #0b4675;
  color: #fff;
}
#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons > :is([data-btn-download], [data-jp-download]),
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions td > [data-jp-download] {
  min-block-size: 40px;
  padding: 12px 18px;
  border: 0;
  background: #328fee;
  font: 400 16px/16px Roboto, Arial, sans-serif;
  transition: background-color .16s, border-color .16s, box-shadow .16s;
}
#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons > :is([data-btn-download], [data-jp-download]):hover,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions td > [data-jp-download]:hover {
  border-color: #216db4;
  background: #216db4;
  box-shadow: 0 3px 8px #115a9126;
}
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions td > span > .btn:disabled {
  border-color: #c2cbd5;
  background: #c2cbd5;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}
#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons > .btn > :is(i, span),
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions td .btn > :is(i, span) { margin-inline: 0 !important; }

/* 4. Project summary. No font/color on ancestors of preserved badges/tags. */
#sp-component #JoomProjects.sw-jprojects-project > .project.info {
  margin: 0 0 24px !important;
  padding: 0;
  border: 1px solid var(--jp-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
#sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body {
  container: jp-summary / inline-size;
  min-inline-size: 0;
  padding: 24px;
}
#sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px 24px;
  margin: 0 0 16px !important;
}
#sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body > .row:has(> .project-icon-column) { grid-template-columns: minmax(0, 1fr) clamp(112px, 21cqi, 180px); }
#sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body > .row::before,
#sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body > .row::after { content: none; }
#sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body > .row > :not(.project-icon-column),
#sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body > .row > :not(.project-icon-column) > header { display: contents; }
#sp-component #JoomProjects.sw-jprojects-project .project-title {
  grid-area: 1 / 1;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--jp-text);
  font: 700 clamp(28px, 4.6cqi, 38px)/1.2 var(--jp-font);
  letter-spacing: -.025em;
  text-transform: none;
  text-shadow: none;
  overflow-wrap: break-word;
}
#sp-component #JoomProjects.sw-jprojects-project .project-title::before,
#sp-component #JoomProjects.sw-jprojects-project .project-title::after { content: none; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta { grid-area: 2 / 1; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta > li:nth-child(n+4) { flex-basis: 100%; }
#sp-component #JoomProjects.sw-jprojects-project .project-icon-column {
  grid-area: 1 / 2 / 4 / 3;
  inline-size: auto;
  min-inline-size: 0;
  margin: 0 !important;
  padding: 0;
  order: 0;
}
#sp-component #JoomProjects.sw-jprojects-project .project-icon-column > img { display: block; max-inline-size: 100%; block-size: auto; object-fit: contain; }
#sp-component #JoomProjects.sw-jprojects-project > .project.info .description {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--jp-intro);
  font: 400 14px/1.65 var(--jp-font);
  overflow-wrap: break-word;
}

/* 5. Adjacent existing tab navigation/content form ONE visual container. */
#sp-component #JoomProjects.sw-jprojects-project > #projectTabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-inline-size: 0;
  margin: 0;
  padding: 8px 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--jp-line);
  border-radius: 10px 10px 0 0;
  background: #fff;
  list-style: none;
}
#sp-component #JoomProjects.sw-jprojects-project > #projectTabs > .nav-item { flex: 0 0 auto; margin: 0; padding: 0; }
#sp-component #JoomProjects.sw-jprojects-project > #projectTabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  background: none;
  color: var(--jp-muted);
  font: 600 14px/20px var(--jp-font);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s, color .18s, border-color .18s;
}
#sp-component #JoomProjects.sw-jprojects-project > #projectTabs .nav-link:hover { background: var(--jp-soft); color: #115a91; }
#sp-component #JoomProjects.sw-jprojects-project > #projectTabs .nav-link.active { border-bottom-color: #328fee; background: none; color: #115a91; }
#sp-component #JoomProjects.sw-jprojects-project > #projectTabs .nav-link > :is(i, span) { margin-inline: 0 !important; }
#sp-component #JoomProjects.sw-jprojects-project #project_versions-tab .fa-tag::before { content: "\f126"; }
#sp-component #JoomProjects.sw-jprojects-project > #projectTabContent {
  min-inline-size: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--jp-line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fff;
}
#sp-component #JoomProjects.sw-jprojects-project > #projectTabContent > :is(#projectTab, #project_versions, #project_gallery, #project_changelog) { min-inline-size: 0; margin: 0; padding: 0 !important; }
#sp-component #JoomProjects.sw-jprojects-project > #projectTabContent > :is(#projectTab, #project_versions, #project_gallery, #project_changelog) > h2 {
  margin: 0 0 18px;
  padding: 0;
  color: var(--jp-text);
  font: 700 26px/1.3 var(--jp-font);
  letter-spacing: -.02em;
}

/* 6. Article-like description, explicitly confined to its own tab. */
#sp-component #JoomProjects.sw-jprojects-project #projectTab > :is(p, ul, ol, blockquote) {
  margin: 0 0 20px;
  color: var(--jp-text);
  font: 400 17px/1.7 var(--jp-font);
  overflow-wrap: break-word;
  text-align: start;
}
#sp-component #JoomProjects.sw-jprojects-project #projectTab > :is(ul, ol) { padding-inline-start: 24px; }
#sp-component #JoomProjects.sw-jprojects-project #projectTab > :is(h3, h4) {
  margin: 28px 0 12px;
  padding: 0;
  color: var(--jp-text);
  font: 700 22px/1.35 var(--jp-font);
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
#sp-component #JoomProjects.sw-jprojects-project #projectTab > h4 { font-size: 19px; }
#sp-component #JoomProjects.sw-jprojects-project #projectTab > p > a { color: #115a91; text-underline-offset: .16em; transition: color .18s; }
#sp-component #JoomProjects.sw-jprojects-project #projectTab > p > a:hover { color: #0b4675; }
#sp-component #JoomProjects.sw-jprojects-project #projectTab > p > img { max-inline-size: 100%; block-size: auto; border-radius: 8px; }

/* 7. Project versions TAB, not the standalone versions view. */
/* Keep absolute visually-hidden header labels inside the horizontal scroll clip. */
#sp-component #JoomProjects.sw-jprojects-project #project_versions > .table-responsive { position: relative; max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--jp-line); border-radius: 8px; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions {
  --bs-table-hover-bg: #f7f9fc;
  margin: 0;
  color: var(--jp-text);
  font: 400 14px/1.5 var(--jp-font);
}
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions > thead > tr > th { padding: 12px 14px; border-color: var(--jp-line); background: var(--jp-soft); font-size: 12px; font-weight: 650; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions > tbody > tr > td { padding: 12px 14px; border-color: var(--jp-line); vertical-align: middle; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions > tbody > tr:last-child > td { border-bottom: 0; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions > tbody > tr > td:first-child > a { color: var(--jp-link); font-weight: 600; text-underline-offset: .16em; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions > thead > tr > th > i { color: var(--jp-icon); }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions > thead > tr > th:first-child > .fa-tag::before { content: "\f126"; }

/* 8. Existing gallery thumbnails and lightbox. */
#sp-component #JoomProjects.sw-jprojects-project #project-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
#sp-component #JoomProjects.sw-jprojects-project #project-images > .col { inline-size: auto; min-inline-size: 0; padding: 0; }
#sp-component #JoomProjects.sw-jprojects-project #project-images figure.card { border: 1px solid var(--jp-line); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: none; }
#sp-component #JoomProjects.sw-jprojects-project #project-images .joomprojects-gallery-link { position: relative; color: #fff; }
#sp-component #JoomProjects.sw-jprojects-project #project-images .joomprojects-gallery-link::after {
  content: "\f00e";
  position: absolute;
  z-index: 1;
  inset: auto 8px 8px auto;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 6px;
  background: #17233499;
  color: #fff;
  font: 900 15px/1 "Font Awesome 5 Free";
  transition: background-color .18s;
}
#sp-component #JoomProjects.sw-jprojects-project #project-images .joomprojects-gallery-link:hover::after { background: #115a91; }
#sp-component #JoomProjects.sw-jprojects-project #project-images .joomprojects-gallery-image { transition: filter .18s; }
#sp-component #JoomProjects.sw-jprojects-project #project-images .joomprojects-gallery-link:hover .joomprojects-gallery-image { filter: brightness(.97); }
#sp-component #JoomProjects.sw-jprojects-project #project-images figure > .card-body { padding: 10px 12px; }
#sp-component #JoomProjects.sw-jprojects-project #project-images figcaption { color: #536274; font: 400 13px/1.5 var(--jp-font); }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-lightbox { z-index: 1080; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-lightbox-dialog > button {
  min-inline-size: 40px;
  min-block-size: 40px;
  border: 1px solid #ffffff40;
  border-radius: 8px;
  color: #fff;
  transition: background-color .18s, border-color .18s;
}
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-lightbox-dialog > button:hover { border-color: #ffffff80; background-color: #ffffff26; }

/* 9. Only this component's Changelog dialogs/accordion. */
#sp-component #JoomProjects.sw-jprojects-project :is(#joomprojectsChangelogModal, [id^="joomprojectsVersionChangelogModal"]) .modal-dialog { max-inline-size: min(800px, calc(100vw - 32px)); margin: 16px auto; }
#sp-component #JoomProjects.sw-jprojects-project :is(#joomprojectsChangelogModal, [id^="joomprojectsVersionChangelogModal"]) .modal-content {
  max-block-size: calc(100dvh - 32px);
  border: 1px solid var(--jp-line);
  border-radius: 12px;
  background: #fff;
  color: var(--jp-text);
  font: 400 14px/1.65 var(--jp-font);
  box-shadow: 0 12px 40px #17233433;
}
#sp-component #JoomProjects.sw-jprojects-project :is(#joomprojectsChangelogModal, [id^="joomprojectsVersionChangelogModal"]) .modal-header { padding: 16px 20px; border-bottom-color: var(--jp-line); }
#sp-component #JoomProjects.sw-jprojects-project :is(#joomprojectsChangelogModal, [id^="joomprojectsVersionChangelogModal"]) .modal-title { margin: 0; color: var(--jp-text); font-family: var(--jp-font); font-weight: 700; line-height: 1.35; }
#sp-component #JoomProjects.sw-jprojects-project :is(#joomprojectsChangelogModal, [id^="joomprojectsVersionChangelogModal"]) .modal-body { min-block-size: 0; padding: 20px !important; overflow: auto; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-item { margin: 0 0 10px; overflow: hidden; border: 1px solid var(--jp-line); border-radius: 8px; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-item:last-child { margin-bottom: 0; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-header { margin: 0; padding: 0; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button {
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  background: var(--jp-soft);
  color: var(--jp-text);
  font: 600 14px/1.5 var(--jp-font);
  box-shadow: none;
  transition: background-color .18s;
}
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button:hover { background: #eaf0f6; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button::after { content: "\f078"; inline-size: 1em; block-size: 1em; background: none; color: var(--jp-muted); font: 900 12px/1 "Font Awesome 5 Free"; transition: transform .18s; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-table { margin: 0; color: var(--jp-text); font: 400 14px/1.65 var(--jp-font); }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-table td { padding: 12px 14px; border-color: var(--jp-line); vertical-align: top; overflow-wrap: anywhere; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-table td:first-child { inline-size: 100px; white-space: nowrap; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-table tr:last-child td { border-bottom: 0; }
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-table .badge { border-radius: 4px; font-size: 10px; line-height: 1.4; }

/* Keyboard focus, without affecting existing tag/badge links. */
#sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons > .btn:focus-visible,
#sp-component #JoomProjects.projects .projectsList header > a:focus-visible,
#sp-component #JoomProjects.sw-jprojects-project #projectTabs .nav-link:focus-visible,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions .btn:focus-visible,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-gallery-link:focus-visible,
#sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button:focus-visible { outline: 2px solid #397fb8; outline-offset: 3px; }

/* Local horizontal scrollbars, matching the site's copied-content module. */
#sp-component #JoomProjects.sw-jprojects-project #projectTabs,
#sp-component #JoomProjects.sw-jprojects-project #project_versions > .table-responsive { scrollbar-width: thin; scrollbar-color: #6b8fa9 #edf3f8; }
@supports selector(::-webkit-scrollbar) {
  #sp-component #JoomProjects.sw-jprojects-project #projectTabs,
  #sp-component #JoomProjects.sw-jprojects-project #project_versions > .table-responsive { scrollbar-width: auto; scrollbar-color: auto; }
  #sp-component #JoomProjects.sw-jprojects-project #projectTabs::-webkit-scrollbar,
  #sp-component #JoomProjects.sw-jprojects-project #project_versions > .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
  #sp-component #JoomProjects.sw-jprojects-project #projectTabs::-webkit-scrollbar-track,
  #sp-component #JoomProjects.sw-jprojects-project #project_versions > .table-responsive::-webkit-scrollbar-track { border-radius: 8px; background: #edf3f8; }
  #sp-component #JoomProjects.sw-jprojects-project #projectTabs::-webkit-scrollbar-thumb,
  #sp-component #JoomProjects.sw-jprojects-project #project_versions > .table-responsive::-webkit-scrollbar-thumb { min-width: 32px; border: 2px solid #edf3f8; border-radius: 8px; background: #6b8fa9; }
  #sp-component #JoomProjects.sw-jprojects-project #projectTabs::-webkit-scrollbar-thumb:hover,
  #sp-component #JoomProjects.sw-jprojects-project #project_versions > .table-responsive::-webkit-scrollbar-thumb:hover { background: #236093; }
}

@container jp-catalogue (max-width: 680px) {
  #sp-component #JoomProjects.projects > .category.info { padding-inline: 24px 43%; }
  #sp-component #JoomProjects.projects > .category.info > h1 { font-size: 30px; }
}
@container jp-catalogue (max-width: 620px) {
  #sp-component #JoomProjects.projects .projectsList > .items { grid-template-columns: minmax(0, 1fr); }
}
@container jp-catalogue (max-width: 520px) {
  #sp-component #JoomProjects.projects > .category.info { min-block-size: 216px; padding: 24px 22px; }
  #sp-component #JoomProjects.projects > .category.info::after { inline-size: 100%; max-inline-size: none; opacity: .14; background-size: auto 200px; }
  #sp-component #JoomProjects.projects > .category.info > h1 { font-size: 28px; }
  #sp-component #JoomProjects.projects .projectsList .card-body { padding: 16px; }
  #sp-component #JoomProjects.projects .projectsList .project-buttons { padding: 12px 16px 16px; }
}
@container jp-summary (max-width: 520px) {
  #sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body > .row:has(> .project-icon-column) { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px 16px; }
  #sp-component #JoomProjects.sw-jprojects-project .project-icon-column { grid-area: 1 / 2 / 2 / 3; }
  #sp-component #JoomProjects.sw-jprojects-project .project-title { align-self: center; font-size: 28px; }
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-meta { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  #sp-component #JoomProjects.sw-jprojects-project > .project.info > .card-body,
  #sp-component #JoomProjects.sw-jprojects-project > #projectTabContent { padding: 16px; }
  #sp-component #JoomProjects.sw-jprojects-project > #projectTabs { padding-inline: 6px; }
  #sp-component #JoomProjects.sw-jprojects-project > #projectTabs .nav-link { padding-inline: 12px; }
  #sp-component #JoomProjects.sw-jprojects-project #project-images { grid-template-columns: minmax(0, 1fr); }
  #sp-component #JoomProjects.sw-jprojects-project #projectTab > :is(p, ul, ol, blockquote) { font-size: 16px; }
  #sp-component #JoomProjects.sw-jprojects-project > #projectTabContent > :is(#projectTab, #project_versions, #project_gallery, #project_changelog) > h2 { font-size: 24px; }
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-table td { padding: 10px 8px; }
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button { padding: 12px 10px; gap: 8px; }
  #sp-component #JoomProjects.sw-jprojects-project :is(#joomprojectsChangelogModal, [id^="joomprojectsVersionChangelogModal"]) .modal-body { padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #sp-component #JoomProjects:is(.projects, .sw-jprojects-project) .project-buttons > .btn,
  #sp-component #JoomProjects.projects .projectsList > .items > .project > .card,
  #sp-component #JoomProjects.projects .projectsList h2,
  #sp-component #JoomProjects.sw-jprojects-project #projectTabs .nav-link,
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-project-versions .btn,
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-gallery-link::after,
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-gallery-image,
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-lightbox-dialog > button,
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button,
  #sp-component #JoomProjects.sw-jprojects-project .joomprojects-changelog-accordion .accordion-button::after { transition: none; }
}