/* PropertyAdverts Marketing: the Social (Facebook groups) pages. Classes start pm-; colours and spacing from the V3 tokens. */

/* Tabs and filters are links, lit by aria-current. */
.pm-social a.v3-state { text-decoration: none; min-height: 40px; }
.pm-social a.v3-state[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pm-social a.v3-state[aria-current] b { color: rgb(255 255 255 / 0.72); }
.pm-social__states { padding: 8px 16px 0; border-bottom: 1px solid var(--line); }
.pm-social__states .v3-states__strip { margin-inline: -6px; padding: 5px 6px 11px; }

/* The page head's button drops under the text on a phone; panel heads get a line under the title and room to wrap. */
.pm-social .v3-pagehead > .v3-grow { flex: 1 1 320px; }
.pm-social .v3-layout { align-items: start; }
.pm-social .v3-layout > * { min-width: 0; }
.pm-social .v3-panel__head { flex-wrap: wrap; }
.pm-social .v3-panel__head > .v3-grow { flex: 1 1 180px; }
.pm-social .v3-panel__head .v3-subtle { margin: 1px 0 0; }
.pm-social .v3-panel__head form { margin: 0; }
.pm-social .v3-row form { margin: 0; flex: none; }
.pm-social .v3-row--link { flex-wrap: nowrap; }
.pm-social .v3-row--link .v3-grow { flex: 1 1 auto; }
.pm-social__down { color: var(--crit); font-weight: 600; }
.pm-social__wide { flex-basis: 100%; grid-column: 1 / -1; margin: 0; }
.pm-social__fields { grid-column: 1 / -1; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin: 0; padding: 0; border: 0; min-width: 0; }
.pm-social .v3-field select:disabled, .pm-social .v3-field textarea:disabled { background: var(--card-soft); color: var(--muted); }
.pm-social__pager { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); }

/* Setting up the watcher, step by step. */
.pm-social__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: pm-step; font-size: 14px; }
.pm-social__steps li { position: relative; padding-left: 36px; min-height: 26px; overflow-wrap: anywhere; counter-increment: pm-step; }
.pm-social__steps li::before {
    content: counter(pm-step); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--navy-soft); color: var(--muted);
}
.pm-social__steps code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; background: var(--navy-soft); padding: 1px 5px; border-radius: 5px; }

/* A group post the watch found, with its reply. */
.pm-sightings > .pm-sighting + .pm-sighting { border-top: 1px solid var(--line); }
.pm-sighting { display: grid; gap: 10px; padding: 14px 16px; min-width: 0; }
.pm-sighting__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-start; }
.pm-sighting__head strong { display: block; font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.pm-sighting__head small { display: block; font-size: 12.5px; color: var(--muted); }
.pm-sighting__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-sighting__body { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line-strong); background: var(--card-soft); border-radius: 0 10px 10px 0; font-size: 14.5px; overflow-wrap: anywhere; }
.pm-sighting[data-strength="strong"] .pm-sighting__body { border-left-color: var(--ok); }
.pm-sighting[data-strength="competitor"] .pm-sighting__body { border-left-color: var(--warn); }

/* A Facebook group: watching, and posting our adverts there. */
.pm-group.is-off strong { color: var(--muted); }
.pm-group__posting { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 0 16px 14px; }
.pm-group__form { display: contents; }
.pm-group__form .pt-input { flex: 0 1 230px; }
.pm-group__posting > form:not(.pm-group__form) { margin: 0; }

/* The words a site watches for. */
.pm-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pm-word { display: inline-flex; max-width: 100%; gap: 2px; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 2px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-soft); font-size: 14px; min-width: 0; }
.pm-word span { min-width: 0; overflow-wrap: anywhere; }
.pm-word form { margin: 0; flex: none; }
.pm-word .v3-iconbtn { width: 40px; height: 40px; border: 0; background: none; border-radius: 9px; }

/* The advert library. */
.pm-adverts { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.pm-advert { display: grid; align-content: start; min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.pm-advert.is-off { background: var(--card-soft); }
.pm-advert.is-off img { opacity: 0.55; }
.pm-advert__picture { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--card-soft); border-bottom: 1px solid var(--line); }
.pm-advert__picture img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.pm-advert__picture .pt-muted { display: inline-flex; gap: 6px; align-items: center; }
.pm-advert__picture--large { max-width: 420px; width: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pm-advert__copy { display: grid; gap: 4px; padding: 12px 14px 14px; min-width: 0; }
.pm-advert__copy strong { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.pm-advert__copy p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.pm-advert__copy small { font-size: 12.5px; color: var(--muted); }
.pm-advert > .pt-actions { padding: 0 14px 14px; }

/* Touch targets on phones. */
@media (max-width: 899px) {
    .pm-social .v3-btn--sm, .pm-social .v3-chip, .pm-social a.v3-state, .pm-social .v3-toggle { min-height: 44px; }
    .pm-word .v3-iconbtn { width: 44px; height: 44px; }
}