/*
 * BYGMusic theme styles that theme.json can't express:
 * section bands, cards, stats, the play button and the campaign pages.
 */

:root {
	--byg-purple: var(--wp--preset--color--purple, #6632ff);
	--byg-purple-light: var(--wp--preset--color--purple-light, #a78bff);
	--byg-line: var(--wp--preset--color--line, #2e2160);
	--byg-muted: var(--wp--preset--color--muted, #b9b5ae);
	--byg-card: var(--wp--preset--color--card, #1c1240);
	--byg-display: var(--wp--preset--font-family--display, Anton, Impact, sans-serif);
	--byg-gutter: var(--wp--style--root--padding-left, 24px);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

:where(.wp-site-blocks) :where(p, h1, h2, h3, h4, h5, h6) {
	margin-block: 0;
}

/* ---------- Labels and small type ---------- */

/* Highlighted words in headings: colored text only, never a marker background. */
mark.has-inline-color {
	background: transparent;
}

.byg-label {
	font-family: var(--wp--preset--font-family--body);
}

.is-style-eyebrow,
.byg-label,
.byg-card__tag,
.byg-details dt {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-eyebrow:not(.has-text-color),
.byg-label,
.byg-card__tag {
	color: var(--byg-purple-light);
}

.byg-accent,
.byg-number,
.byg-step__number {
	color: var(--byg-purple-light);
}

.byg-more-link a,
a.byg-more-link,
.byg-back {
	color: var(--byg-purple-light);
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	padding-block: 12px;
	text-decoration: none;
}

.byg-more-link a:hover,
a.byg-more-link:hover,
.byg-back:hover {
	color: var(--wp--preset--color--white, #fff);
	text-decoration: underline;
}

/* ---------- Section bands ---------- */

.byg-band--rule {
	border-block: 1px solid var(--byg-line);
}

.byg-band--rule-top {
	border-top: 1px solid var(--byg-line);
}

.byg-band--purple-black {
	background: var(--wp--preset--color--surface-purple, #100c1c);
}

.byg-band--purple {
	background: var(--byg-purple);
	color: #fff;
}

.byg-band > .byg-wrap {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--wp--style--global--wide-size, 1280px) + 2 * var(--byg-gutter));
	padding: clamp(56px, 8vw, 96px) var(--byg-gutter);
}

.byg-band--rule > .byg-wrap {
	padding-block: 64px;
}

/* ---------- Stats ---------- */

.byg-stats {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.byg-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.byg-stat__number {
	color: var(--byg-purple-light);
	font-family: var(--byg-display);
	font-size: 64px;
	line-height: 1;
}

.byg-stat__label {
	color: var(--byg-muted);
	font-size: 15px;
}

/* ---------- Client names ---------- */

.byg-client-list {
	display: flex;
	flex-wrap: wrap;
	font-family: var(--byg-display);
	font-size: clamp(24px, 2.4vw, 30px);
	gap: 14px 40px;
	line-height: 1.1;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	text-transform: uppercase;
}

/* ---------- Cards and rules ---------- */

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface, #141416);
	border: 1px solid var(--byg-line);
	border-radius: 6px;
	border-top: 3px solid var(--byg-purple);
	padding: 32px;
}

.byg-number {
	font-family: var(--byg-display);
	font-size: 22px;
}

.is-style-accent-rule,
.byg-rule {
	border-top: 2px solid var(--byg-purple);
	padding-top: 20px;
}

.byg-rule--white {
	border-top-color: #fff;
	padding-top: 16px;
}

.byg-columns-3 {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.byg-rule {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.byg-lead {
	font-size: 19px;
	line-height: 1.5;
}

/* ---------- Section heading rows ---------- */

.byg-section-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	justify-content: space-between;
}

.byg-featured {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ---------- Campaign cards ---------- */

.byg-grid {
	display: grid;
	gap: 40px 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.byg-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.byg-card__media {
	text-decoration: none;
	aspect-ratio: 4 / 3;
	background: var(--byg-card);
	border-radius: 6px;
	display: block;
	overflow: hidden;
}

.byg-card__img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	width: 100%;
}

.byg-card:hover .byg-card__img {
	transform: scale(1.03);
}

.byg-card__placeholder {
	box-sizing: border-box;
	color: #fff;
	display: flex;
	align-items: flex-end;
	font-family: var(--byg-display);
	font-size: clamp(32px, 3.4vw, 44px);
	height: 100%;
	line-height: 1;
	padding: 20px;
	text-transform: uppercase;
}

.byg-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
}

.byg-card__title a {
	text-decoration: none;
}

.byg-card__title a:hover {
	text-decoration: underline;
}

.byg-card__summary {
	color: var(--byg-muted);
	font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.byg-card__img {
		transition: none;
	}
}

/* ---------- Video ---------- */

.byg-video {
	margin: 0;
}

.byg-video iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 6px;
	display: block;
	height: auto;
	width: 100%;
}

.byg-video img {
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Image with a purple play button (block style "Video"). */
.is-style-video a {
	display: block;
	position: relative;
}

.is-style-video a::after {
	background: var(--byg-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 56% 50% / 34%;
	border-radius: 999px;
	bottom: 20px;
	content: "";
	height: 64px;
	left: 20px;
	position: absolute;
	transition: transform 0.2s ease;
	width: 64px;
}

.is-style-video a:hover::after {
	transform: scale(1.08);
}

.byg-video.is-style-video a::after {
	bottom: auto;
	height: 96px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 96px;
}

/* ---------- Campaign page header ---------- */

.byg-case-header {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.byg-back {
	align-self: flex-start;
}

.byg-case-title {
	font-size: var(--wp--preset--font-size--gigantic, clamp(52px, 7vw, 104px));
	line-height: 0.95;
	max-width: 14ch;
}

.byg-details {
	border-top: 1px solid var(--byg-line);
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin: 16px 0 0;
	padding-top: 24px;
}

.byg-details div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.byg-details dt {
	color: #a3a09b;
	font-size: 12px;
}

.byg-details dd {
	font-size: 18px;
	font-weight: 500;
	margin: 0;
}

.byg-story .wp-block-post-content > * + * {
	margin-top: 20px;
}

/* ---------- Quotes ---------- */

.byg-quote,
.byg-band--purple blockquote {
	border: 0;
	margin: 0;
	padding: 0;
}

.byg-quote p {
	font-family: var(--byg-display);
	font-size: clamp(32px, 4.4vw, 64px);
	line-height: 1.05;
	max-width: 22ch;
	text-transform: uppercase;
}

.byg-quote cite {
	color: var(--wp--preset--color--lilac, #ede7ff);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	margin-top: 24px;
	text-transform: none;
}

/* ---------- Process steps ---------- */

.byg-steps .byg-step {
	border-top: 1px solid var(--byg-line);
	margin: 0;
	padding-block: 24px;
}

.byg-steps .byg-step:last-child {
	border-bottom: 1px solid var(--byg-line);
}

.byg-step__number {
	font-family: var(--byg-display);
	font-size: 40px;
	line-height: 1;
	min-width: 56px;
}

/* ---------- Buttons ---------- */

.wp-block-button.is-style-light .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink, #2a0e8f);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--lilac, #ede7ff);
	color: var(--wp--preset--color--ink, #2a0e8f);
}

.wp-block-button.is-style-outline-dark .wp-block-button__link {
	background: transparent;
	border: 1px solid #3a3a40;
	color: var(--wp--preset--color--contrast, #f4f1ec);
	padding: 13px 25px;
}

.wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
	border-color: var(--byg-purple-light);
}

/* ---------- Header ---------- */

.byg-logo img {
	display: block;
}

.wp-block-navigation a {
	padding-block: 12px;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .current-menu-item > a {
	color: var(--byg-purple-light);
}

/* ---------- Footer ---------- */

.wp-block-social-links.has-visible-labels .wp-social-link a {
	color: var(--wp--preset--color--contrast, #f4f1ec);
	font-size: 14px;
	padding-block: 12px;
}

/* Phone menu overlay: padded, left-aligned, big display type. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: 24px;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	gap: 8px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-family: var(--byg-display);
	font-size: 44px;
	line-height: 1.1;
	text-transform: uppercase;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 72px;
}