/*
 * Area: features-b (/conversion-tracking/, /conversion-journeys/, /utm-tracking/).
 * Block-markup fixes on top of theme.css. Old divs/spans became Groups and
 * Paragraphs, and inline SVG icons became Image blocks; these rules make the
 * block markup look like the old hand-coded markup.
 */

/* ------------------------------------------------------------------
 * Shared-looking pieces (also used by other feature pages; could move to blocks.css)
 * ------------------------------------------------------------------ */

/* Icon boxes: the icon was an inline <svg>, now an Image block in a <figure>. */

/* The old .button was inline, so its margin-top added to the paragraph margin above. */
.ct-why--text .wp-block-buttons { padding-top: var(--space-4); }

/* Count cells: the count was a <div>, now a <p>, so undo ".features-core--count-item p". */
#features-core--counts p.features--count { font-size: clamp(2.25rem, 4vw, 3rem); font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.07em; line-height: 1.48; margin-bottom: var(--space-4); }
#features-core--counts p.is-style-arrow-link { font-size: 0; line-height: 1.48; margin-bottom: 0; }

/* Browser-chrome mockups: the three title-bar dots were <span>s, now empty Groups;
   the URL was a <span>, now a <p>. */

/* Feature rows: the "Learn more" arrow link was an <a class="link-arrow">. */
/* .feature-row--text p.is-style-link-arrow: handled in features-a.css (one shared rule). */
/* The old <img> was the visual's direct child, sitting on the text baseline: the
   rounded corners + shadow belong on the img, the figure is just a wrapper. */

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

/* ------------------------------------------------------------------
 * /conversion-tracking/
 * ------------------------------------------------------------------ */

/* Event tags: were <div class="ct-event-tag"><svg class="ct-event-tag--check"><span>,
   now the items of a List (anchor ct-events-grid). The check is li::before.
   assets/js/areas/features-b.js adds ct-event-tag--active one by one. */
ul.ct-why--events { list-style: none; padding: 0; margin: 0; }
.ct-why--events > 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; }
.ct-why--events > 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); }
.ct-why--events > li.ct-event-tag--active { opacity: 1; transform: translateY(0); border-color: var(--accent-alt); color: var(--strong); }
.ct-why--events > li.ct-event-tag--active::before { opacity: 1; }
.editor-styles-wrapper .ct-why--events > li { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
 * /conversion-journeys/
 * ------------------------------------------------------------------ */

/* Plugin tabs: the labels are Paragraphs (JS swaps them for <button>s); the
   screenshots are Image blocks with the class journeys-tabs--panel. */
.journeys-tabs--nav > p.journeys-tabs--btn { margin: 0 0 -1px; text-align: center; line-height: normal; }
figure.journeys-tabs--panel { margin: 0; }
.editor-styles-wrapper .journeys-tabs--panel:not(.active) { display: none; }

/* ------------------------------------------------------------------
 * /utm-tracking/
 * ------------------------------------------------------------------ */

/* Static journey panel + admin mockups: old <div>/<span> lines are now <p>s. */
.journey-panel--header p,
.utm-journey--events p,
.feature-mockup-demo p { margin-bottom: 0; line-height: 1.48; }
.feature-mockup-demo p.utm-mockup-heading { margin-bottom: 0.4rem; }
.utm-flow--params > p.utm-flow--params-row { margin: 0; }
.journey-panel--header-title .wp-block-image { margin: 0; line-height: 0; }
.journey-panel--header-title img { width: 14px; height: 14px; }
.journey-panel--header-title > p { font-size: 12px; font-weight: 600; color: var(--white); }
.journey-panel--header > p.journey-panel--close { color: rgba(255,255,255,0.5); font-size: 14px; }

/* Arrow between the journey and the entry: was an inline draw-arrow <svg>
   that drew itself when scrolled into view; JS adds .animated. */
.utm-journey--arrow .wp-block-image { margin: 0; }
.utm-journey--arrow img { width: 90px; height: auto; display: block; clip-path: inset(0 100% 0 0); transition: clip-path 1.5s ease; }
.utm-journey--arrow.animated img,
.editor-styles-wrapper .utm-journey--arrow img { clip-path: inset(0); }
@media (max-width: 900px) {
	.utm-journey--arrow img { transform: rotate(90deg); width: 56px; margin: 0 auto; }
}