/* Text + Image Block - frontend
 *
 * INTENTIONALLY (almost) EMPTY.
 *
 * This module outputs the markup and CSS classes of the TimeWriter template
 * itself (section-wrapper, section-boxed, grid-container, grid-x, cell,
 * section-content, section-intro, section-title, section-lead, section-footer,
 * button, radius-medium, bg-primary-*, border-primary-*, c-primary-* ...).
 * All styling therefore comes from the template stylesheets, which guarantees
 * a pixel-perfect match with the original design.
 *
 * Do not add a module-specific design system here - if something needs
 * restyling, do it in the template CSS or via the "extra CSS class" field.
 */

/* Tiny defensive helper only: keep the image from overflowing its cell in
   contexts where the template's own image rules are not loaded. */
.section-wrapper .section-content + .cell img,
.section-wrapper figure img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * The "boxed" variant (settings.boxed = 1) renders <section class="section-
 * wrapper section-boxed"> as the outermost element, with no .grid-container
 * around it. .section-boxed has its own width/centering math (see the
 * template's css/sections.css) that is NOT tied to the same breakpoints as
 * the template's real .grid-container - so on some widths its text ended up
 * a little left or right of where the same text sits in every other section
 * on the page.
 *
 * view.php now wraps a boxed section in the template's own .grid-container
 * class (plus this module's own "tw-boxed-wrap" marker, so this rule can't
 * accidentally affect any other use of .section-boxed on the site). Once
 * .section-boxed sits inside a real .grid-container, the template's existing
 * ".grid-container .section-boxed { max-width: 100% }" rule (sections.css)
 * takes over and makes section-boxed simply fill that correctly-tiered
 * container - so all that's left to add here is the same 35px/15px
 * "ademruimte" every other section heading gets. The card's own border and
 * background still follow section-boxed's own width, not the kantlijn - only
 * the text moves.
 * ------------------------------------------------------------------------ */
.tw-boxed-wrap.grid-container > .section-boxed {
	padding-left: 35px;
	padding-right: 35px;
}
@media (max-width: 1023px) {
	.tw-boxed-wrap.grid-container > .section-boxed {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* v1.0.10: de afbeelding zit in een <picture> (WebP-srcset, zie
 * view.php/functions.php). display:contents laat die wrapper geen eigen box
 * maken, zodat de <img> met class radius-medium in het template exact dezelfde
 * positie houdt als toen hij nog los in figure > .is-relative stond. */
section[id^="textimageblock-"] figure > .is-relative > picture { display: contents; }