/**
 * ═══════════════════════════════════════════════════════════════════
 *  PODSTRONA /wtyczka-joomla/ — page-wtyczka-joomla.php
 *
 *  Ładowany po glowna-2026.css (system strony głównej 2026). Tu tylko to,
 *  czego nie ma na głównej: znak Joomli (hero, schemat, sekcje, cennik),
 *  sekcja „Joomla od środka", tabela porównania i drobne różnice.
 *  Korzeń strony: .sg.fz.jm. Barwy Joomli wyłącznie w logotypie.
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════ HERO ═══════════════ */
/* Znak wodny: duży, jednokolorowy logotyp za treścią (jak w poprzedniej wersji strony) */
.jm .jm-hero__mark {
    position: absolute; z-index: 1; right: -7%; top: 50%;
    width: min(64vw, 780px); height: auto;
    color: #fff; opacity: .045;
    transform: translateY(-46%) rotate(-10deg);
    pointer-events: none;
}

.jm .jm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .8rem; color: #8892a8; }
.jm .jm-crumbs a { color: #cfd6e4; text-decoration: none; }
.jm .jm-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.jm .jm-badge { padding-left: 7px; }
.jm .jm-badge__logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.jm .jm-badge__svg { width: 16px; height: 16px; }

/* Plakietka „Joomla! + DeweloperCeny.pl" na górnej krawędzi karty budynku, po prawej (lewą zajmuje dymek) */
.jm .jm-hero__visual { padding-top: 34px; }
.jm .jm-lockup {
    position: absolute; z-index: 6; top: 0; right: 18px;
    display: flex; align-items: center; gap: 12px; white-space: nowrap;
    padding: 9px 16px 9px 10px; border-radius: 14px;
    background: rgba(14, 21, 36, .92); border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8), 0 0 0 5px rgba(0, 212, 170, .05);
    backdrop-filter: blur(10px);
}
.jm .jm-lockup__joomla { display: flex; align-items: center; gap: 8px; }
.jm .jm-lockup__joomla b { font-family: "Outfit", system-ui, sans-serif; font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.jm .jm-lockup__svg { width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: #fff; }
.jm .jm-lockup__plus { font-weight: 700; color: var(--ng-teal); }
.jm .jm-lockup__dc { display: block; height: 20px; width: auto; }
/* Dymek 1 (lewy górny róg) zostaje nad kartą, obok plakietki */
.jm .ng-drift--1 { top: 8px; }

/* ═══════════════ ATUTY: ikony z zestawu strony zamiast emoji ═══════════════ */
.jm .jm-usp__icon { font-size: 1.45rem; color: var(--ng-teal-dark); }

/* ═══════════════ „JAK DZIAŁA": znak Joomli nad logo wtyczki ═══════════════ */
.jm .jm-hub__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }
.jm .jm-hub__svg { width: 32px; height: 32px; }

/* ═══════════════ ETYKIETA SEKCJI ZE ZNAKIEM ═══════════════ */
.jm .jm-tag::before { display: none; }
.jm .jm-tag { padding-left: 6px; }
.jm .jm-tag__logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.jm .jm-tag__svg { width: 15px; height: 15px; }

/* ═══════════════ JOOMLA OD ŚRODKA (ciemna) ═══════════════ */
.jm .jm-panel { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 44px; }
.jm .jm-browser { border-radius: 16px; }
.jm .jm-panel__side { padding: 24px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-radius); background: var(--sg-surface); }
.jm .jm-panel__label { margin: 0 0 14px; font: 600 .75rem/1.3 var(--sg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sg-text-3); }
.jm .jm-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.jm .jm-pages li { display: flex; align-items: center; gap: 8px; font-size: .9063rem; color: var(--sg-text); }
.jm .jm-pages .sg-ico { color: var(--sg-accent); }
.jm .jm-panel__note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--sg-line); font-size: .875rem; line-height: 1.55; color: var(--sg-text-2); }
.jm .jm-panel__note b { color: var(--sg-text); font-weight: 600; }

.jm .jm-sub { margin: 72px 0 24px; text-align: center; font-family: var(--sg-display); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 600; letter-spacing: -.02em; color: var(--sg-text); }

.jm .jm-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jm .jm-way { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-radius); background: var(--sg-surface); }
.jm .jm-way__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sg-accent-soft); color: var(--sg-accent); font-size: 22px; }
.jm .jm-way h4 { margin: 0; font-family: var(--sg-display); font-size: 1.125rem; font-weight: 600; color: var(--sg-text); }
.jm .jm-way__code { align-self: flex-start; max-width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--sg-accent-line); background: var(--sg-accent-soft); font: 500 .8125rem/1.4 var(--sg-mono); color: var(--sg-accent-text); overflow-wrap: anywhere; }
.jm .jm-way p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--sg-text-2); }

.jm .jm-report { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 72px; }
.jm .jm-report__shot { margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--sg-line-2); background: #f0f0f0; cursor: zoom-in; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); transition: transform .3s var(--sg-ease-out), border-color .3s; }
.jm .jm-report__shot img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) { .jm .jm-report__shot:hover { transform: translateY(-3px); border-color: var(--sg-accent-line); } }
.jm .jm-report__text h3 { margin: 0 0 12px; font-family: var(--sg-display); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 600; letter-spacing: -.02em; color: var(--sg-text); }
.jm .jm-report__text p { margin: 0 0 14px; font-size: .9688rem; line-height: 1.65; color: var(--sg-text-2); }
.jm .jm-urls { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.jm .jm-urls li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--sg-line-2); background: var(--sg-fill); }
.jm .jm-urls span { font: 600 .75rem/1 var(--sg-mono); letter-spacing: .06em; color: var(--sg-accent-text); }
.jm .jm-urls code { font: 500 .8438rem/1.4 var(--sg-mono); color: var(--sg-text); overflow-wrap: anywhere; }

