/* =============================================================================
 * Component Supply — the blog's chart pages
 *
 * SOW §2.2, "Blog and posts": "the index, five blog sub-pages, and the
 * single-post template". The five sub-pages (drill sizes, feet per pound,
 * French catheter, PTFE chemical resistance, tensile strength) are Elementor
 * pages under the Blog page: a full-width banner with the title, a section with
 * a heading, text and a photo panel (or the photo alone), then the chart's PDF
 * in an HTML widget. They got their download links in #248 but not the system
 * (HP-086, the 8 Oct QA sweep):
 *
 *   - every section sat in a 1280px band with a 10px gutter, built against the
 *     old header; the header's band is 1200px with a 20 / 32 / 16px gutter;
 *   - the photo had 15px corners and a 20px offset shadow in the old heading
 *     blue (#1F547B), in a panel with 20px corners.
 *
 * Carry-through, as csc-custom-fab.css: each page keeps its build; the band
 * and the corners change, nothing else. The banner title is an H2 in its
 * build; it becomes the page's H1 in the editor (HP-088), not here.
 *
 * HOW IT WINS: each page's compiled CSS is (0,3,0) to (0,3,1); these rules are
 * (0,4,1) and up, scoped to the class IFE_SO_Assets::enqueue_blog_charts()
 * adds to <body> on these pages only. No !important, no element or post IDs.
 * Tokens are literal (csc-shared.css scopes them to .csc-widget).
 * ========================================================================== */


/* --- 1. The band ----------------------------------------------------------
 * The header's band and gutter; a section built narrower keeps its width. */

body.csc-chart-page .elementor[data-elementor-type="wp-page"] > .e-con {
	--padding-left:  20px;                       /* --csc-gutter */
	--padding-right: 20px;
}

body.csc-chart-page .elementor[data-elementor-type="wp-page"] > .e-con > .e-con-inner {
	max-width: min(var(--content-width), 1200px); /* --csc-band */
}


/* --- 2. The photo -------------------------------------------------------------
 * Square-cornered, no offset shadow, as every surface in the system. */

body.csc-chart-page .elementor[data-elementor-type="wp-page"] > .e-con > .e-con-inner > .e-con {
	--border-radius: 2px;                        /* --csc-radius */
}

body.csc-chart-page .elementor[data-elementor-type="wp-page"] .elementor-widget-image img {
	border-radius: 2px;
	box-shadow:    none;
}


/* --- 3. Tablet and phone ---------------------------------------------------- */

@media (max-width: 1024px) {
	body.csc-chart-page .elementor[data-elementor-type="wp-page"] > .e-con {
		--padding-left:  32px;
		--padding-right: 32px;
	}
}

@media (max-width: 767px) {
	body.csc-chart-page .elementor[data-elementor-type="wp-page"] > .e-con {
		--padding-left:  16px;
		--padding-right: 16px;
	}
}