/* Company family (showcase, showcase detail, partners, blog, about, contact,
   jug, style guide, typography): page CSS. Loaded only when the Main Class
   (M6) carries page-company. Tokens from template.css only, so light and
   dark follow automatically. Selectors are scoped by .page-company plus a
   block id (#j2c-block-<handle>) or a layout section id. */

/* --- Shared two-column bands: heading left (5/12), content right (7/12) --- */
@media (min-width: 992px) {
  .page-company .j2c-split > .container { display: grid; grid-template-columns: 5fr 7fr; column-gap: 3rem; align-items: start; }
  .page-company .j2c-split > .container > .j2c-section-head { grid-row: 1 / span 3; margin-bottom: 0; }
  .page-company .j2c-split > .container > .row { --bs-gutter-x: 0; margin: 0; }
  .page-company .j2c-split > .container > .row > * { width: 100%; padding: 0; }
}

/* --- Showcase ------------------------------------------------------------ */
@media (min-width: 992px) {
  .page-company #j2c-block-add-yours > .container { display: grid; grid-template-columns: 5fr 7fr; column-gap: 3rem; align-items: start; }
  .page-company #j2c-block-add-yours .j2c-section-head { grid-row: 1 / span 2; margin-bottom: 0; }
  .page-company #j2c-block-add-yours > .container > ul > li { width: 100%; }
}
.page-company #j2c-block-add-yours .j2c-tile h3 { margin-bottom: 1rem !important; }
.page-company #j2c-block-add-yours .j2c-tile .mb-3:last-child { margin-bottom: 0 !important; }
.page-company #j2c-block-add-yours p.d-flex { gap: 1rem !important; }
.page-company #j2c-block-add-yours p.d-flex .btn-primary {
  --bs-btn-color: var(--template-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--template-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--template-primary); --bs-btn-hover-border-color: var(--template-primary);
}
.page-company .j2c-stores .card { display: flex; flex-direction: column; }

/* --- Showcase detail (article in the Showcase category) --------------------- */
/* The hero capture is drawn like the mockup's .j2c-shot frame (no float shadow). */
.view-article .page-company #j2c-block-hero .j2c-hero-media:not(.j2c-hero-media--cutout) img { box-shadow: none; aspect-ratio: 16 / 11; object-fit: cover; object-position: top center; }
.page-company #j2c-block-more > .container > p { justify-content: center; margin-top: 0 !important; max-width: none; }

/* --- Blog archive (category/blog.php) -------------------------------------- */
.page-company .j2c-chip[aria-current="page"] { border-color: var(--template-primary); background-color: var(--template-primary); color: var(--template-on-primary); font-weight: 600; }
.page-company .j2c-post-card { display: flex; flex-direction: column; }
.page-company .j2c-post-card__img-link { display: block; }
.page-company .j2c-post-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 768px) {
  .page-company .j2c-post-card--lead .j2c-post-card__img-link { height: 100%; }
  .page-company .j2c-post-card--lead .j2c-post-card__img { height: 100%; min-height: 16rem; aspect-ratio: auto; }
}
.page-company .j2c-post-card h3 a { text-decoration: none; }
.page-company .j2c-post-card h3 a:hover { color: var(--template-primary) !important; }

/* --- About (article 2: blocks only) ---------------------------------------- */
/* Prose blocks whose first paragraph is the section subtitle. */
.page-company #j2c-block-story h2 + p,
.page-company #j2c-block-company h2 + p { max-width: var(--template-measure); margin-top: -0.75rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); font-size: var(--template-fs-lead); line-height: var(--template-lh-lead); color: var(--bs-secondary-color); }
.page-company #j2c-block-story h2,
.page-company #j2c-block-company h2 { max-width: 46rem; }
.page-company #j2c-block-story .j2c-prose,
.page-company #j2c-block-company .j2c-prose { max-width: none; }
.page-company #j2c-block-story h3 { font-size: var(--template-fs-h5, 1.25rem); margin-bottom: 0.5rem; }
.page-company #j2c-block-story h3 + p { color: var(--bs-secondary-color); margin-bottom: 1.5rem; }
.page-company #j2c-block-story figure { margin: 0; }
.page-company #j2c-block-story figure img { display: block; width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); }
.page-company #j2c-block-story figcaption { margin-top: 1rem; font-size: var(--template-fs-sm); color: var(--bs-secondary-color); }
@media (min-width: 992px) {
  .page-company #j2c-block-story .j2c-prose { display: grid; grid-template-columns: 7fr 5fr; column-gap: 3rem; align-items: start; }
  .page-company #j2c-block-story .j2c-prose > * { grid-column: 1; }
  .page-company #j2c-block-story .j2c-prose > figure { grid-column: 2; grid-row: 3 / span 12; }
}

