/*
 * Features, Analytics and Ads pages (/features/, /analytics/, /ads/).
 * theme.css already has the old rules (.feature-row, .browser-chrome, .logo-grid,
 * .compare-card ...). These cover the spots where core block markup differs.
 */

/* ------------------------------------------------------------------
 * Feature rows (text + visual, alternating)
 * ------------------------------------------------------------------ */

/* "Learn more" link: was <a class="link-arrow">, now a Link-with-arrow paragraph. */
/* The old link's 8px top margin sat inside the line box, so it goes on the link, not the paragraph. */

/* Images in the visual column: core wraps them in <figure>. */
/* The old <img class="feature-row--image"> sat on the text baseline, so keep the
   <figure> plain and put the rounded corners and shadow back on the image. */

/* Two overlapping images (.image-overlay): the classes sit on the <figure>s now. */

/* ------------------------------------------------------------------
 * Faux WordPress admin window built from core Groups:
 * .browser-chrome > .browser-chrome--titlebar (.browser-chrome--dots + url paragraph)
 * The three dots were <span>s; an empty Group draws them with one dot + two shadows.
 * ------------------------------------------------------------------ */

/* An image inside the window (was a bare inline <img>). */

/* Toggle rows: the label was a <span>, now a paragraph. */

/* ------------------------------------------------------------------
 * Features page
 * ------------------------------------------------------------------ */

/* Checklist: was <div class="feature-checklist"> of divs, now a core List. */

/* Count line was a <div>; ".features-core--count-item p" now reaches it. */
.features-core--count-item p.features--count { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.48; margin-bottom: var(--space-4); }

/* Tools grid images: the class sits on the <figure> now. */

/* ------------------------------------------------------------------
 * Analytics / Ads: old way vs new way cards
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * Analytics / Ads: logo grid of platforms. The logos come from a Query Loop
 * (post type platform / ad-platform) with a linked Featured Image block that has
 * the class "logo-grid--logo". The Query Loop wrappers are "display: contents",
 * so each <figure> is a cell of the old .logo-grid. The old border rules counted
 * cells with ".logo-grid > *:nth-child()"; below they count the <li>s instead
 * (logo number n was child n + 1, after the header cell).
 * ------------------------------------------------------------------ */
.logo-grid > .wp-block-query,
.logo-grid .wp-block-post-template,
.logo-grid .wp-block-post-template > li { display: contents; }
.logo-grid .wp-block-post > figure.logo-grid--logo { margin: 0; padding: 0; min-height: 0; align-items: stretch; border-right: var(--border-soft); border-bottom: var(--border-soft); min-width: 0; }
.logo-grid figure.logo-grid--logo > a { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-3); min-height: 90px; height: auto; }
.logo-grid figure.logo-grid--logo img { width: auto; }
.logo-grid .wp-block-post:nth-child(3n) > figure,
.logo-grid .wp-block-post:last-child > figure { border-right: none; }
@media (min-width: 768px) {
	.logo-grid figure.logo-grid--logo > a { padding: var(--space-6); min-height: 0; }
	.logo-grid .wp-block-post:nth-child(3n) > figure { border-right: var(--border-soft); }
	.logo-grid--cols-5 .wp-block-post:nth-child(3) > figure,
	.logo-grid--cols-5 .wp-block-post:nth-child(6) > figure,
	.logo-grid--cols-5 .wp-block-post:nth-child(n+7):nth-child(5n+1) > figure { border-right: none; }
	.logo-grid--cols-4 .wp-block-post:nth-child(2) > figure,
	.logo-grid--cols-4 .wp-block-post:nth-child(4) > figure,
	.logo-grid--cols-4 .wp-block-post:nth-child(n+5):nth-child(4n) > figure { border-right: none; }
	.logo-grid .wp-block-post:last-child > figure { border-right: none; }
}