/* Home page only (loaded from inc/header_front.php after the webstore stylesheet).
   Layout for the page.content of the home (page_id 37): chips, h1, hero, tiles, facts.
   Images are CSS backgrounds (not <img>/<picture>) so the markup survives TinyMCE 3.4.9.
   Each image: .jpg first (old browsers), then WebP via -webkit-image-set / image-set. */

/* bg.jpg is hidden by the full-width white container below 1200px: do not download it there */
@media (max-width: 1199.98px) {
	body.home { background-image: none; }
}

.qh { padding-bottom: 32px; }

/* ---- category chips: phone + tablet only (the menu is behind the hamburger below 1201px) ---- */
.qh-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 -12px 14px;
	padding: 2px 12px 6px;
	/* the strip scrolls with no scrollbar: fade the right edge so a cut chip reads as "more" */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.qh-chips::-webkit-scrollbar { display: none; }
/* end spacer: scrolled to the end, the last chip sits clear of the fade */
.qh-chips::after { content: ""; flex: 0 0 32px; }
.qh-chips a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: 1.5px solid #642d91;
	border-radius: 20px;
	background: #fff;
	color: #642d91;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}
@media (min-width: 1201px) {
	.qh-chips { display: none; }
}

/* ---- h1 + lead ---- */
.home .qh-h1 {
	font-family: 'Patrick Hand', cursive;
	font-weight: 400;
	color: #642d91;
	font-size: 30px;
	line-height: 1.15;
	margin: 0 0 6px;
}
.qh-lead {
	margin: 0 0 16px;
	color: #444;
	font-size: 15px;
	line-height: 1.45;
}
@media (min-width: 768px) {
	.home .qh-h1 { font-size: 40px; }
	.qh-lead { font-size: 17px; margin-bottom: 20px; }
}