/* The Rebuild: heading in the left third, table on the right. */
@media (min-width: 992px) {
  .page-company #j2c-block-rebuild > .container { display: grid; grid-template-columns: 1fr 2fr; column-gap: 3rem; align-items: start; }
  .page-company #j2c-block-rebuild .j2c-section-head { grid-row: 1 / span 2; margin-bottom: 0; }
}

/* Press: the prose's <div> group as one tile beside the block's media. */
.page-company #j2c-block-company .j2c-prose > div { padding: clamp(1.4rem, 2.5vw, 1.9rem); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background-color: var(--template-surface); }
.page-company #j2c-block-company .j2c-prose > div + div { margin-top: 1rem; }
.page-company #j2c-block-company h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.page-company #j2c-block-company ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: var(--template-fs-sm); }
.page-company #j2c-block-company .j2c-prose > div > p { font-size: var(--template-fs-sm); color: var(--bs-secondary-color); }
.page-company #j2c-block-company .j2c-prose > div > p a { display: inline-block; margin: 0 0.75rem 0.5rem 0; padding: 0.5rem 1rem; border: 1px solid var(--template-primary); border-radius: var(--bs-border-radius); color: var(--template-primary); font-weight: 500; text-decoration: none; }
.page-company #j2c-block-company .j2c-prose > div > p a:hover { background-color: var(--template-primary); color: var(--template-on-primary); }
.page-company #j2c-block-company blockquote { margin: 1rem 0 0; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); background-color: var(--bs-secondary-bg); font-size: var(--template-fs-sm); }
.page-company #j2c-block-company blockquote h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.page-company #j2c-block-company blockquote p { margin: 0; }
/* By the Numbers: four cards across at xl, two at md (evidence-cards). */
.page-company #j2c-block-numbers .j2c-evidence__label { display: block; }

/* --- Contact (com_contact single contact, layout contactpage) ---------------- */
.page-company #j2c-contact-form .j2c-tile .form-check-input { margin-top: 0.3rem; }
@media (min-width: 992px) {
  .page-company #j2c-block-faq .j2c-measure { max-width: none; display: grid; grid-template-columns: 1fr 2fr; column-gap: 3rem; align-items: start; }
  .page-company #j2c-block-faq .j2c-section-head { grid-row: 1 / span 2; margin-bottom: 0; }
}

