/**
 * ═══════════════════════════════════════════════════════════════════
 *  PODSTRONA /wtyczka-drupal/ — page-wtyczka-drupal.php
 *
 *  Ładowany po page-joomla.css (wspólny arkusz podstron CMS 2026, korzeń .jm).
 *  Tu tylko różnice Drupala: kształt znaku (kropla), sekcja „Dwie drogi"
 *  i cennik z dwiema kartami. Korzeń strony: .sg.fz.jm.dr.
 * ═══════════════════════════════════════════════════════════════════ */

/* Znak wodny: kropla jest wyższa niż szeroka */
.dr .dr-hero__mark { width: min(40vw, 460px); right: 2%; opacity: .05; transform: translateY(-46%) rotate(-8deg); }
@media (max-width: 1024px) { .dr .dr-hero__mark { width: 60vw; right: -12%; top: 28%; } }

/* Kropla w białych polach: odrobinę mniejsza, żeby nie dotykała krawędzi */
.dr .jm-badge__svg { width: 13px; height: 16px; }
.dr .jm-lockup__svg { padding: 4px 6px; }
.dr .jm-hub__svg { width: 26px; height: 32px; }
.dr .jm-tag__svg { width: 12px; height: 15px; }
.dr .jm-plan__svg { padding: 2px 4px; }
.dr .jm-cta__svg { width: 34px; height: 44px; }
.dr .jm-info__svg { width: 22px; height: 28px; }
.dr .jm-table__svg { width: 20px; height: 24px; }

/* ═══════════════ DWIE DROGI (ciemna) ═══════════════ */
.dr .dr-ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.dr .dr-way { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-radius); background: var(--sg-surface); }
.dr .dr-way--modul {
    border-color: var(--sg-accent-line);
    background: linear-gradient(180deg, rgba(0, 212, 170, .10), rgba(0, 212, 170, .02) 45%), var(--sg-surface-2);
    box-shadow: 0 40px 80px -48px rgba(0, 212, 170, .4);
}
.dr .dr-way__top { display: flex; align-items: center; gap: 14px; }
.dr .dr-way__mark { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); }
.dr .dr-way__svg { width: 30px; height: 36px; }
.dr .dr-way__svg--wp { width: 34px; height: 34px; color: #21759b; }
.dr .dr-way__eyebrow { margin: 0 0 2px; font: 600 .75rem/1.3 var(--sg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sg-accent-text); }
.dr .dr-way h3 { margin: 0; font-family: var(--sg-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; color: var(--sg-text); }
.dr .dr-way__for { margin: 0; font-size: .9688rem; line-height: 1.6; color: var(--sg-text-2); }
.dr .dr-way__list { display: grid; gap: 10px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--sg-line); list-style: none; }
.dr .dr-way__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: .9375rem; line-height: 1.5; color: var(--sg-text); }
.dr .dr-way__list .sg-ico { margin-top: 3px; color: var(--sg-accent); }
.dr .dr-way__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.dr .dr-way__time { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--sg-text-2); }
.dr .dr-way__time .sg-ico { color: var(--sg-accent); }

.dr .dr-note { display: flex; align-items: flex-start; gap: 14px; max-width: 860px; margin: 28px auto 0; padding: 18px 22px; border: 1px solid var(--sg-line-2); border-radius: 14px; background: var(--sg-fill); }
.dr .dr-note__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--sg-accent-soft); color: var(--sg-accent); font-size: 20px; }
.dr .dr-note p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--sg-text-2); }
.dr .dr-note b { color: var(--sg-text); font-weight: 600; }
.dr .dr-note a { color: var(--sg-accent-text); font-weight: 600; }

/* ═══════════════ CENNIK: dwie karty ═══════════════ */
.dr .dr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }

@media (max-width: 1023.98px) {
    .dr .dr-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 860px) {
    .dr .dr-ways__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
    .dr .dr-way { padding: 22px; }
}