/* Intro Block - frontend
 *
 * INTENTIONALLY (almost) EMPTY.
 *
 * This module outputs the markup and CSS classes of the TimeWriter template
 * itself (.textblock / .textblock-intro / .textblock-title / .textblock-lead
 * / .textblock-content, css/content.css) - the same classes the static
 * design demo already used for this kind of page heading + body text. 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.
 */

/* Geen eigen titelopmaak meer (v1.0.6). De titel is een kale <h1> en wordt
 * volledig door het template opgemaakt (css/basics.css voor grootte en
 * gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
 * blok er exact hetzelfde uit als een kop uit elke andere module of uit de
 * editor - de eerdere .tw-title-line2-regel en de vijf titelgroottes gaven
 * dit blok een eigen kopopmaak, en juist dat verschil was het probleem.
 * Wil je de kopopmaak wijzigen, doe dat in het template.
 */

/* Extra ruimte tussen de leadtekst en de WYSIWYG-hoofdtekst erna - specifiek
 * gevraagd voor dit blok. Scoped op "article[id^='introblock-'] .textblock-
 * lead" (een afstammeling van dit blok's eigen root-element, zie view.php)
 * in plaats van kaal op .textblock-lead: die class wordt elders in het
 * template ook hergebruikt (bv. in de FAQ-accordion-antwoorden van de
 * statische demo) en deze regel mag daar niet in doorlekken. Een
 * afstammeling-selector (spatie), geen kind-selector (>): staat er een
 * afbeelding bij dit blok, dan zit .textblock-lead een niveau dieper, in de
 * tekst-cel van het grid hieronder.
 *
 * De leadtekst van dit blok komt uit een gewoon <textarea>-veld (geen
 * WYSIWYG), dus meestal zonder eigen <p>-tag om de tekst heen - alleen
 * platte tekst in de .textblock-lead <span>. margin-bottom heeft dan geen
 * effect op een inline element (de CSS-spec negeert verticale marges op
 * inline, niet-vervangen elementen), dus display:block wordt hier expliciet
 * gezet om de marge betrouwbaar te laten werken, ook als een beheerder zelf
 * wel <p>-tags typt.
 */
article[id^="introblock-"] .textblock-lead {
	display: block;
	margin-bottom: 30px;
}

/* Tekst+afbeelding-lay-out (alleen aanwezig als er een afbeelding is
 * ingesteld, zie view.php) - in plaats van een float. Een float wikkelt
 * tekst alleen zolang de afbeelding zelf hoog genoeg is; loopt de tekst
 * langer door dan de afbeelding hoog is, dan valt de rest gewoon weer terug
 * op volle breedte.
 *
 * v1.0.5: eigen, kleine flex-lay-out (.ib-media/.ib-media-text/.ib-media-
 * cell) in plaats van Foundation's .grid-x/.cell/.large-N-grid. Die grid was
 * bedoeld voor een afbeelding die een percentage van de tekstkolom inneemt
 * (image_size 25/33/50/75/100%); nu de afbeelding een vaste pixelmaat heeft
 * (image_width/image_height, standaard 200x200 - zie view.php) hoort de
 * afbeelding een vaste doos te blijven, niet een breedte die meebeweegt met
 * hoeveel tekst ernaast staat. Onder de small-drempel (40em) staan tekst en afbeelding onder elkaar.
 * Vanaf 40em staat de afbeelding daadwerkelijk naast de tekst, zodat de
 * instelling links/rechts ook op normale laptop- en tabletbreedtes werkt.
 */
article[id^="introblock-"] .ib-media-text,
article[id^="introblock-"] .ib-media-cell {
	display: block;
}

article[id^="introblock-"] .ib-media-cell {
	padding-top: 10px;
	padding-bottom: 10px;
}

article[id^="introblock-"] .ib-image {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (min-width: 40em) {
	article[id^="introblock-"] .ib-media {
		display: flex;
		align-items: center;
		gap: 2rem;
	}

	article[id^="introblock-"] .ib-media-text {
		flex: 1 1 0%;
		min-width: 0;
	}

	article[id^="introblock-"] .ib-media-cell {
		flex: 0 0 auto;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* image_side = left: text stays first in the source (see view.php), only
	 * reordered visually here, from this breakpoint up. */
	article[id^="introblock-"] .ib-media--left .ib-media-cell {
		order: -1;
	}
}

/* v1.0.5: op een telefoon is deze afbeelding vrijwel altijd puur decoratief
 * (aankleding, geen informatiewaarde) en kost hij alleen scrollruimte boven
 * de tekst waar de bezoeker voor kwam - expliciet gevraagd. Alleen onder
 * Foundation's "small"-bovengrens (639px / 39.9375em): een tablet in de
 * gestapelde weergave krijgt de afbeelding nog gewoon te zien.
 */
@media (max-width: 39.9375em) {
	article[id^="introblock-"] .ib-media-cell {
		display: none;
	}
}