/* --- Joomla User Group (article "jug": blocks only) ------------------------- */
.page-company #j2c-block-what { padding-bottom: 0; }
.page-company #j2c-block-what p.j2c-measure { margin-top: 0 !important; }
.page-company #j2c-block-what-tiles { padding-top: 1.5rem; }
/* When We Meet: prose left (5/12), details card + notice right (7/12). */
.page-company #j2c-block-when .j2c-prose { max-width: none; }
.page-company #j2c-block-when .j2c-prose > p { color: var(--bs-secondary-color); }
.page-company #j2c-block-when .j2c-prose > div { padding: clamp(1.4rem, 2.5vw, 1.9rem); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background-color: var(--template-surface); margin-bottom: 1rem; }
.page-company #j2c-block-when .j2c-prose > div > p { margin-bottom: 1rem; font-size: var(--template-fs-xs, 0.75rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.page-company #j2c-block-when dl { display: grid; grid-template-columns: 5fr 7fr; margin: 0; font-size: var(--template-fs-sm); }
.page-company #j2c-block-when dt, .page-company #j2c-block-when dd { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--bs-border-color); }
.page-company #j2c-block-when dt { font-weight: 400; color: var(--bs-secondary-color); }
.page-company #j2c-block-when dd { font-weight: 500; text-align: end; }
.page-company #j2c-block-when dt:nth-last-of-type(1), .page-company #j2c-block-when dd:last-of-type { border-bottom: 0; }
.page-company #j2c-block-when blockquote { margin: 0; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); background-color: var(--bs-secondary-bg); font-size: var(--template-fs-sm); }
.page-company #j2c-block-when blockquote h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.page-company #j2c-block-when blockquote h3::before { content: "\f05a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 0.5rem; }
.page-company #j2c-block-when blockquote p { margin: 0; }
@media (min-width: 992px) {
  .page-company #j2c-block-when .j2c-prose { display: grid; grid-template-columns: 5fr 7fr; column-gap: 3rem; align-items: start; }
  .page-company #j2c-block-when .j2c-prose > .j2c-kicker,
  .page-company #j2c-block-when .j2c-prose > h2,
  .page-company #j2c-block-when .j2c-prose > p { grid-column: 1; }
  .page-company #j2c-block-when .j2c-prose > div { grid-column: 2; grid-row: 1 / span 3; }
  .page-company #j2c-block-when .j2c-prose > blockquote { grid-column: 2; grid-row: 4; }
}
/* Stay Posted: heading + copy left (5/12), three channel tiles right (7/12). */
@media (min-width: 992px) {
  .page-company #j2c-block-join > .container { display: grid; grid-template-columns: 5fr 7fr; column-gap: 3rem; align-items: start; }
  .page-company #j2c-block-join .j2c-section-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .page-company #j2c-block-join .j2c-block-group { grid-column: 2; grid-row: 1 / span 2; }
  .page-company #j2c-block-join .row-cols-lg-4 > * { width: 33.3333%; }
  .page-company #j2c-block-join > .container > p { grid-column: 1; grid-row: 2; margin-top: 1rem !important; }
}
.page-company #j2c-block-what p.j2c-measure { font-size: var(--bs-body-font-size); }
.page-company #j2c-block-join .j2c-section-head__sub { font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); }

/* --- Style guide + typography reference pages: primitives these specimens use that template.css
   does not ship, ported verbatim from MOCKUP/assets/css/theme.css and scoped to the family. --- */
.page-company code { padding: 0.1em 0.3em; font-size: max(0.875em, var(--template-fs-xs)); border-radius: var(--bs-border-radius-sm); background-color: var(--template-primary-subtle); }

