<?php
/**
 * Title: Blog Page Header
 * Slug: technicalistic/blog-header
 * Categories: technicalistic-coming-soon, technicalistic
 * Description: Blog page header with emerald gradient and featured image.
 */
?>
<!-- wp:group {"align":"full","className":"blog-header","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"constrained","contentSize":"80rem"}} -->
<div class="wp-block-group alignfull blog-header" style="padding-top:4rem;padding-bottom:4rem">

	<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"2rem"}}}} -->
	<div class="wp-block-columns">

		<!-- wp:column {"width":"66%"} -->
		<div class="wp-block-column" style="flex-basis:66%">

			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
			<div class="wp-block-group">

				<!-- wp:group {"className":"blog-icon-box icon-emerald","layout":{"type":"constrained"}} -->
				<div class="wp-block-group blog-icon-box icon-emerald">
					<!-- wp:paragraph -->
					<p>&#128214;</p>
					<!-- /wp:paragraph -->
				</div>
				<!-- /wp:group -->

				<!-- wp:heading {"level":1,"className":"gradient-emerald","style":{"typography":{"fontSize":"3rem","fontWeight":"700"}}} -->
				<h1 class="wp-block-heading gradient-emerald" style="font-size:3rem;font-weight:700"><?php esc_html_e( 'Blog', 'technicalistic' ); ?></h1>
				<!-- /wp:heading -->

			</div>
			<!-- /wp:group -->

			<!-- wp:paragraph {"style":{"typography":{"fontSize":"1.25rem"}},"textColor":"slate-300"} -->
			<p class="has-slate-300-color has-text-color" style="font-size:1.25rem"><?php esc_html_e( 'Thoughts, insights, and stories from the creative process.', 'technicalistic' ); ?></p>
			<!-- /wp:paragraph -->

		</div>
		<!-- /wp:column -->

		<!-- wp:column {"width":"34%","verticalAlignment":"center"} -->
		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:34%">

			<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
			<div class="wp-block-group">

				<!-- wp:image {"className":"blog-img-wrap","sizeSlug":"medium"} -->
				<figure class="wp-block-image size-medium blog-img-wrap"><img src="<?php echo esc_url( technicalistic_get_theme_image( 'technicalistic_blog_image', 'robotic-hand-quill.png' ) ); ?>" alt="<?php esc_attr_e( 'Blog header image', 'technicalistic' ); ?>"/></figure>
				<!-- /wp:image -->

				<?php if ( get_theme_mod( 'technicalistic_show_blog_subscribe', true ) ) : ?>
				<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.95rem","fontWeight":"600"}},"textColor":"emerald-400"} -->
				<p class="has-emerald-400-color has-text-color" style="font-size:0.95rem;font-weight:600"><a href="<?php echo esc_url( get_theme_mod( 'technicalistic_blog_subscribe_url', '#' ) ); ?>" style="color:inherit;text-decoration:none;"><?php esc_html_e( 'Subscribe', 'technicalistic' ); ?> &#8594;</a></p>
				<!-- /wp:paragraph -->
				<?php endif; ?>

			</div>
			<!-- /wp:group -->

		</div>
		<!-- /wp:column -->

	</div>
	<!-- /wp:columns -->

</div>
<!-- /wp:group -->