/* ═══════════════ PORÓWNANIE (jasna) ═══════════════ */
.jm .jm-compare { overflow-x: auto; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px -24px rgba(15, 23, 42, .22); -webkit-overflow-scrolling: touch; }
.jm .jm-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9375rem; }
.jm .jm-table th, .jm .jm-table td { padding: 15px 18px; border-bottom: 1px solid #e8edf5; text-align: center; vertical-align: middle; }
.jm .jm-table tbody tr:last-child th, .jm .jm-table tbody tr:last-child td { border-bottom: 0; }
.jm .jm-table thead th { padding-top: 22px; font-family: "Outfit", system-ui, sans-serif; font-size: 1rem; font-weight: 700; color: var(--ng-ink); line-height: 1.3; }
.jm .jm-table tbody th { text-align: left; font-weight: 600; color: var(--ng-ink); }
.jm .jm-table td { color: var(--ng-ink-2); }
.jm .jm-table .is-pick { background: rgba(0, 212, 170, .07); }
.jm .jm-table thead .is-pick { box-shadow: inset 0 3px 0 var(--ng-teal); }
.jm .jm-table tbody td.is-pick { color: var(--ng-ink); font-weight: 600; }
.jm .jm-table__logo { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e8edf5; }
.jm .jm-table__svg { width: 24px; height: 24px; }
.jm .jm-table__logo--wp { color: #21759b; }
.jm .jm-yes { display: inline-grid; place-items: center; font-size: 1.35rem; color: var(--ng-teal-dark); }
.jm .jm-no { display: inline-grid; place-items: center; font-size: 1.2rem; color: #b8c0cf; }
.jm .jm-compare__hint { display: none; }
@media (max-width: 768px) {
    /* Na telefonie tabela przewija się w bok: nazwa cechy zostaje przyklejona z lewej */
    .jm .jm-table { min-width: 620px; font-size: .875rem; }
    .jm .jm-table th, .jm .jm-table td { padding: 12px 12px; }
    .jm .jm-table tbody th, .jm .jm-table thead th:first-child { position: sticky; left: 0; z-index: 1; width: 130px; background: #fff; box-shadow: 1px 0 0 #e8edf5; }
    .jm .jm-compare__hint { display: block; margin: 0 0 10px; text-align: right; font-size: .8125rem; font-weight: 600; color: var(--ng-teal-dark); }
}
.jm .jm-compare__foot { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: .95rem; line-height: 1.65; color: var(--ng-ink-2); }
.jm .jm-compare__foot a { color: var(--ng-teal-dark); font-weight: 700; }

/* ═══════════════ PODGLĄD: wysoki zrzut artykułu przycięty do góry ═══════════════ */
.jm .jm-view--front .ng-browser__screen { max-height: 560px; overflow: hidden; }
.jm .jm-view--front .ng-browser__screen::before {
    content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(180deg, rgba(18, 23, 42, 0), rgba(18, 23, 42, .85)); pointer-events: none;
}
.jm .jm-view--front .ng-demo__side img { background: #fff; }

/* ═══════════════ CENNIK WDROŻEŃ (ciemna) ═══════════════ */
.jm .jm-plans { margin-top: 44px; }
.jm .jm-plan__badge { display: inline-flex; align-items: center; gap: 6px; padding-left: 5px; }
.jm .jm-plan__svg { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: #fff; }
.jm .jm-pricing .sg-price__val--txt { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.35rem); }
/* Nazwy pakietów w jednej wysokości, żeby ceny i przyciski stały w jednej linii */
@media (min-width: 1024px) { .jm .jm-pricing .sg-plan__top { min-height: 58px; align-items: flex-start; } }

.jm .jm-pricing .sg-pricing__foot a { color: var(--sg-accent-text); font-weight: 600; }

/* ═══════════════ CTA I KONTAKT ═══════════════ */
.jm .jm-cta__logo { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7); }
.jm .jm-cta__svg { width: 42px; height: 42px; }
.jm .jm-info__logo { background: #fff; box-shadow: 0 0 0 1px #e8edf5; }
.jm .jm-info__svg { width: 28px; height: 28px; }
.jm .ng-faq__a code { padding: 2px 6px; border-radius: 6px; background: rgba(0, 212, 170, .1); font-family: var(--ng-mono); font-size: .88em; color: var(--ng-ink); }

/* ═══════════════ TABLET I TELEFON ═══════════════ */
@media (max-width: 1024px) {
    .jm .jm-hero__mark { width: 90vw; right: -30%; top: 30%; opacity: .035; }
    .jm .jm-panel, .jm .jm-report { grid-template-columns: minmax(0, 1fr); }
    .jm .jm-report { gap: 28px; }
}
@media (max-width: 900px) {
    .jm .jm-ways { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 768px) {
    .jm .jm-hero__visual { padding-top: 30px; }
    .jm .jm-lockup { gap: 9px; padding: 7px 12px 7px 8px; }
    .jm .jm-lockup__svg { width: 24px; height: 24px; }
    .jm .jm-lockup__dc { height: 16px; }
    .jm .jm-sub, .jm .jm-report { margin-top: 52px; }
    .jm .jm-pages { grid-template-columns: minmax(0, 1fr); }
    .jm .jm-view--front .ng-browser__screen { max-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
    .jm .jm-report__shot { transition: none; }
}