.page-company .fs-lg { font-size: 1.125rem; }
.page-company .fs-xl { font-size: 1.25rem; }
.page-company pre code, .page-company .j2c-code code { padding: 0; border-radius: 0; background-color: transparent; }
.page-company .j2c-code pre { padding: 0; background-color: transparent; border: 0; border-radius: 0; }
.page-company .blockquote { font-size: var(--template-fs-quote); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--bs-heading-color); }
.page-company .blockquote-footer { font-size: var(--template-fs-sm); color: var(--bs-secondary-color); }
.page-company .j2c-stat-value.j2c-stat-value--on-dark { color: var(--template-on-ink); }
.page-company .j2c-table-scroll { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); overflow: hidden; }
.page-company .j2c-code { position: relative; background-color: var(--template-ink-2); color: var(--template-on-ink); border-radius: var(--bs-border-radius-sm); padding: 0.9rem 3.25rem 0.9rem 1rem; font-family: var(--template-font-mono); font-size: var(--template-fs-xs); line-height: 1.5; overflow-x: auto; }
.page-company .j2c-code code { color: inherit; }
.page-company .j2c-copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; color: var(--template-on-ink); border-color: rgba(255, 255, 255, 0.25); }
.page-company .j2c-copy-btn:hover, .page-company .j2c-copy-btn:focus-visible { color: #fff; background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
.page-company .j2c-swatch { height: 4.5rem; border-radius: var(--bs-border-radius-sm); border: 1px solid var(--bs-border-color); }
.page-company .j2c-sg-sidebar { position: sticky; top: calc(var(--template-navbar-height) + 1rem); max-height: calc(100vh - var(--template-navbar-height) - 2rem); overflow-y: auto; }
.page-company .j2c-sg-demo { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-sm); padding: 1.5rem; }
.page-company .j2c-pill-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem 0.3rem 0.35rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-pill); background-color: var(--template-surface); color: var(--bs-heading-color); font-size: var(--template-fs-sm); font-weight: 500; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 9, 87, 0.06); }
.page-company .j2c-pill-link:hover, .page-company .j2c-pill-link:focus-visible { border-color: var(--template-primary); }
.page-company .j2c-pill-link i { font-size: 0.75rem; }
.page-company p.j2c-proof { max-width: 62rem; font-size: var(--template-fs-proof); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; color: var(--bs-secondary-color); }
.page-company p.j2c-proof strong { color: var(--bs-heading-color); font-weight: 600; }
.page-company .j2c-pill-link span[class*="fa-"] { font-size: 0.75rem; }

/* --- Blog post (article layout html/com_content/article/blog.php) -----------
   Ported from MOCKUP/assets/css/theme.css section 24. The post sits in the
   Blog menu item page (Main Class page-company); the sidebar-right position
   renders as aside.j2c-sidebar--right. No pseudo-element content on any
   j2c-* class: the reviews icon font targets [class^="j2c-"]:before. ------- */
@media (prefers-reduced-motion: no-preference) {
  html:has(.j2c-post) { scroll-behavior: smooth; }
}

.j2c-post__topic a { color: inherit; text-decoration: none; }
.j2c-post__topic a:hover,
.j2c-post__topic a:focus-visible { text-decoration: underline; }

.j2c-post .j2c-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding-block: 1rem;
  border-block: 1px solid var(--bs-border-color);
}
.j2c-post .j2c-byline > dd { margin: 0; }
.j2c-byline__author { display: flex; align-items: center; gap: 0.75rem; margin-right: auto !important; }
.j2c-byline__label { display: block; font-size: var(--template-fs-xs); color: var(--bs-secondary-color); }
.j2c-byline__name { display: block; font-weight: 600; color: var(--bs-heading-color); }
.j2c-byline__name a { color: inherit; }
.j2c-byline__item { font-size: var(--template-fs-sm); color: var(--bs-secondary-color); }
.j2c-byline__item a { color: inherit; }
.j2c-byline__item .fa-solid { color: var(--template-primary); }

.j2c-post__figure { margin: 2rem 0; }
.j2c-post__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--bs-border-radius-sm);
}
.j2c-post__caption {
  margin-top: 0.6rem;
  font-size: var(--template-fs-xs);
  line-height: var(--template-lh-sm);
  color: var(--bs-secondary-color);
}

/* Prose: text holds a reading measure, tables, figures and cards use the full column. */
.j2c-prose { max-width: 95ch; }
.j2c-prose img { max-width: 100%; height: auto; }
.j2c-prose > :is(p, ul, ol) { margin-bottom: 1.25rem; }
.j2c-prose > :is(ul, ol) > li { max-width: none; }
.j2c-prose > p.j2c-prose__lead { font-size: 1.25rem; line-height: 1.55; color: var(--bs-heading-color); }

.j2c-prose > h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.j2c-prose :is(h2, h3)[id] { scroll-margin-top: calc(var(--template-navbar-height) + 1.5rem); }
.j2c-prose > .j2c-table-scroll { margin-block: 2rem; }
.j2c-prose > .j2c-code { margin-block: 1.5rem; }
.j2c-post__table-caption { caption-side: top; padding: 0.75rem 0.9rem; font-size: var(--template-fs-sm); font-weight: 600; color: var(--bs-heading-color); }
@media (max-width: 1199.98px) {
  .j2c-post__table-caption { display: block; width: 100%; }
}

