/*
 * features-c: /ecommerce/, /enhanced-conversions/, /custom-events/, /server-side-tracking/.
 * Block-markup fixes on top of theme.css. Every area stylesheet loads on every
 * page, so these rules are scoped to this group's section ids (the ids also make
 * them win over the unscoped copies in features-a.css / features-b.css).
 *
 * The first block is the same set of fixes features-a/b/d have for the same old
 * pieces (reasons grid, tag grid, browser mockups, compare cards). One shared copy
 * in blocks.css would be better.
 */

/* ------------------------------------------------------------------
 * Pieces shared with other feature pages
 * ------------------------------------------------------------------ */

/* "Why it matters" icons: were inline heroicon <svg>s, now Image blocks (images/icons/). */

/* Tag grids: were <div class="ct-event-tag"><svg class="ct-event-tag--check"><span>,
   now the items of a core List (anchor ec-fields-grid / ce-triggers-grid). The check
   is li::before; assets/js/areas/features-c.js adds ct-event-tag--active one by one. */
ul:is(#ec-fields-grid, #ce-triggers-grid) { list-style: none; padding: 0; margin: 0; }
:is(#ec-fields-grid, #ce-triggers-grid) > li { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 1rem; background: var(--white); border: var(--border-soft); border-radius: var(--radius-3xl); font-size: 0.9rem; font-weight: 600; color: var(--medium); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
:is(#ec-fields-grid, #ce-triggers-grid) > li::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background-color: var(--accent-alt); -webkit-mask: url(../../../images/ui/check.svg) center / contain no-repeat; mask: url(../../../images/ui/check.svg) center / contain no-repeat; opacity: 0; transition: var(--transition-opacity); }
:is(#ec-fields-grid, #ce-triggers-grid) > li.ct-event-tag--active { opacity: 1; transform: translateY(0); border-color: var(--accent-alt); color: var(--strong); }
:is(#ec-fields-grid, #ce-triggers-grid) > li.ct-event-tag--active::before { opacity: 1; }
.editor-styles-wrapper :is(#ec-fields-grid, #ce-triggers-grid) > li { opacity: 1; transform: none; }

/* Browser mockups: the title-bar dots were <span>s (now empty Groups), the URL a <span>. */

/* Mockup rows: the label and value were <span>s, now paragraphs. */
/* Values that had inline styles: green monospace, a smaller size, or grey. */
:is(#ec-features, #ce-features, #how) .mockup-row--header > p.mockup-value { color: #43CEA2; font-family: monospace; font-size: 0.875rem; }
:is(#ec-features, #ce-features, #how) .mockup-row--header > p.mockup-value--sm { font-size: 0.8125rem; }
:is(#ec-features, #ce-features, #how) .mockup-row--header > p.mockup-value--muted { color: #9aa0a6; }

/* Compare cards: the label and the ✕ icon were <div>s (now <p>), the check icon an
   inline svg (now an empty Group with a CSS mask). */

/* ------------------------------------------------------------------
 * /ecommerce/
 * ------------------------------------------------------------------ */

/* Hero order-receipt image: core wraps it in a <figure>. */
#ecommerce .hero--demo--receipt .wp-block-image { margin: 0; }

/* "See ad platforms" link: was <a class="link-arrow">, now a Link-with-arrow paragraph. */
#ec-features .feature-row--text p.is-style-link-arrow { margin: var(--space-2) 0 0; font-size: inherit; line-height: inherit; }

/* Per-platform code cards: the head was a <div> (now <p>); the body is a core Code block.
   The old <pre> kept the browser's monospace font and an inline <code> that didn't wrap. */
#ec-features p.platform-format-card--head { margin: 0; }
#ec-features pre.platform-format-card--body { font-family: monospace; white-space: pre; }
#ec-features pre.platform-format-card--body code { display: inline; white-space: inherit; }

/* ------------------------------------------------------------------
 * /enhanced-conversions/
 * ------------------------------------------------------------------ */

/* Match-flow icons: were inline <svg>s, now Image blocks. */
#how .ec-match-flow--icon .wp-block-image { margin: 0; line-height: 0; }
#how .ec-match-flow--icon img { width: 1.375rem; height: 1.375rem; display: block; }

/* ------------------------------------------------------------------
 * /server-side-tracking/
 * ------------------------------------------------------------------ */

/* Path tags: were inline-block <span>s, now paragraphs (so undo ".ss-path p"). */
#ss-what .ss-path p.ss-path--tag { display: inline-block; font-size: 12px; color: var(--medium); line-height: 1.48; margin: 0 0 var(--space-3); }
#ss-what .ss-path p.ss-path--tag-accent { color: var(--accent); }