/*
 * potensic/assets/css/home.css
 * Front page sections — port of the Shopify Enterprise 1.6.1 section sheets
 * (slideshow.css, text-overlay.css, gallery.css, featured-collection.css) plus
 * clean rewrites of the two PageFly blocks. Spec: docs/spec/03-home.md.
 *
 * Loaded after tokens/base/components/utilities, so it may rely on every
 * variable and utility class those sheets define and only carries what is
 * specific to the home page.
 *
 * Section map
 *   1  Slideshow                §2.1
 *   2  Media grid (x4)          §2.2 §2.3 §2.5 §2.6
 *   3  Text overlay             shared by the media grids
 *   4  Featured collection      §2.4
 *   5  Testimonials             §2.7
 *   6  Press slider             §2.8
 *   7  Newsletter extras        §2.10
 */


/* ==========================================================================
   1. Slideshow (§2.1)
   ========================================================================== */

slide-show {
	display: block;
	--ctrl-bottom: var(--gutter);
	--ctrl-space: calc(var(--ctrl-bottom) + 38px);
}
.slideshow {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-y;
}
.slideshow::-webkit-scrollbar { display: none; }
.js .slideshow { pointer-events: none; }
.slideshow__slide {
	flex: 0 0 100%;
	padding-bottom: var(--ctrl-space);
	scroll-snap-align: start;
	pointer-events: initial;
}
/* Every slide on this page ignores the pagination offset, exactly as the live
   store prints it, so the block height is purely the image aspect ratio. */
.slideshow__slide--ignore-pagination { padding-bottom: 0; }
.slideshow__slide.is-active { z-index: 1; }
.no-js .slideshow__slide { position: relative; padding-bottom: 0; }
.no-js .slideshow__slide.has-motion { transform: none; opacity: 1; }

/* Slide transition — the artwork slides in from the leading edge in 0.5s. */
[data-transition="slide"][data-direction="prev"] { --translate-in: -100%; }
[data-transition="slide"] .has-motion { transform: translate(var(--translate-in, 100%)); }
[data-transition="slide"] .has-motion.transition-out { transition-delay: .5s; }
[data-transition="slide"] .is-active > .has-motion {
	transform: translate(0);
	transition: var(--transition-in, transform .5s cubic-bezier(.77, 0, .175, 1));
}
[data-transition="fade"] .has-motion { transition: var(--transition-in, opacity 1s); opacity: 0; }
[data-transition="fade"] .is-active > .has-motion { opacity: 1; }

/* Controls */
.slideshow-ctrl {
	z-index: 2;
	bottom: var(--ctrl-bottom);
	left: 50%;
	transform: translate(-50%);
}
.slideshow-pagination { pointer-events: none; }
.page-btn {
	margin: 5px 2px;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(var(--text-color) / .2);
	cursor: pointer;
	pointer-events: initial;
	-webkit-appearance: none;
	appearance: none;
}
.page-btn__line {
	width: 32px;
	height: 2px;
	margin: 14px 6px;
	transition: background-color .3s, height .4s;
	border-radius: var(--btn-border-radius, 0);
	background-color: currentColor;
}
[data-autoplay="true"] .page-btn__line:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0;
	background-color: rgb(var(--text-color));
}
[data-autoplay="true"] [aria-current="true"] > .page-btn__line { height: 3px; }
[data-autoplay="true"] [aria-current="true"] > .page-btn__line:after {
	animation-name: lineTimer;
	animation-duration: var(--duration, 5s);
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-play-state: var(--play-state, paused);
}
.page-btn:hover > .page-btn__line,
[data-autoplay="false"] [aria-current="true"] > .page-btn__line { background-color: rgb(var(--text-color)); }
@keyframes lineTimer { 0% { transform: scaleX(0); } to { transform: scaleX(1); } }

