/*
Theme Name: First Look Studio – Blocksy Child
Theme URI: https://firstlookstudio.shop/
Description: First Look Studio customisations for the Blocksy parent theme.
Author: First Look Studio
Template: blocksy
Version: 1.0.0
Text Domain: firstlookstudio-blocksy-child
*/

/*
 * Homepage mobile layout
 *
 * These rules are deliberately limited to small screens. Desktop keeps the
 * Blocksy layout and all existing page-builder settings unchanged.
 */
@media (max-width: 689.98px) {
	/* Keep all homepage sections inside the viewport, including builder blocks
	 * that currently have a desktop pixel width or horizontal margins. */
	body:is(.home, .front-page),
	body:is(.home, .front-page) #main,
	body:is(.home, .front-page) .site-main,
	body:is(.home, .front-page) .entry-content,
	body:is(.home, .front-page) .ct-container,
	body:is(.home, .front-page) .wp-block-group,
	body:is(.home, .front-page) .wp-block-cover,
	body:is(.home, .front-page) .wp-block-columns,
	body:is(.home, .front-page) .elementor-section,
	body:is(.home, .front-page) .elementor-container,
	body:is(.home, .front-page) .elementor-column,
	body:is(.home, .front-page) .elementor-widget-wrap,
	body:is(.home, .front-page) .elementor-widget-container,
	body:is(.home, .front-page) .fl-builder-content,
	body:is(.home, .front-page) .fl-row-content,
	body:is(.home, .front-page) .fl-col-content {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Images, video embeds, and other media must scale with their card/section. */
	body:is(.home, .front-page) img,
	body:is(.home, .front-page) picture,
	body:is(.home, .front-page) video,
	body:is(.home, .front-page) iframe,
	body:is(.home, .front-page) .wp-block-embed,
	body:is(.home, .front-page) .wp-block-image,
	body:is(.home, .front-page) .elementor-widget-video {
		max-width: 100%;
	}

	body:is(.home, .front-page) img,
	body:is(.home, .front-page) video,
	body:is(.home, .front-page) iframe {
		height: auto;
	}

	/* Remove horizontal overflow caused by fixed-width page-builder widgets. */
	body:is(.home, .front-page) .entry-content > *,
	body:is(.home, .front-page) .elementor-widget-container,
	body:is(.home, .front-page) .fl-module-content {
		max-inline-size: 100%;
		margin-inline: auto;
	}

	/* Columns become a single, readable flow on phones. */
	body:is(.home, .front-page) .wp-block-columns,
	body:is(.home, .front-page) .elementor-container,
	body:is(.home, .front-page) .fl-row-content-wrap .fl-row-content {
		gap: 1rem;
	}

	body:is(.home, .front-page) .wp-block-column,
	body:is(.home, .front-page) .elementor-column,
	body:is(.home, .front-page) .fl-col {
		min-width: 0;
		width: 100%;
	}

	/* Product and category cards: two balanced cards per row, no fixed card width. */
	body:is(.home, .front-page) .woocommerce ul.products,
	body:is(.home, .front-page) ul.products,
	body:is(.home, .front-page) .wc-block-product-categories-list,
	body:is(.home, .front-page) .wp-block-woocommerce-product-categories ul,
	body:is(.home, .front-page) .product-categories {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		padding-inline: 0;
	}

	body:is(.home, .front-page) .woocommerce ul.products li.product,
	body:is(.home, .front-page) ul.products li.product,
	body:is(.home, .front-page) .wc-block-product-categories-list > li,
	body:is(.home, .front-page) .wp-block-woocommerce-product-categories li,
	body:is(.home, .front-page) .product-categories > li {
		min-width: 0;
		width: auto;
		margin: 0;
	}

	body:is(.home, .front-page) .woocommerce ul.products li.product img,
	body:is(.home, .front-page) ul.products li.product img,
	body:is(.home, .front-page) .wc-block-product-categories-list img,
	body:is(.home, .front-page) .product-categories img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	/* Assign one of these classes to the homepage CTA in the editor:
	 * customize-now-button, customise-now-button, customize-now, or
	 * customise-now. The CTA becomes easy to tap without affecting desktop. */
	body:is(.home, .front-page) .customize-now-button,
	body:is(.home, .front-page) .customise-now-button,
	body:is(.home, .front-page) .customize-now,
	body:is(.home, .front-page) .customise-now,
	body:is(.home, .front-page) .cta-customize-now,
	body:is(.home, .front-page) .wp-block-button__link,
	body:is(.home, .front-page) .elementor-button,
	body:is(.home, .front-page) .fl-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-height: 44px;
		padding-inline: 1rem;
		white-space: normal;
		text-align: center;
	}
}

/* Mobile Blocksy header: keep the brand and header actions in one compact row. */
@media (max-width: 689.98px) {
	#header [data-device='mobile'] [data-row*='middle'] > div {
		--height: 64px;
		--shrink-height: 64px;
		min-height: 64px;
	}

	#header [data-device='mobile'] [data-row*='middle'] [data-items] {
		flex-wrap: nowrap;
		gap: 0.375rem;
	}

	#header [data-device='mobile'] [data-row*='middle'] [data-items] > * {
		flex: 0 0 auto;
		margin-inline: 0.25rem;
	}

	#header [data-device='mobile'] [data-row*='middle'] [data-column='start'],
	#header [data-device='mobile'] [data-row*='middle'] [data-column='middle'],
	#header [data-device='mobile'] [data-row*='middle'] .site-branding,
	#header [data-device='mobile'] [data-row*='middle'] .site-title-container {
		min-width: 0;
	}

	#header [data-device='mobile'] [data-row*='middle'] .site-branding {
		align-items: center;
		max-width: 100%;
	}

	#header [data-device='mobile'] [data-row*='middle'] .site-logo-container,
	#header [data-device='mobile'] [data-row*='middle'] .site-logo-container img,
	#header [data-device='mobile'] [data-row*='middle'] .site-logo-container picture,
	#header [data-device='mobile'] [data-row*='middle'] .site-logo-container svg {
		height: 45px;
	}

	#header [data-device='mobile'] [data-row*='middle'] .site-logo-container {
		flex: 0 0 auto;
	}

	#header [data-device='mobile'] [data-row*='middle'] .site-title,
	#header [data-device='mobile'] [data-row*='middle'] .site-description {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#header [data-device='mobile'] [data-row*='middle'] .ct-header-search,
	#header [data-device='mobile'] [data-row*='middle'] .ct-header-cart,
	#header [data-device='mobile'] [data-row*='middle'] .ct-header-account,
	#header [data-device='mobile'] [data-row*='middle'] .ct-account-item,
	#header [data-device='mobile'] [data-row*='middle'] .ct-header-trigger {
		align-items: center;
		display: inline-flex;
		flex: 0 0 auto;
		justify-content: center;
	}
}