/* ---- hero ---- */
.qh-hero {
	border-radius: 12px;
	overflow: hidden;
	background: #4b157c;
	background: radial-gradient(ellipse at 50% 40%, #7b2fb8 0%, #5a1f91 55%, #45146f 100%);
	color: #fff;
}
/* phone / tablet: the two character clusters as one strip, title on top of it, words below as real text */
.qh-hero-art {
	display: block;
	position: relative;
	height: 190px;
	text-decoration: none;
	background-color: #4b157c;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: left bottom, left top, right top;
	background-size: 100% 55%, 50% auto, 50% auto;
	background-image:
		linear-gradient(to top, rgba(40, 8, 70, .96) 30%, rgba(40, 8, 70, 0)),
		url(/img/home/hero-left-272.jpg),
		url(/img/home/hero-right-295.jpg);
	background-image:
		linear-gradient(to top, rgba(40, 8, 70, .96) 30%, rgba(40, 8, 70, 0)),
		-webkit-image-set(url(/img/home/hero-left-272.webp) 1x),
		-webkit-image-set(url(/img/home/hero-right-295.webp) 1x);
	background-image:
		linear-gradient(to top, rgba(40, 8, 70, .96) 30%, rgba(40, 8, 70, 0)),
		image-set(url(/img/home/hero-left-272.webp) type("image/webp"), url(/img/home/hero-left-272.jpg) type("image/jpeg")),
		image-set(url(/img/home/hero-right-295.webp) type("image/webp"), url(/img/home/hero-right-295.jpg) type("image/jpeg"));
}
.qh-hero-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	padding: 0 12px;
	text-align: center;
	color: #b8f05a;
	font-family: 'Patrick Hand', cursive;
	font-size: 34px;
	line-height: 1;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.qh-hero-txt {
	padding: 14px 18px 20px;
	text-align: center;
}
.qh-hero-txt p { margin: 0 0 6px; color: #fff; font-size: 15px; line-height: 1.4; }
.qh-hero-feat { font-size: 14px; opacity: .95; }
.qh-hero-cta { margin-top: 12px !important; }
.qh-btn {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 24px;
	border-radius: 23px;
	background: #b8f05a;
	color: #2b0b4a !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}
.qh-btn:hover, .qh-btn:focus { background: #c9f26b; color: #2b0b4a !important; }
@media (min-width: 576px) {
	.qh-hero-art { height: 230px; }
	.qh-hero-title { font-size: 42px; }
}
@media (min-width: 768px) {
	.qh-hero-art { height: 300px; }
	.qh-hero-title { font-size: 52px; bottom: 14px; }
	.qh-hero-txt { padding: 18px 40px 26px; }
	.qh-hero-txt p { font-size: 17px; }
	.qh-hero-feat { font-size: 15px; max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
}
/* desktop: the whole banner as today (its words are still in the artwork), HTML words hidden */
@media (min-width: 992px) {
	.qh-hero { background: none; border-radius: 0; }
	.qh-hero-art {
		height: auto;
		padding-top: 31.41%; /* 603 / 1920 */
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
		background-image: url(/img/home/hero-1280.jpg);
		background-image: -webkit-image-set(url(/img/home/hero-1280.webp) 1x);
		background-image: image-set(url(/img/home/hero-1280.webp) type("image/webp"), url(/img/home/hero-1280.jpg) type("image/jpeg"));
	}
	.qh-hero-title, .qh-hero-txt { display: none; }
}
@media (min-width: 1200px) and (min-resolution: 1.5dppx) {
	.qh-hero-art {
		background-image: url(/img/home/hero-1920.jpg);
		background-image: -webkit-image-set(url(/img/home/hero-1920.webp) 1x);
		background-image: image-set(url(/img/home/hero-1920.webp) type("image/webp"), url(/img/home/hero-1920.jpg) type("image/jpeg"));
	}
}

/* ---- Browse Cards ---- */
.qh-sec {
	font-family: 'Patrick Hand', cursive;
	font-weight: 400;
	color: #642d91;
	font-size: 28px;
	margin: 24px 0 10px;
}
@media (min-width: 992px) {
	.qh-sec { font-size: 34px; margin: 36px 0 16px; text-align: center; }
}
.qh-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.qh-tile {
	display: block;
	position: relative;
	padding-top: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #eee center / cover no-repeat;
	text-decoration: none;
}
.qh-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 36px 12px 12px;
	color: #fff;
	background: linear-gradient(to top, rgba(30, 5, 60, .88), rgba(30, 5, 60, 0));
}
.qh-cap b {
	display: block;
	font-family: 'Patrick Hand', cursive;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
}
.qh-cap span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.3;
	opacity: .95;
}
/* phone + tablet: the photo half of each banner (the words are HTML) */
.qh-tile-baby {
	background-image: url(/img/home/tile-baby-photo.jpg);
	background-image: -webkit-image-set(url(/img/home/tile-baby-photo.webp) 1x);
	background-image: image-set(url(/img/home/tile-baby-photo.webp) type("image/webp"), url(/img/home/tile-baby-photo.jpg) type("image/jpeg"));
}
.qh-tile-wedding {
	background-image: url(/img/home/tile-wedding-photo.jpg);
	background-image: -webkit-image-set(url(/img/home/tile-wedding-photo.webp) 1x);
	background-image: image-set(url(/img/home/tile-wedding-photo.webp) type("image/webp"), url(/img/home/tile-wedding-photo.jpg) type("image/jpeg"));
}
.qh-tile-blank {
	background-image: url(/img/home/tile-blank-photo.jpg);
	background-image: -webkit-image-set(url(/img/home/tile-blank-photo.webp) 1x);
	background-image: image-set(url(/img/home/tile-blank-photo.webp) type("image/webp"), url(/img/home/tile-blank-photo.jpg) type("image/jpeg"));
}
.qh-tile-news {
	background-image: url(/img/home/tile-newspapers-photo.jpg);
	background-image: -webkit-image-set(url(/img/home/tile-newspapers-photo.webp) 1x);
	background-image: image-set(url(/img/home/tile-newspapers-photo.webp) type("image/webp"), url(/img/home/tile-newspapers-photo.jpg) type("image/jpeg"));
}
@media (min-width: 768px) {
	.qh-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.qh-tile { padding-top: 110%; }
	.qh-cap b { font-size: 26px; }
	.qh-cap span { font-size: 14px; }
}
/* desktop: the four banners whole, two per row, as today */
@media (min-width: 992px) {
	.qh-tiles { grid-template-columns: 1fr 1fr; gap: 24px; }
	.qh-tile { padding-top: 31.41%; /* 180 / 573 */ border-radius: 0; background-color: transparent; }
	.qh-cap { display: none; }
	.qh-tile-baby {
		background-image: url(/img/home/tile-baby-573.jpg);
		background-image: -webkit-image-set(url(/img/home/tile-baby-573.webp) 1x);
		background-image: image-set(url(/img/home/tile-baby-573.webp) type("image/webp"), url(/img/home/tile-baby-573.jpg) type("image/jpeg"));
	}
	.qh-tile-wedding {
		background-image: url(/img/home/tile-wedding-573.jpg);
		background-image: -webkit-image-set(url(/img/home/tile-wedding-573.webp) 1x);
		background-image: image-set(url(/img/home/tile-wedding-573.webp) type("image/webp"), url(/img/home/tile-wedding-573.jpg) type("image/jpeg"));
	}
	.qh-tile-blank {
		background-image: url(/img/home/tile-blank-573.jpg);
		background-image: -webkit-image-set(url(/img/home/tile-blank-573.webp) 1x);
		background-image: image-set(url(/img/home/tile-blank-573.webp) type("image/webp"), url(/img/home/tile-blank-573.jpg) type("image/jpeg"));
	}
	.qh-tile-news {
		background-image: url(/img/home/tile-newspapers-573.jpg);
		background-image: -webkit-image-set(url(/img/home/tile-newspapers-573.webp) 1x);
		background-image: image-set(url(/img/home/tile-newspapers-573.webp) type("image/webp"), url(/img/home/tile-newspapers-573.jpg) type("image/jpeg"));
	}
}

/* ---- facts (were two green PNG strips with the words baked in) ---- */
.qh-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 22px 0;
}
.qh-fact {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	padding: 14px 12px;
	border-radius: 12px;
	background: #c9f26b;
	color: #2b0b4a;
}
.qh-fact::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
	background: center / contain no-repeat;
}
.qh-fact-env::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232b0b4a' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M4 16l20 13 20-13v24H4z'/%3E%3Cpath d='M4 16l20-10 20 10'/%3E%3Cpath d='M4 40l16-14M44 40L28 26'/%3E%3C/svg%3E");
}
.qh-fact-a5::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232b0b4a' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M12 6h24v36H12z'/%3E%3Cpath d='M12 6l-4 4v36l4-4'/%3E%3Cpath d='M8 46h28l4-4'/%3E%3C/svg%3E");
}
.qh-fact b {
	display: block;
	font-family: 'Patrick Hand', cursive;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.05;
}
.qh-fact span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; }
@media (min-width: 576px) {
	.qh-fact {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 14px;
		justify-items: start;
		align-items: center;
		text-align: left;
		padding: 16px 18px;
	}
	.qh-fact::before { grid-row: 1 / 3; margin: 0; }
	.qh-fact b { align-self: end; }
	.qh-fact span { align-self: start; }
}
@media (min-width: 768px) {
	.qh-facts { gap: 16px; margin: 30px auto; max-width: 960px; }
	.qh-fact { padding: 20px 24px; column-gap: 18px; }
	.qh-fact::before { width: 56px; height: 56px; }
	.qh-fact b { font-size: 28px; }
	.qh-fact span { font-size: 15px; }
}

/* ---- about ---- */
.qh-about {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	color: #410079;
	font-size: 15px;
	line-height: 1.55;
}
.qh-about p { color: #410079; margin: 0 0 10px; }
@media (min-width: 768px) {
	.qh-about { font-size: 16px; padding-top: 6px; }
}