/**
 * Contact channels block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 *
 * Mobile-first, and sized by CONTAINER queries rather than viewport ones: with
 * meta boxes present WordPress renders a non-iframed editor, where a media query
 * sees the browser window while the canvas is only ~640px wide.
 *
 * Breakpoints keep the theme's steps: 782px (the WordPress split, cards go
 * two-up) and 1025px (the orbital layout, where the connectors finally make
 * sense because the cards sit in the four corners).
 *
 * Some selectors below repeat the block root — `.sws-contact-channels .sws-…` —
 * which is deliberate, not a slip. css/content.css normalises core-block content
 * at `:is(.site-main, .editor-styles-wrapper) :is(h2, h3, p, ul)` (0-1-1), which
 * outranks a single block class: without the repeat a card title would render at
 * the core heading size and the card list would pick up a list indent. Drop it if
 * content.css ever stops reaching inside sws-theme sections.
 */

.sws-contact-channels {
	--sws-contact-channels-max: 77.5rem; /* 1240px */
	--sws-contact-channels-surface: rgba(17, 21, 31, 0.9);
	--sws-contact-channels-border: rgba(255, 255, 255, 0.06);
	--sws-contact-channels-text-dim: #8b8b9a;
	--sws-contact-channels-text-muted: #c7c7d4;
	--sws-contact-channels-heading-gradient: linear-gradient(90deg, #c4b6ff 0%, #8b5cff 45%, var(--wp--preset--color--accent-cyan, #00d4ff) 100%);

	/* Corner accents, in the order the cards are placed. */
	--sws-contact-channels-accent-violet: #8b5cff;
	--sws-contact-channels-accent-cyan: var(--wp--preset--color--accent-cyan, #00d4ff);
	--sws-contact-channels-accent-indigo: #6a6cff;
	--sws-contact-channels-accent-blue: #3e9bff;

	--sws-contact-channels-app-bg: linear-gradient(120deg, rgba(106, 0, 255, 0.3), rgba(15, 18, 28, 0.5));
	--sws-contact-channels-app-border: rgba(120, 70, 255, 0.2);
	--sws-contact-channels-card-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);

	position: relative;
	container-type: inline-size;
	container-name: sws-contact-channels;

	/*
	 * No responsive declaration belongs on this element: it is the query
	 * container, and a container query cannot style its own container. Every
	 * breakpoint override below targets a descendant.
	 */
}

.sws-contact-channels__inner {
	/*
	 * Hub diameter, and the one number the whole composition is built from.
	 * Declared here rather than on the root because cqw on the container itself
	 * would resolve against an OUTER container, not this block.
	 */
	--sws-contact-channels-hub: clamp(6.5rem, 22cqw, 10.5rem); /* ... 168px */

	max-width: var(--sws-contact-channels-max);
	margin: 0 auto;
	padding: clamp(2rem, 6cqw, 5rem) clamp(1.25rem, 6cqw, 6rem) clamp(2rem, 4cqw, 3.75rem);
}

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

.sws-contact-channels__header {
	max-width: 41.25rem; /* 660px */
	margin: 0 auto clamp(1.5rem, 4cqw, 2.5rem);
	text-align: center;
}

.sws-contact-channels .sws-contact-channels__heading {
	margin: 0 0 0.75rem;
	font-size: clamp(1.625rem, 3.8cqw, 2.375rem); /* up to 38px */
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.021em;
	text-wrap: balance;
}

.sws-contact-channels__heading-accent {
	background: var(--sws-contact-channels-heading-gradient);
}

/*
 * Gradient text only where it can actually be clipped: without the guard an
 * engine without background-clip would paint transparent text on a gradient box.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {

	.sws-contact-channels__heading-accent {
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.sws-contact-channels .sws-contact-channels__text {
	max-width: 35rem; /* 560px */
	margin: 0 auto;
	color: var(--sws-contact-channels-text-dim);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Stage
--------------------------------------------- */

/*
 * Base layout: hub on top, channels as a plain column under it. The connector
 * geometry only holds once the cards sit in the four corners, so the drawing is
 * not rendered at all here.
 */
.sws-contact-channels__stage {
	display: grid;
	gap: 1rem;
}

.sws-contact-channels__links {
	display: none;
}

/* Hub
--------------------------------------------- */

.sws-contact-channels__hub {
	position: relative;
	display: block;
	flex: none;
	justify-self: center;
	width: var(--sws-contact-channels-hub);
	height: var(--sws-contact-channels-hub);
	margin-bottom: 0.5rem;
}

/*
 * Every ring is inset in PERCENT of the hub box, so the whole thing scales with
 * --sws-contact-channels-hub and no second set of numbers has to be kept in step.
 */
.sws-contact-channels__hub-halo,
.sws-contact-channels__hub-dashed,
.sws-contact-channels__hub-ring,
.sws-contact-channels__hub-core {
	position: absolute;
	display: block;
	border-radius: 50%;
}

.sws-contact-channels__hub-halo {
	inset: -30%;
	background: radial-gradient(closest-side, rgba(106, 0, 255, 0.4), transparent 72%);
	animation: sws-contact-channels-pulse 4s ease-in-out infinite;
}

.sws-contact-channels__hub-dashed {
	inset: -6%;
	border: 1px dashed rgba(139, 92, 255, 0.25);
	animation: sws-contact-channels-spin 32s linear infinite;
}

.sws-contact-channels__hub-ring {
	inset: 10.7%;
	border: 1px solid rgba(139, 92, 255, 0.3);
}

.sws-contact-channels__hub-core {
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 23.8%;
	background: linear-gradient(135deg, rgba(106, 0, 255, 0.6), rgba(0, 212, 255, 0.32));
	box-shadow: 0 0 2.875rem rgba(106, 0, 255, 0.6), inset 0 0 1.375rem rgba(0, 212, 255, 0.3);
}

.sws-contact-channels__media--mark {
	display: block;
	width: 62%;
}

/* Descendant selector: the optimiser may wrap the tag in <picture>. */
.sws-contact-channels__media--mark img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 0.75rem rgba(120, 70, 255, 0.7));
}

