/**
 * Home page sections.
 */

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.sunny-hero {
	position: relative;
}

.sunny-hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--rhythm-hero-min-h);
	padding-block: var(--space-16);
	overflow: hidden;
}

.sunny-hero__slide[hidden] {
	display: none;
}

.sunny-hero__bg,
.sunny-hero__scrim {
	position: absolute;
	inset: 0;
}

.sunny-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 45%;
}

.sunny-hero__inner {
	position: relative;
}

.sunny-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
	max-width: 34rem;
}

.sunny-hero__title {
	color: var(--neutral-0);
	font-size: var(--fs-display-xl);
	font-weight: var(--fw-black);
}

.sunny-hero__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-relaxed);
}

.sunny-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* On a dark hero the secondary button needs a light outline, not the neutral
   border it uses against a page background. */
.sunny-hero__cta-secondary {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--neutral-0);
}

.sunny-hero__cta-secondary:hover {
	background: rgba(255, 255, 255, 0.14);
	color: var(--neutral-0);
}

.sunny-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	transform: translateY(-50%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-pill);
	background: rgba(10, 10, 14, 0.35);
	color: var(--neutral-0);
	opacity: 0.55;
	transition: opacity var(--duration-fast), background var(--duration-fast);
}

.sunny-hero:hover .sunny-hero__arrow,
.sunny-hero__arrow:focus-visible {
	opacity: 1;
}

.sunny-hero__arrow:hover {
	background: rgba(10, 10, 14, 0.7);
}

.sunny-hero__arrow--prev { left: var(--space-5); }
.sunny-hero__arrow--next { right: var(--space-5); }

.sunny-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-6);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}

.sunny-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.45);
	transition: width var(--duration-fast), background var(--duration-fast);
}

.sunny-hero__dot.is-active {
	width: 28px;
	background: var(--neutral-0);
}

@media (max-width: 600px) {
	.sunny-hero__arrow {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Trust bar
 * ------------------------------------------------------------------------ */

.sunny-trust {
	background: var(--surface-card);
	border-bottom: 1px solid var(--border-default);
}

.sunny-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4) var(--space-6);
	padding-block: var(--space-5);
}

.sunny-trust__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--fg-secondary);
	font-size: var(--fs-body-md);
}

.sunny-trust__item .sunny-icon {
	color: var(--surface-brand);
}

@media (max-width: 1040px) {
	.sunny-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.sunny-trust__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Occasion tiles
 * ------------------------------------------------------------------------ */

.sunny-section-head__sub {
	margin: var(--space-1) 0 0;
	color: var(--fg-secondary);
}

.sunny-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 3 / 4;
	background: var(--surface-brand);
}

.sunny-tile__media,
.sunny-tile__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gradient only over the lower half, so the label reads without dimming the
   whole image. */
.sunny-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(12, 20, 16, 0.75), rgba(12, 20, 16, 0) 55%);
}

.sunny-tile__label {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	z-index: 1;
	color: var(--neutral-0);
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-heading-sm);
}

.sunny-tile img {
	transition: transform var(--duration-slow) var(--ease-standard);
}

.sunny-tile:hover img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------------------------
 * Custom order band
 * ------------------------------------------------------------------------ */

.sunny-band {
	background: var(--surface-brand);
	color: var(--neutral-0);
}

.sunny-band__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: var(--space-12);
	align-items: center;
	padding-block: var(--rhythm-section-y);
}

.sunny-band__pitch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.sunny-band__title {
	color: var(--neutral-0);
	font-size: var(--fs-display-md);
}

.sunny-band__text {
	max-width: 34rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	line-height: var(--lh-relaxed);
}

.sunny-band__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-4);
}

.sunny-band__stat {
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.14);
}

.sunny-band__stat-value {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-heading-lg);
}

.sunny-band__stat-label {
	margin: var(--space-1) 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-body-md);
}

/* ---------------------------------------------------------------------------
 * Journal
 * ------------------------------------------------------------------------ */

.sunny-journal-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	color: inherit;
}

.sunny-journal-card:hover {
	color: inherit;
}

.sunny-journal-card__kicker {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-caption);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--brand-700);
}

.sunny-journal-card__title {
	margin: 0;
	font-size: var(--fs-heading-sm);
	line-height: var(--lh-snug);
	color: var(--fg-primary);
}

.sunny-journal-card__excerpt {
	color: var(--fg-secondary);
	font-size: var(--fs-body-md);
	line-height: var(--lh-relaxed);
}