/*
 * Integration, platform and ad platform pages (templates/single-integration,
 * single-platform, single-ad-platform, integration-details, archive-platform,
 * taxonomy-plugin-cat). theme.css already styles these sections by id/class;
 * these rules cover the spots where core block markup differs from the old
 * hand-coded markup.
 *
 * Every area stylesheet loads on every page, so each rule starts with this
 * group's body classes: .single-integration, .single-platform,
 * .single-ad-platform, .cb-combo (plugin + platform pages, added in
 * inc/areas/integrations-cpt.php), .post-type-archive-platform, .tax-plugin-cat.
 */

/* Hero counts diagram with the post's logo: the logo is a Featured Image block,
   the icons are Image blocks and the labels are paragraphs (were <img> + <span>). */
:is(.single-integration, .single-platform, .single-ad-platform) .integration-counts :is(.wp-block-image, .wp-block-post-featured-image) { margin: 0; }
:is(.single-integration, .single-platform, .single-ad-platform) .integration-counts--logo img { display: block; }
:is(.single-integration, .single-platform, .single-ad-platform) .integration-counts--logo .wp-block-post-featured-image { display: flex; align-items: center; justify-content: center; max-width: 100%; }
:is(.single-integration, .single-platform, .single-ad-platform) .integration-counts--item :is(.wp-block-image, .wp-block-post-featured-image) img { vertical-align: baseline; } /* old inline <img> sat on the baseline */
:is(.single-integration, .single-platform, .single-ad-platform) .integration-counts--item > p { display: block; font-weight: 600; color: var(--accent); margin: 8px 0 0; font-size: inherit; line-height: inherit; }
:is(.single-integration, .single-platform, .single-ad-platform) p.integration-counts--separator { margin: 0; line-height: inherit; }
@media screen and (max-width: 650px) {
	:is(.single-integration, .single-platform, .single-ad-platform) .integration-counts--item :is(.wp-block-image, .wp-block-post-featured-image) img { display: block; }
}

/* "Learn more" arrow links (Paragraph style "Link with arrow"): were
   <p><a class="link-arrow">. The p kept its normal margins and size; the link
   had margin-top (.feature-row--text .link-arrow). */
:is(.single-integration, .single-platform, .single-ad-platform, .cb-combo) .feature-row--text p.is-style-link-arrow { margin: 0 0 var(--space-4); font-size: 1.125rem; line-height: 1.625; }
:is(.single-integration, .single-platform, .single-ad-platform, .cb-combo) .feature-row--text p.is-style-link-arrow a { margin-top: var(--space-2); line-height: inherit; }

/* Buttons at the end of a two-column text item: was
   ".twocol--equal .item:first-child p:last-child:has(a.button)". */
:is(.single-integration, .single-platform, .single-ad-platform, .cb-combo) .twocol--equal .item:first-child > .wp-block-buttons:last-child { margin-top: 40px; margin-bottom: 15px; }

/* Button text that wraps on phones: the old links' text sat at the left
   (core buttons center it). */
:is(.single-integration, .single-platform, .single-ad-platform, .cb-combo, .post-type-archive-platform, .tax-plugin-cat) #main .wp-block-button__link { text-align: left; }

/* Two buttons in a hero: spaced by .hero--cta's gap, like the old links. */
:is(.single-integration, .single-platform, .single-ad-platform, .cb-combo) .hero--cta .wp-block-buttons { gap: var(--space-4); }

/* Combo page logos (#combo): Image blocks, so drop the figure margins. */
.cb-combo #combo .wp-block-image { margin: 0; }
.cb-combo #combo .wp-block-image img { vertical-align: baseline; } /* old inline <img>s sat on the baseline */
.cb-combo :is(#combo--plugin, #combo--platform) > p { margin: 0; }

/* Combo "About the tools": logo was an inline <img>, buttons were two links
   in a <p> separated by a space; "Visit" was .button.small.alt (1px border). */
.cb-combo #integration-about .item > .wp-block-image { margin: 0; }
.cb-combo #integration-about .item > .wp-block-image img { vertical-align: baseline; }
.cb-combo #integration-about .item > .wp-block-buttons { gap: 0 4px; margin-bottom: 15px; } /* wrapped "Visit" button sat right under the first line */
.cb-combo #integration-about .wp-block-button.is-style-alt.small a { border: 1px solid var(--accent); }

/* Platform dashboard: the screenshot is an Image block (the class sits on the
   <figure>), and "Show full dashboard" is a Button block rendered as a real
   <button>. theme.css only styles buttons that are links, so the old
   ".button.alt2" look is repeated here for the <button>. */
.single-platform figure.platform-dashboard--image { margin-top: 0; margin-bottom: 0; }
.single-platform .wp-block-buttons.section-footer-link { margin-bottom: 15px; }
.single-platform .platform-dashboard--toggle button { font-family: "input-sans", monospace; display: inline-flex; align-items: center; gap: 10px; background-color: var(--white); border: 3px solid var(--accent-alt); color: var(--accent); font-weight: 700; border-radius: var(--radius-md); padding: 12px 35px; font-size: 16px; line-height: inherit; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.single-platform .platform-dashboard--toggle button:hover { background-color: var(--accent-alt); border-color: var(--accent-alt); color: var(--white); }

/* "See full comparison" link under the platform table: was <p class="section-footer-link"><a class="link-arrow">. */
.single-platform p.is-style-link-arrow.section-footer-link { margin: var(--space-7) 0 15px; }

/* Platforms archive: each write-up is a Query Loop item (<li>), the logo a
   Featured Image block (was an inline <img>), the excerpt a Post Excerpt block
   and the link a Button block (was <p><a class="button">). */
.post-type-archive-platform .wp-block-post-template > li { margin: 0; }
.post-type-archive-platform .platform--intro .wp-block-post-featured-image { margin: 0; }
.post-type-archive-platform .platform--intro .wp-block-post-featured-image img { vertical-align: baseline; }
.post-type-archive-platform .platform--intro .wp-block-post-excerpt__excerpt { margin-bottom: 15px; }
.post-type-archive-platform .platform--intro .wp-block-buttons { margin-bottom: 15px; }

/* Plugin category archive: header image was an inline <img>; the "Send your
   request" link sat in a <p> (".mini-cta p" line-height, p margin). */
.tax-plugin-cat figure#page-header--image--primary { margin: 0; display: inline-block; }
.tax-plugin-cat figure#page-header--image--primary img { display: block; }
.tax-plugin-cat .mini-cta .wp-block-buttons { margin-bottom: 15px; }
.tax-plugin-cat .mini-cta .wp-block-button a { line-height: 1.3; }
@media screen and (max-width: 950px) {
	.tax-plugin-cat .mini-cta .wp-block-buttons { justify-content: center; } /* the old .mini-cta centers its text here */
}


/* "Types of Conversions Tracking Events" list (patterns/integrations-cpt-event-types.php):
   was <ul><li><h3><p><ul class="checks">; each <li> is now a Group ".event-types". */
:is(.single-platform, .single-ad-platform) #platform--conversions .item > .event-types { margin: 0 0 30px 0; }
:is(.single-platform, .single-ad-platform) #platform--conversions .event-types > p { font-size: 15px; }
:is(.single-platform, .single-ad-platform) #platform--conversions .event-types > ul.checks { columns: 2; column-gap: 30px; }
:is(.single-platform, .single-ad-platform) #platform--conversions .event-types > ul.checks li { color: var(--accent); font-size: 18px; padding-top: 2px; padding-bottom: 2px; }