@keyframes sws-contact-channels-pulse {

	0%,
	100% {
		opacity: 0.75;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.06);
	}
}

@keyframes sws-contact-channels-spin {

	to {
		transform: rotate(360deg);
	}
}

/* Connectors
--------------------------------------------- */

.sws-contact-channels__orbit {
	fill: none;
	stroke: rgba(139, 92, 255, 0.16);
	stroke-width: 1;
}

.sws-contact-channels__orbit--dashed {
	stroke-dasharray: 2 8;
	stroke: rgba(139, 92, 255, 0.22);
}

.sws-contact-channels__link-line {
	fill: none;
	stroke-width: 1.5;
}

.sws-contact-channels__link-line--a {
	stroke: url("#sws-contact-channels-line-a");
}

.sws-contact-channels__link-line--b {
	stroke: url("#sws-contact-channels-line-b");
}

/*
 * The spark is a short dash travelling along the path. pathLength="100" in the
 * markup normalises every path, so one dasharray and one keyframe serve all four
 * and the stagger is nothing but a negative delay.
 */
.sws-contact-channels__link-spark {
	fill: none;
	stroke: #c9b6ff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 10 90;
	animation: sws-contact-channels-travel 2.6s linear infinite;
}

.sws-contact-channels__link-spark--2,
.sws-contact-channels__link-spark--4 {
	stroke: #9fe8ff;
}

.sws-contact-channels__link-spark--2 {
	animation-delay: -0.65s;
}

.sws-contact-channels__link-spark--3 {
	animation-delay: -1.3s;
}

.sws-contact-channels__link-spark--4 {
	animation-delay: -1.95s;
}

@keyframes sws-contact-channels-travel {

	from {
		stroke-dashoffset: 100;
	}

	to {
		stroke-dashoffset: 0;
	}
}

.sws-contact-channels__link-node {
	stroke-width: 1.5;
	fill: rgba(10, 13, 20, 0.9);
}

