/* Column block styles (inc/block-styles.php). */

/* Framed visual: the visual side of a feature row. Whatever is in the column
   (an image, a demo, a mockup) floats as a rounded card on a soft brand glow
   with a dot grid behind it that fades out toward the edges. Hovering the
   column sends a ripple through the dots (assets/js/block-styles.js). */
.wp-block-column.is-style-framed {
	position: relative;
	isolation: isolate;
	padding: clamp(1.5rem, 4vw, 3.5rem);
}
.wp-block-column.is-style-framed::before,
.wp-block-column.is-style-framed::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}
/* The glow: mint to brand blue, strongest just behind the card. */
.wp-block-column.is-style-framed::before {
	background:
		radial-gradient(ellipse 60% 55% at 45% 35%, rgba(67, 206, 162, .30), transparent 72%),
		radial-gradient(ellipse 55% 50% at 62% 70%, rgba(24, 90, 157, .20), transparent 72%);
	filter: blur(8px);
}
/* The dot grid, faded out in a soft oval. */
.wp-block-column.is-style-framed::after {
	background: radial-gradient(rgba(60, 80, 100, .38) 1.2px, transparent 1.7px) 0 0 / 18px 18px;
	-webkit-mask: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%);
	mask: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%);
}
/* The ripple canvas sits between the dots and the card. */
.wp-block-column.is-style-framed > .cb-dots { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; pointer-events: none; }

/* The card. */
.wp-block-column.is-style-framed > :not(.image-overlay):not(.cb-dots):not(.is-style-arrow-note):not(.no-card) {
	overflow: hidden;
	border: 1px solid rgba(20, 30, 45, .07);
	border-radius: 1.5rem;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 40px 70px -30px rgba(20, 45, 70, .35), 0 12px 24px -12px rgba(20, 45, 70, .14);
}
.wp-block-column.is-style-framed > .wp-block-image img { display: block; width: 100%; height: auto; }
/* Anything marked no-card skips the card: a demo that draws its own
   windows (the compact server-side demo). */
/* A handwritten note sits just above the card, its arrow pointing down at it. */
.wp-block-column.is-style-framed > .is-style-arrow-note { margin-top: -1.5rem; margin-bottom: 1.25rem; }

/* Mockups of the plugin's admin screens (browser-chrome, mockup-row) read as
   real WordPress admin UI: the admin's own font and gray, a plain header
   instead of fake window dots, white setting rows with real-size text. */
.is-style-framed .browser-chrome { border: 0; border-radius: 0; box-shadow: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.is-style-framed .browser-chrome.wp-admin-bg { background: #f0f0f1; }
.is-style-framed .browser-chrome--titlebar { gap: .6rem; padding: .9rem 1.25rem; background: var(--wp--preset--color--base); border-bottom: 1px solid #dcdcde; }
.is-style-framed .browser-chrome--dots { display: none; }
.is-style-framed .browser-chrome--url { margin: 0; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; color: #1d2327; }
.is-style-framed .feature-mockup-demo { padding: 1.25rem; }
.is-style-framed .feature-mockup-demo > * + * { margin-top: .6rem; }
.is-style-framed .mockup-row { padding: .9rem 1.1rem; border-color: #dcdcde; border-radius: .6rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.is-style-framed .mockup-row--header > p { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #1d2327; }
.is-style-framed .mockup-toggle { width: 36px; height: 20px; }
.is-style-framed .mockup-toggle > .wp-block-group,
.is-style-framed .mockup-toggle div { width: 14px; height: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

/* A post's featured image as a framed visual (blog archive, parts/blog-list.html).
   The illustration sits inside the card with room around it. A post with no
   featured image leaves the column empty, so it's hidden and the text takes the row. */
.wp-block-column.is-style-framed > .wp-block-post-featured-image { margin: 0; }
.wp-block-column.is-style-framed > .wp-block-post-featured-image img { box-sizing: border-box; padding: 12%; }
.blog-row > .wp-block-column.is-style-framed { padding: clamp(1rem, 2.5vw, 2rem); }
.blog-row > .wp-block-column.is-style-framed:not(:has(img)) { display: none; }