/* Good Code Studio — block style variations for core blocks. */

/* Paragraph → Eyebrow label */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--work-sans, inherit);
	font-size: clamp(0.8125rem, 0.45rem + 0.8vw, 1.375rem);
	font-weight: 600;
	letter-spacing: 0.19em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Paragraph → Tag (use several inside a Row group) */
.is-style-tag {
	display: inline-block;
	margin: 0 !important;
	padding: 0.55em 1.2em;
	border: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--rye, Georgia, serif);
	font-size: 1rem !important;
	line-height: 1.2;
}

/* Group → Scrolling band. Put one Row group inside with the items;
   marquee.js repeats them to fill any screen width. */
.wp-block-group.is-style-marquee {
	overflow: hidden;
	white-space: nowrap;
}
.wp-block-group.is-style-marquee > .wp-block-group {
	width: max-content;
	flex-wrap: nowrap !important;
}
.wp-block-group.is-style-marquee.is-ready > .wp-block-group {
	animation: gcs-marquee var(--gcs-marquee-duration, 40s) linear infinite;
}
.wp-block-group.is-style-marquee:hover > .wp-block-group {
	animation-play-state: paused;
}
.wp-block-group.is-style-marquee > .wp-block-group > * {
	margin: 0 !important;
}
@keyframes gcs-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--gcs-marquee-shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-marquee.is-ready > .wp-block-group {
		animation: none;
	}
}
.editor-styles-wrapper .wp-block-group.is-style-marquee > .wp-block-group {
	animation: none;
}

/* Image → Polaroid */
.wp-block-image.is-style-polaroid {
	padding: clamp(8px, 1vw, 16px);
	background: #fff;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
	transform: rotate(-2.5deg);
}
.wp-block-image.is-style-polaroid img {
	display: block;
}

/* Image → Record sleeve (a vinyl record peeks out to the right) */
.wp-block-image.is-style-vinyl {
	position: relative;
	z-index: 0;
	margin-right: 16.22%;
}
.wp-block-image.is-style-vinyl::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 4.8%;
	left: 29%;
	width: 90.3%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		repeating-radial-gradient(circle, #141414 0 2px, #1e1e1e 2px 4px);
}
.wp-block-image.is-style-vinyl img {
	display: block;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25);
}

/* Button → Play (round teal button; label stays for screen readers) */
.wp-block-button.is-style-play .wp-block-button__link {
	position: relative;
	width: clamp(72px, 7vw, 132px);
	aspect-ratio: 1;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 0;
	font-size: 0 !important;
	background: var(--wp--preset--color--teal, #05ad98);
	color: var(--wp--preset--color--ink, #141414);
}
.wp-block-button.is-style-play .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 30%;
	height: 34%;
	transform: translate(-50%, -50%);
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.wp-block-button.is-style-play .wp-block-button__link:hover {
	background: #fff;
}

/* Gallery → Photo strip (edge to edge, no gaps) */
.wp-block-gallery.is-style-strip {
	gap: 0 !important;
}
.wp-block-gallery.is-style-strip.has-nested-images figure.wp-block-image {
	margin: 0 !important;
	width: 25% !important;
	flex-grow: 1;
	aspect-ratio: 12 / 11;
}
.wp-block-gallery.is-style-strip.has-nested-images figure.wp-block-image img {
	height: 100%;
	object-fit: cover;
}
@media (max-width: 600px) {
	.wp-block-gallery.is-style-strip.has-nested-images figure.wp-block-image {
		width: 50% !important;
	}
}

/* Group (with a background image) used as a video card: add the class
   "gcs-video-card". Label + title sit at the bottom, a Play button centers. */
.gcs-video-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.gcs-video-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.05) 35%, rgba(20, 20, 20, 0.85) 100%);
}
.gcs-video-card > * {
	position: relative;
}
.gcs-video-card > .wp-block-buttons {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.gcs-video-card > .wp-block-buttons a {
	pointer-events: auto;
}
.gcs-video-card.is-small > .wp-block-buttons {
	bottom: 35%;
}
.gcs-video-card.is-small .wp-block-button.is-style-play .wp-block-button__link {
	width: clamp(56px, 4.5vw, 76px);
}
@media (max-width: 781px) {
	.gcs-video-card:not(.is-small) {
		min-height: 440px !important;
	}
}