.j2c-pullquote { max-width: 52ch; margin: 2.25rem 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 3px solid var(--template-primary); }

.j2c-post-cta {
  margin-block: 2.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--template-surface);
}
.j2c-post-cta p { max-width: 52ch; }

.j2c-post__tags,
.j2c-post-share { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bs-border-color); }
.j2c-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.5rem; }
.j2c-post-share__status { flex-basis: 100%; min-height: 1.5em; }

.j2c-author-card {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--template-surface);
}

.j2c-post-nav { display: grid; gap: 1rem; margin-top: 2rem; }
.j2c-post-nav__link {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  color: var(--bs-heading-color);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.j2c-post-nav__link:hover,
.j2c-post-nav__link:focus-visible { border-color: var(--template-primary); color: var(--template-primary-text-emphasis); }
@media (min-width: 768px) {
  .j2c-post-nav { grid-template-columns: 1fr 1fr; }
  .j2c-post-nav__link--next { text-align: right; }
  .j2c-post-nav__link--next:only-child { grid-column: 2; }
}

.j2c-related { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* Phone-only contents panel: native details/summary, closed by default; the sidebar module takes over from lg. */
.j2c-toc-mobile {
  margin-bottom: 2rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--template-surface);
}
.j2c-toc-mobile__summary { padding: 0.9rem 1.25rem; font-weight: 700; color: var(--bs-heading-color); cursor: pointer; }
.j2c-toc-mobile__summary:focus-visible { outline: 2px solid var(--template-primary); outline-offset: 2px; border-radius: var(--bs-border-radius-lg); }
.j2c-toc-mobile > .j2c-toc__list { padding: 0 1.25rem 1rem 2.5rem; }

/* Sidebar: stacked, self-contained modules (sidebar chrome). On lg the whole column sticks; it never scrolls inside itself. */
.page-company .j2c-sidebar { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 992px) {
  .page-company .j2c-sidebar { position: sticky; top: calc(var(--template-navbar-height) + 1rem); align-self: flex-start; }
}
.j2c-module {
  flex: none;
  padding: 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--template-surface);
}
.j2c-module--promo { border-color: var(--template-ink); background-color: var(--template-ink); color: var(--template-on-ink); }
.j2c-module--promo h2 { color: #fff; }
.j2c-promo-body__text { color: var(--template-on-ink-muted); }
.j2c-module > :last-child { margin-bottom: 0; }

.j2c-toc__list { margin: 0; padding-left: 1.25rem; }
.j2c-toc__list > li { max-width: none; padding-left: 0.25rem; }
.j2c-toc__list > li::marker { font-weight: 600; color: var(--template-primary); }
.j2c-toc__link {
  display: block;
  margin-left: -0.25rem;
  padding: 0.35rem 0.5rem;
  border-left: 3px solid transparent;
  border-radius: var(--bs-border-radius-sm);
  --template-fs-ui: 0.8125rem;
  font-size: var(--template-fs-ui);
  line-height: 1.35;
  color: var(--bs-body-color);
  text-decoration: none;
}
.j2c-toc__link:hover { background-color: var(--bs-tertiary-bg); color: var(--template-primary-text-emphasis); }
.j2c-toc__link[aria-current="location"] {
  border-left-color: var(--template-primary);
  background-color: var(--template-primary-subtle);
  font-weight: 600;
  color: var(--template-primary-text-emphasis);
}

/* The sidebar is narrow: the newsletter field and its button stack instead of squeezing the placeholder. */
.j2c-sidebar .nspro-form .input-group { flex-wrap: wrap; gap: 0.5rem; }
.j2c-sidebar .nspro-form .input-group > .form-control,
.j2c-sidebar .nspro-form .input-group > .btn { flex: 1 1 100%; width: 100%; max-width: none; margin-left: 0; border-radius: var(--bs-border-radius) !important; }