.sws-contact-channels__link-node--1 {
	stroke: var(--sws-contact-channels-accent-violet);
}

.sws-contact-channels__link-node--2 {
	stroke: var(--sws-contact-channels-accent-cyan);
}

.sws-contact-channels__link-node--3 {
	stroke: var(--sws-contact-channels-accent-indigo);
}

.sws-contact-channels__link-node--4 {
	stroke: var(--sws-contact-channels-accent-blue);
}

/* Channel cards
--------------------------------------------- */

.sws-contact-channels .sws-contact-channels__cards {
	display: grid;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: inherit;
	list-style: none;
}

/*
 * Every accent is spelled out rather than derived with color-mix(): the rest of
 * the theme states its tints literally (see blocks/bas/style.css) and the values
 * below are the mockup's own, corner by corner — including the gradient angle,
 * which points the tint at the hub from whichever side the card sits on.
 */
.sws-contact-channels__card {
	--sws-contact-channels-card-accent: var(--sws-contact-channels-accent-violet);
	--sws-contact-channels-card-border: rgba(139, 92, 255, 0.3);
	--sws-contact-channels-card-border-hover: rgba(139, 92, 255, 0.6);
	--sws-contact-channels-card-tint: linear-gradient(150deg, rgba(139, 92, 255, 0.16), transparent 62%);
	--sws-contact-channels-card-glow: rgba(139, 92, 255, 0.25);
	--sws-contact-channels-card-icon-shadow: rgba(139, 92, 255, 0.35);
	--sws-contact-channels-card-rule: rgba(139, 92, 255, 0.35);

	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.4cqw, 1.625rem) clamp(1.25rem, 2.6cqw, 1.75rem);
	border: 1px solid var(--sws-contact-channels-card-border);
	border-radius: 1.375rem; /* 22px */
	background-color: var(--sws-contact-channels-surface);
	background-image: var(--sws-contact-channels-card-tint);
	box-shadow: var(--sws-contact-channels-card-shadow);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/*
 * The blur is a progressive extra: without the guard a browser that ignores the
 * property still gets the translucent surface, which is why the background-color
 * above is not fully transparent.
 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.sws-contact-channels__card {
		-webkit-backdrop-filter: blur(0.5rem);
		backdrop-filter: blur(0.5rem);
	}
}

.sws-contact-channels__card:hover,
.sws-contact-channels__card:focus-within {
	transform: translateY(-0.25rem);
	border-color: var(--sws-contact-channels-card-border-hover);
	box-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.5), 0 0 2.5rem var(--sws-contact-channels-card-glow);
}

.sws-contact-channels__card--cyan {
	--sws-contact-channels-card-accent: var(--sws-contact-channels-accent-cyan);
	--sws-contact-channels-card-border: rgba(0, 212, 255, 0.3);
	--sws-contact-channels-card-border-hover: rgba(0, 212, 255, 0.6);
	--sws-contact-channels-card-tint: linear-gradient(210deg, rgba(0, 212, 255, 0.14), transparent 62%);
	--sws-contact-channels-card-glow: rgba(0, 212, 255, 0.25);
	--sws-contact-channels-card-icon-shadow: rgba(0, 212, 255, 0.35);
	--sws-contact-channels-card-rule: rgba(0, 212, 255, 0.35);
}

.sws-contact-channels__card--indigo {
	--sws-contact-channels-card-accent: var(--sws-contact-channels-accent-indigo);
	--sws-contact-channels-card-border: rgba(106, 108, 255, 0.3);
	--sws-contact-channels-card-border-hover: rgba(106, 108, 255, 0.6);
	--sws-contact-channels-card-tint: linear-gradient(30deg, rgba(106, 108, 255, 0.14), transparent 62%);
	--sws-contact-channels-card-glow: rgba(106, 108, 255, 0.25);
	--sws-contact-channels-card-icon-shadow: rgba(106, 108, 255, 0.35);
	--sws-contact-channels-card-rule: rgba(106, 108, 255, 0.35);
}

.sws-contact-channels__card--blue {
	--sws-contact-channels-card-accent: var(--sws-contact-channels-accent-blue);
	--sws-contact-channels-card-border: rgba(62, 155, 255, 0.3);
	--sws-contact-channels-card-border-hover: rgba(62, 155, 255, 0.6);
	--sws-contact-channels-card-tint: linear-gradient(330deg, rgba(62, 155, 255, 0.14), transparent 62%);
	--sws-contact-channels-card-glow: rgba(62, 155, 255, 0.25);
	--sws-contact-channels-card-icon-shadow: rgba(62, 155, 255, 0.35);
	--sws-contact-channels-card-rule: rgba(62, 155, 255, 0.35);
}

.sws-contact-channels__card-head {
	display: flex;
	gap: 1rem;
	align-items: flex-start;

	/*
	 * The gap above the rule lives here rather than on the rule itself: the rule
	 * carries margin-top: auto, and auto has no floor — on a card whose text
	 * already fills the row it would collapse to nothing.
	 */
	padding-bottom: 1.125rem;
}

