/* ==========================================================================
   1x1 MEDIA: /marketing-rendszer-epites oldal-specifikus kiegészítők.
   A redesign.css tokenjeire épül (--clr-*, --radius-*, --sp, --d-*).
   Csak azt tartalmazza, amit a redesign.css nem fed le: fázis-badge/checklist,
   összehasonlító táblázat, sötét kontakt-sor a záró CTA-ban.
   ========================================================================== */

/* ---------- FÁZIS-KÁRTYA KIEGÉSZÍTŐK (.rd-step-en belül) ---------- */
.rphase-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--clr-accent-deep);
    background: var(--clr-accent-soft);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 12px;
}
.rphase-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rphase-list li { font-size: 13.5px; color: var(--clr-text-muted); padding-left: 20px; position: relative; }
.rphase-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--clr-accent); font-weight: 700; }
.rphase-link { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--clr-accent-deep); text-decoration: none; }
.rphase-link:hover { text-decoration: underline; }

/* ---------- ÖSSZEHASONLÍTÓ TÁBLÁZAT (1x1 MEDIA vs hagyományos ügynökség) ---------- */
.rcmp-table {
    margin-top: 44px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--clr-surface);
    box-shadow: var(--rd-shadow);
}
.rcmp-row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; border-bottom: 1px solid var(--clr-border); }
.rcmp-row:last-child { border-bottom: none; }
.rcmp-row.head { background: var(--clr-bg); }
.rcmp-row.head .rcmp-cell { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-dim2); }
.rcmp-cell { padding: 18px 22px; font-size: 14.5px; color: var(--clr-text-muted); display: flex; align-items: center; }
.rcmp-cell.label { font-weight: 700; color: var(--clr-text); font-size: 14px; background: var(--clr-bg); }
.rcmp-cell.hl { background: var(--clr-accent-soft); color: var(--clr-text); font-weight: 600; }

@media (max-width: 760px) {
    .rcmp-row { grid-template-columns: 1fr; }
    .rcmp-row.head { display: none; }
    .rcmp-cell { padding: 10px 18px; }
    .rcmp-cell.label { padding-top: 16px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--clr-text-dim2); background: var(--clr-surface); }
    .rcmp-cell.hl { padding-bottom: 16px; }
}

/* ---------- KONTAKT-SOR A SÖTÉT ZÁRÓ CTA-BAN ---------- */
.rcontact-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin: 22px 0 0;
    font-size: 14px;
    color: var(--d-muted);
    list-style: none;
    position: relative;
}
.rcontact-row a { color: var(--d-ink); font-weight: 600; text-decoration: none; }
.rcontact-row a:hover { text-decoration: underline; }

/* A portál-mockup (régi, nem reszponzív .pm-* UI) SOSE lökje szét az oldalt:
   a wrapper lezárja a szélességet, a széles dashboard mobilon belül görgethető,
   a page-szintű vízszintes túllógás megszűnik (v10.15.20). */
.portal-mock-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A portál-widget-rács (régi .pm-* UI) kis mobilon 1 oszlop, és a belső fix-szélességű
   tartalom (oszlopdiagram) se lökje szét az oldalt (v10.15.20 mobil-overflow fix). */
@media (max-width: 620px) {
    .pm-widgets-grid { grid-template-columns: 1fr; }
    .pm-widget { min-width: 0; }
    .pm-widget * { min-width: 0; max-width: 100%; }
    .pm-barchart { overflow-x: auto; }
}