/**
 * About (My Story) — Seattle /about hero image stream + facilitation page rhythm.
 * Reference: https://az-seattle.webflow.io/about (company-images-grid + IG overlays)
 */

.toby-wf-about-page .toby-wf-about-section-1 .toby-about-sec1-hero {
	min-height: 100vh;
}

.toby-wf-about-page .toby-wf-about-section-1 .toby-about-sec1-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
}

.toby-wf-about-page .toby-wf-about-section-1 .toby-about-sec1-hero .toby-wf-about-hero-intro {
	max-width: var(--wp--style--global--wide-size, 1920px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
	box-sizing: border-box;
}

/* —— Photo marquee (Seattle about-hero-images-holder) —— */
.toby-about-instagram-marquee {
	--toby-about-marquee-gap: clamp(12px, 2vw, 24px);
	--toby-about-marquee-fade: clamp(72px, 14vw, 200px);
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: visible;
	padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(0.5rem, 2vw, 1.25rem);
}

.toby-about-instagram-marquee__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: clamp(1.25rem, 3vw, 2.5rem) 0;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 22%,
		#000 78%,
		transparent 100%
	);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* Side fades extend past image tops/bottoms; soft entrance toward center. */
.toby-about-instagram-marquee__viewport::before,
.toby-about-instagram-marquee__viewport::after {
	content: "";
	position: absolute;
	top: calc(-1 * clamp(1.5rem, 4vw, 3rem));
	bottom: calc(-1 * clamp(1.5rem, 4vw, 3rem));
	width: var(--toby-about-marquee-fade);
	z-index: 2;
	pointer-events: none;
}

.toby-about-instagram-marquee__viewport::before {
	left: 0;
	background: linear-gradient(
		90deg,
		#252525 0%,
		rgba(37, 37, 37, 0.85) 35%,
		transparent 100%
	);
}

.toby-about-instagram-marquee__viewport::after {
	right: 0;
	background: linear-gradient(
		270deg,
		#252525 0%,
		rgba(37, 37, 37, 0.85) 35%,
		transparent 100%
	);
}

.toby-about-instagram-marquee__viewport--interactive {
	touch-action: none;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.toby-about-instagram-marquee__viewport--interactive.is-grabbing {
	cursor: grabbing;
}

.toby-about-instagram-marquee__track--js {
	animation: none !important;
}

.toby-about-instagram-marquee__track {
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	width: max-content;
	gap: var(--toby-about-marquee-gap);
	animation: toby-about-instagram-scroll 48s linear infinite;
	will-change: transform;
}

.toby-about-instagram-marquee__set {
	display: flex;
	align-items: flex-end;
	flex: 0 0 auto;
	gap: var(--toby-about-marquee-gap);
}

.toby-about-instagram-marquee.is-paused .toby-about-instagram-marquee__track:not(.toby-about-instagram-marquee__track--js) {
	animation-play-state: paused;
}

@keyframes toby-about-instagram-scroll {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		/* Half track width plus half the gap between duplicated sets (seam fix). */
		transform: translate3d(calc(-50% - var(--toby-about-marquee-gap) / 2), 0, 0);
	}
}

.toby-about-instagram-marquee__cell {
	flex: 0 0 auto;
	position: relative;
	margin: 0;
	width: clamp(200px, 22vw, 320px);
}

.toby-about-instagram-marquee__cell.is-tall {
	width: clamp(220px, 24vw, 360px);
}

.toby-about-instagram-marquee__cell.is-short {
	width: clamp(180px, 18vw, 280px);
	margin-bottom: clamp(24px, 4vw, 56px);
}

.toby-about-instagram-marquee__cell img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 4px;
}

/* Legacy slide IG icon — removed from markup; keep hidden if block recovery reintroduces it. */
.toby-about-instagram-marquee__ig {
	display: none !important;
}