.sws-contact-channels__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.375rem; /* 54px */
	height: 3.375rem;
	border-radius: 1rem;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-purple, #6a00ff), var(--sws-contact-channels-card-accent));
	box-shadow: 0 0.5rem 1.25rem var(--sws-contact-channels-card-icon-shadow);
	color: #fff;
}

.sws-contact-channels__card-body {
	min-width: 0;
}

.sws-contact-channels .sws-contact-channels__card-title {
	margin: 0 0 0.25rem;
	font-size: 1.1875rem; /* 19px */
	font-weight: 800;
	line-height: 1.2;
}

.sws-contact-channels .sws-contact-channels__card-value {
	margin: 0 0 0.25rem;
	color: var(--sws-contact-channels-text-muted);
	font-size: 0.84375rem; /* 13.5px */
	line-height: 1.4;

	/* The grid tracks are minmax(0, …): a long address has to wrap, not overflow. */
	overflow-wrap: anywhere;
}

.sws-contact-channels .sws-contact-channels__card-caption {
	margin: 0;
	color: var(--sws-contact-channels-text-dim);
	font-size: 0.75rem;
	line-height: 1.45;
}

.sws-contact-channels__card-rule {
	display: block;
	height: 1px;

	/*
	 * auto on the top absorbs the free space a stretched card creates, so the
	 * rule and the link under it line up across the row however tall the cards
	 * turn out. The minimum gap comes from the head's padding above.
	 */
	margin: auto 0 0.875rem;
	background: linear-gradient(90deg, var(--sws-contact-channels-card-rule), transparent);
}