.slideshow-nav {
	color: rgb(var(--text-color));
	border-radius: 19px;
	pointer-events: initial;
}
.slideshow-nav__autoplay { margin-inline-start: 12px; }
.slideshow-nav__autoplay:before {
	content: "";
	width: 1px;
	height: 24px;
	margin-inline-end: 8px;
	background-color: rgb(var(--text-color));
}
.slideshow-nav__btn {
	padding: 7px;
	border: 0;
	background: none;
	transition: background-color .3s, color .3s;
	color: rgb(var(--text-color));
	cursor: pointer;
}
.slideshow-nav__btn:hover { background-color: rgb(var(--text-color)); color: #333; }
.autoplay-btn .icon { display: block; width: 24px; height: 24px; padding: 4px; }
.autoplay-btn.is-paused .pause-icon,
.autoplay-btn:not(.is-paused) .play-icon { display: none; }

@media (min-width: 1280px) {
	slide-show { --ctrl-bottom: 48px; }
}


/* ==========================================================================
   2. Text overlay — shared by every media grid block (port of text-overlay.css)
   ========================================================================== */

/* .text-overlay now lives in components.css (shared by home + page sections). */


/* ==========================================================================
   3. Media grid (port of gallery.css)
   ========================================================================== */

.gallery { grid-auto-rows: min-content; }
.gallery.grid { gap: calc(3 * var(--space-unit)); }
.gallery .color-scheme--white { background: none; }
.gallery-block__image { flex-grow: 1; padding: 5%; }
.gallery-block__image-text { z-index: 2; padding: 5%; }
.gallery-block__image-text p:last-child { margin-bottom: 0; }
.gallery-block__image-text.text-overlay { max-width: 400px; margin: 0; }
.gallery-block__image-text--transparent { padding: 0; }
.gallery-block .subheading:not(:last-child) { margin-bottom: var(--space-unit); }

@media (max-width: 768.98px) {
	.md-down\:col-span-2 { grid-column: span 2 / span 2; }
}
/* The live theme drops the two-column span at 769px, which leaves the "Why
   shop" hero tile and the "Compare" banner occupying half of a two-column grid
   between 769 and 1023px (spec §6.3 recommends spanning them instead). Only
   those two blocks opt in — the two "Rewards" banners keep the upstream
   one-column-each layout in that range. */
@media (min-width: 769px) and (max-width: 1023.98px) {
	.md-only\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (max-width: 768.98px) {
	.gallery-block .subheading { font-size: .75em; }
}
@media (min-width: 769px) {
	.gallery-block .subheading:not(:last-child) { margin-bottom: calc(3 * var(--space-unit)); }
	.gallery.grid { gap: calc(6 * var(--space-unit)); }
}
@media (min-width: 1024px) {
	.gallery-block__image-text:not(.gallery-block__image-text--transparent) { padding: calc(5 * var(--space-unit)); }
}


/* ==========================================================================
   4. Featured collection (port of featured-collection.css) — §2.4
   ========================================================================== */

.featured-collection-container { max-width: calc(var(--page-width, 1320px) + var(--gutter) * 2); }
product-card { display: flex; }
product-card-image-slider { display: block; }

@media (max-width: 768.98px) {
	.featured-collection-info { margin: 0 var(--gutter) var(--gutter); }
}
@media (min-width: 769px) {
	.featured-collection-info { flex-basis: 280px; }
	.featured-collection-info + .container { max-width: calc(100% - 280px); }
	.featured-collection-container { padding-inline-start: var(--gutter); }
	.featured-collection--sticky {
		position: sticky;
		top: var(--header-end-padded, 0);
		transition: top .3s;
	}
	.featured-collection--sticky-fill { min-height: var(--card--product-height, auto); }
}
@media (min-width: 1024px) {
	.featured-collection-info { flex-basis: 350px; margin-inline-end: var(--gutter-md, 32px); }
	.featured-collection-info + .container { max-width: calc((100% - 350px) - var(--gutter-md, 32px)); padding: 0; }
	.featured-collection-container { padding: 0 var(--gutter); }
}
/* Card padding and price sizes already come from components.css. */
.card--product .price__default { display: inline; }


/* ==========================================================================
   5. Testimonials — "What Our Customers Say" (§2.7)
   ========================================================================== */

.home-testimonials {
	background-color: #fff;
	padding: 6px 0 15px;
	/* The live PageFly block pulls itself 20px into the preceding section gap. */
	margin-top: -20px;
}
.home-testimonials__inner {
	width: 100%;
	max-width: 1470px;
	margin: 0 auto;
	padding: 0 15px;
}
.home-testimonials__head { margin: 0 -15px 13px; padding: 15px 15px 16px; }
.home-testimonials__heading {
	margin: 0;
	color: #181818;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.4em;
	text-transform: capitalize;
	text-align: left;
}
.home-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	padding: 15px 0;
}
.home-testimonial {
	display: flex;
	flex-direction: column;
	margin: 0;
	background-color: #f5f5f5;
}
.home-testimonial__photo {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	object-position: center center;
	transition: transform .3s ease-out;
}
.home-testimonial__meta {
	display: flex;
	align-items: center;
	/* <figcaption> picks up the WordPress caption rules in base.css — reset them. */
	margin: 0;
	padding: 16px 0 16px 16px;
	color: inherit;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
}
.home-testimonial__avatar-link { display: block; flex: 0 0 auto; }
.home-testimonial__avatar {
	display: block;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	margin-right: 16px;
	object-fit: cover;
	object-position: center center;
}
.home-testimonial__who { min-width: 0; }
.home-testimonial__name {
	margin: 0 0 8px;
	color: #181818;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 18px;
	font-style: italic;
	line-height: 1.3em;
}
.home-testimonial__stars { display: flex; align-items: center; gap: 1.875px; color: #ee1f1f; line-height: 1; }
.home-testimonial__star { display: block; }
.home-testimonial__quote {
	margin: 0 16px 16px;
	color: #333;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.5em;
}
@media (hover: hover) and (pointer: fine) {
	.home-testimonial__photo:hover { transform: translateY(8px); }
	.home-testimonial__avatar-link:hover .home-testimonial__avatar { animation: pf-pop .3s linear 1; }
}
@keyframes pf-pop { 50% { transform: scale(1.12); } }

@media (max-width: 767.49px) {
	.home-testimonials { padding: 6px 0 37px; }
	.home-testimonials__head { margin-bottom: 8px; }
	.home-testimonials__heading { font-size: 26px; }
	.home-testimonials__grid { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 7.5px 0; }
}
@media (min-width: 767.5px) and (max-width: 1024.49px) {
	.home-testimonials { padding: 50px 0; }
	.home-testimonials__head { margin-bottom: 0; }
	.home-testimonial__photo { height: 430px; }
	.home-testimonial__name,
	.home-testimonial__quote { font-size: 16px; }
}
@media (min-width: 1024.5px) and (max-width: 1199.49px) {
	.home-testimonials { padding-top: 45px; }
	.home-testimonials__head { margin: 0 -15px; padding: 0 15px; }
	.home-testimonials__heading { margin-top: -50px; font-size: 20px; }
	.home-testimonials__grid { padding-top: 0; }
	.home-testimonial__photo { height: 270.281px; }
}


/* ==========================================================================
   6. Press slider — "As Featured On" (§2.8)
   ========================================================================== */

.home-press {
	margin: 60px 0;
	padding: 90px 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-attachment: fixed;
	text-align: center;
}
.home-press__inner {
	/* Column layout so the PageFly row gutters below never margin-collapse. */
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 15px;
}
.home-press__heading {
	margin: 0 0 30px;
	/* PageFly column gutter: --s-xs 15px below the "lg" (1200px) breakpoint, 6px above. */
	padding: 15px 0;
	color: #000;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.4em;
}
.home-press__slider {
	display: block;
	position: relative;
	/* PageFly column gutter (--s-xs:15px) around the carousel row. */
	margin: 15px 0;
	background-color: rgba(255, 255, 255, .72);
}
.home-press__track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.home-press__track::-webkit-scrollbar { display: none; }
.home-press__slide {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 40px from the slide + 15px from the PageFly row/column gutter it wraps. */
	padding: 55px 100px;
	scroll-snap-align: start;
}
.home-press__logo {
	display: block;
	width: 200px;
	height: auto;
	margin-bottom: 20px;
	object-fit: contain;
	object-position: center center;
}
.home-press__logo--tall { height: 50px; }
.home-press__quote {
	margin: 0;
	color: #000;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.5em;
	text-align: center;
}
.home-press__nav {
	position: absolute;
	z-index: 2;
	top: calc(50% - 20px);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .4);
	transition: .35s;
	cursor: pointer;
}
.home-press__nav:hover { background: #000; }
.home-press__nav:before,
.home-press__nav:after { content: ""; position: absolute; left: 19px; width: 1px; height: 8px; background: #fff; }
.home-press__nav:before { top: 19px; transform: rotate(45deg); }
.home-press__nav:after { top: 14px; transform: rotate(-45deg); }
.home-press__nav--prev { left: 20px; transform: rotate(180deg); }
.home-press__nav--next { right: 20px; }

@media (min-width: 767.5px) and (max-width: 1024.49px) {
	.home-press__slide { padding: 25px 70px; }
	.home-press__quote { font-size: 12px; }
}
@media (min-width: 1024.5px) and (max-width: 1199.49px) {
	.home-press { margin-bottom: 60px; }
}
@media (min-width: 1200px) {
	.home-press__heading { padding: 6px 0; }
}
@media (max-width: 767.49px) {
	.home-press {
		margin: 40px 15px 60px;
		padding: 60px 0;
		background-size: cover;
		background-attachment: local;
	}
	.home-press__heading { margin-bottom: 0; font-size: 30px; }
	.home-press__slide { padding: 25px 30px; }
	.home-press__quote { margin-bottom: 10px; padding: 0 35px; font-size: 12px; }
}


/* ==========================================================================
   7. Newsletter (§2.10)
   ========================================================================== */

.form__honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.form-status { margin: calc(3 * var(--space-unit)) 0 0; font-size: .88em; }
.form-status:empty { display: none; }
.form-status.is-error { color: rgb(var(--error-text-color)); }