/* Hero intro (above IG marquee, on dark gradient) */
.toby-wf-about-page .toby-wf-about-hero-intro .toby-wf-section-label {
	color: var(--wp--preset--color--gold, #c9a227) !important;
	margin-bottom: 0.5rem;
}

.toby-wf-about-page .toby-wf-about-hero-intro .wp-block-heading {
	margin-bottom: 0.75rem;
}

.toby-wf-about-page .toby-wf-about-story .wp-block-heading + .wp-block-paragraph {
	margin-top: 1rem;
}

/* —— Directory masonry cards (Cover + Group blocks) —— */
.toby-wf-about-page .toby-about-directory-masonry {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(11rem, auto);
	gap: clamp(12px, 1.5vw, 20px);
}

.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card {
	grid-column: span 6;
	min-height: 14rem;
	overflow: hidden;
	border-radius: 4px;
}

.toby-wf-about-page .toby-about-dir-card--tall {
	grid-row: span 2;
}

.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card:nth-child(1),
.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card:nth-child(4) {
	grid-column: span 6;
}

.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card:nth-child(2),
.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card:nth-child(3),
.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card:nth-child(5),
.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card:nth-child(6) {
	grid-column: span 6;
}

.toby-wf-about-page .toby-about-dir-card .toby-about-dir-cover {
	min-height: 100%;
	height: 100%;
	border-radius: 4px;
	overflow: hidden;
}

.toby-wf-about-page .toby-about-dir-card .toby-about-dir-cover .wp-block-cover__image-background {
	transition: transform 0.45s ease;
}

.toby-wf-about-page .toby-about-dir-card:hover .toby-about-dir-cover .wp-block-cover__image-background,
.toby-wf-about-page .toby-about-dir-card:focus-within .toby-about-dir-cover .wp-block-cover__image-background {
	transform: scale(1.04);
}

.toby-wf-about-page .toby-about-dir-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100%;
	padding: 0;
}

.toby-wf-about-page .toby-about-dir-card__overlay {
	width: 100%;
	padding: 1.25rem 1.1rem 1rem;
	background: rgba(37, 37, 37, 0.94);
	box-sizing: border-box;
	transform: translateY(calc(100% - 3.25rem));
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.toby-wf-about-page .toby-about-dir-card:hover .toby-about-dir-card__overlay,
.toby-wf-about-page .toby-about-dir-card:focus-within .toby-about-dir-card__overlay {
	transform: translateY(0);
}

.toby-wf-about-page .toby-about-dir-card__overlay .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.4rem;
}

.toby-wf-about-page .toby-about-dir-card__overlay .wp-block-paragraph {
	margin-top: 0;
	margin-bottom: 0.65rem;
}

.toby-wf-about-page .toby-about-dir-card__overlay .wp-block-buttons {
	margin-top: 0;
}

/* Directory cards — arrow + text CTAs (consulting pattern). */
.toby-wf-about-page .toby-about-dir-discovery-cta {
	margin: 0.35rem 0 0;
}

.toby-wf-about-page .toby-about-dir-discovery-cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--wp--preset--color--gold, #ffcb69) !important;
	font-family: "DM Sans", system-ui, sans-serif !important;
	transition: color 0.2s ease;
}

.toby-wf-about-page .toby-about-dir-discovery-cta a:hover {
	color: var(--wp--preset--color--cream, #f5f0e8) !important;
}

.toby-wf-about-page .toby-about-dir-discovery-arrow {
	font-size: 1.1rem;
	line-height: 1;
}

/* Featured in */
.toby-wf-about-page .toby-wf-about-featured-links .wp-block-list {
	margin-top: 0.75rem;
}

.toby-wf-about-page .toby-wf-about-featured-links a {
	text-underline-offset: 0.15em;
}

.toby-wf-about-page .toby-wf-about-cta-cover .wp-block-cover__inner-container {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.toby-about-instagram-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
	}

	.toby-about-instagram-marquee__set--dup {
		display: none;
	}
}

@media (max-width: 781px) {
	.toby-about-instagram-marquee__cell.is-short {
		margin-bottom: 16px;
	}

	.toby-wf-about-page .toby-about-directory-masonry {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card,
	.toby-wf-about-page .toby-about-directory-masonry > .toby-about-dir-card:nth-child(n) {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 16rem;
	}

	.toby-wf-about-page .toby-about-dir-card--tall {
		min-height: 18rem;
	}

	.toby-wf-about-page .toby-about-dir-card__overlay {
		transform: translateY(0);
		background: linear-gradient(180deg, transparent 0%, rgba(37, 37, 37, 0.55) 40%, rgba(37, 37, 37, 0.92) 100%);
	}
}

@media (hover: none) {
	.toby-wf-about-page .toby-about-dir-card__overlay {
		transform: translateY(0);
		background: linear-gradient(180deg, transparent 0%, rgba(37, 37, 37, 0.55) 40%, rgba(37, 37, 37, 0.92) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.toby-wf-about-page .toby-about-dir-card .toby-about-dir-cover .wp-block-cover__image-background,
	.toby-wf-about-page .toby-about-dir-card__overlay {
		transition: none;
	}

	.toby-wf-about-page .toby-about-dir-card__overlay {
		transform: translateY(0);
	}
}