.sws-contact-channels__card-link {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	align-self: flex-start;
	color: var(--sws-contact-channels-card-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	transition: gap 0.15s ease;
}

.sws-contact-channels__card-link:hover,
.sws-contact-channels__card-link:focus-visible {
	gap: 0.6875rem;
	color: var(--sws-contact-channels-card-accent);
}

.sws-contact-channels__arrow {
	flex: none;
}

/* App promo strip
--------------------------------------------- */

.sws-contact-channels__app {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: center;
	margin-top: clamp(1.5rem, 3cqw, 2.5rem);
	padding: clamp(1.25rem, 2.5cqw, 1.25rem) clamp(1.25rem, 3cqw, 2rem);
	border: 1px solid var(--sws-contact-channels-app-border);
	border-radius: 1.125rem;
	background: var(--sws-contact-channels-app-bg);
	text-align: center;
}

.sws-contact-channels__media--app {
	flex: none;
	width: 100%;
	max-width: 14.375rem; /* 230px */
}

/*
 * Descendant selector: the optimiser may wrap the tag in <picture>.
 *
 * The artwork carries its own alpha (see brand/README.md). The design's
 * mix-blend-mode composite is deliberately NOT reproduced: `container-type` on
 * the root computes to `contain: layout style inline-size`, which makes the
 * element a stacking context and isolates the blending group, so `screen` would
 * fall back to an opaque dark rectangle.
 */
.sws-contact-channels__media--app img {
	display: block;
	width: 100%;
	height: auto;
}

.sws-contact-channels .sws-contact-channels__app-heading {
	margin: 0 0 0.5rem;
	font-size: 1.1875rem; /* 19px */
	font-weight: 800;
	line-height: 1.25;
}

.sws-contact-channels .sws-contact-channels__app-text {
	margin: 0 0 1rem;
	color: #b9b3d0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.sws-contact-channels .sws-contact-channels__stores {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	line-height: inherit;
	list-style: none;
}

.sws-contact-channels__store {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.4375rem 0.8125rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.625rem;
	background-color: #11151f;
	color: var(--wp--preset--color--contrast, #f2f2f6);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.sws-contact-channels__store:hover,
.sws-contact-channels__store:focus-visible {
	border-color: rgba(139, 92, 255, 0.55);
	color: var(--wp--preset--color--contrast, #f2f2f6);
}

.sws-contact-channels__store-mark {
	flex: none;
}

.sws-contact-channels__store-text {
	display: block;
	line-height: 1.15;
	text-align: left;
	white-space: nowrap;
}

.sws-contact-channels__store-caption {
	display: block;
	color: #9a9aab;
	font-size: 0.5rem;
}

.sws-contact-channels__store-name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
}

/* Reduced motion
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sws-contact-channels__hub-halo,
	.sws-contact-channels__hub-dashed,
	.sws-contact-channels__link-spark {
		animation: none;
	}

	/* Without the travel the dash would freeze mid-path and read as a defect. */
	.sws-contact-channels__link-spark {
		stroke-dasharray: none;
		opacity: 0.35;
	}

	.sws-contact-channels__card,
	.sws-contact-channels__card-link,
	.sws-contact-channels__store {
		transition: none;
	}

	.sws-contact-channels__card:hover,
	.sws-contact-channels__card:focus-within {
		transform: none;
	}
}

/* 782px and up
--------------------------------------------- */

@container sws-contact-channels (min-width: 782px) {

	.sws-contact-channels .sws-contact-channels__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sws-contact-channels__app {
		flex-direction: row;
		gap: 1.25rem;
		text-align: left;
	}

	.sws-contact-channels__stores {
		justify-content: flex-start;
	}
}

/* 1025px and up — the orbital layout
--------------------------------------------- */

@container sws-contact-channels (min-width: 1025px) {

	/*
	 * The middle track is derived from the hub rather than fixed in px: a fixed
	 * track beside 1fr would starve the side columns as the rail narrows. At the
	 * 1240px rail it resolves to ~370px, leaving ~435px a side — the mockup's
	 * min(41%, 430px).
	 */
	.sws-contact-channels__stage {
		grid-template-columns: minmax(0, 1fr) calc(var(--sws-contact-channels-hub) * 2.2) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		align-items: center;
		column-gap: 0;
		row-gap: clamp(1.5rem, 4cqw, 3.5rem);
	}

	/* The list box steps aside so its items can be placed on the stage grid. */
	.sws-contact-channels .sws-contact-channels__cards {
		display: contents;
	}

	.sws-contact-channels__hub {
		z-index: 1;
		grid-column: 2;
		grid-row: 1 / -1;
		justify-self: center;
		align-self: center;
		margin-bottom: 0;
	}

	/*
	 * The drawing fills exactly the middle column, which is why its viewBox can
	 * treat x = 0 as the right edge of the left cards without knowing the rail.
	 */
	.sws-contact-channels__links {
		display: block;
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		justify-self: stretch;
		width: 100%;
		height: 100%;
	}

	.sws-contact-channels__card:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.sws-contact-channels__card:nth-child(2) {
		grid-column: 3;
		grid-row: 1;
	}

	.sws-contact-channels__card:nth-child(3) {
		grid-column: 1;
		grid-row: 2;
	}

	.sws-contact-channels__card:nth-child(4) {
		grid-column: 3;
		grid-row: 2;
	}
}