/**
 * Page Sections: Tag cloud.
 *
 * A cluster of pill-shaped tags scattered with intentional irregularity
 * on a coloured panel. Uses brand tokens defined in theme.css.
 */

/* ==========================================================================
   Panel shell
   ========================================================================== */
.ps-tagcloud__panel {
	position: relative;
	border-radius: var(--radius-lg);
	padding: clamp(40px, 5vw, 72px);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.ps-tagcloud__panel--cream { background: var(--cream); color: var(--teal); }
.ps-tagcloud__panel--sand  { background: var(--sand);  color: var(--teal); }
.ps-tagcloud__panel--teal  { background: var(--teal);  color: var(--cream); }

/* ==========================================================================
   Header (eyebrow + heading + intro), centred on top
   ========================================================================== */
.ps-tagcloud__head {
	max-width: 640px;
	margin: 0 auto clamp(28px, 3.5vw, 44px);
	text-align: center;
}
.ps-tagcloud__eyebrow {
	margin: 0 0 10px;
}
.ps-tagcloud__heading {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.15;
}
.ps-tagcloud__intro {
	margin: 0;
	font-size: clamp(.98rem, 1.2vw, 1.05rem);
	line-height: 1.55;
	opacity: .85;
}

/* On teal panel, lift the heading colour. */
.ps-tagcloud__panel--teal .ps-tagcloud__heading { color: var(--cream); }
.ps-tagcloud__panel--teal .ps-tagcloud__eyebrow { color: var(--cream); opacity: .8; }
.ps-tagcloud__panel--teal .ps-tagcloud__intro   { color: var(--cream); opacity: .85; }

/* ==========================================================================
   List
   ========================================================================== */
.ps-tagcloud__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ps-tagcloud__item {
	display: inline-flex;
	max-width: 100%;
	transition: transform .25s ease;
}

/* ==========================================================================
   Pill base
   ========================================================================== */
.ps-tagcloud__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(8px, 1.2vw, 14px) clamp(18px, 2vw, 28px);
	border-radius: 999px;
	font-family: var(--font);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1.5px solid transparent;
	background: transparent;
	color: inherit;
	white-space: nowrap;
	transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ---- Size ---- */
.ps-tagcloud__item--small  .ps-tagcloud__pill { font-size: .85rem; }
.ps-tagcloud__item--medium .ps-tagcloud__pill { font-size: 1rem; }
.ps-tagcloud__item--large  .ps-tagcloud__pill { font-size: 1.15rem; padding-inline: clamp(18px, 2vw, 26px); }

/* ---- Colour variants ---- */
.ps-tagcloud__item--teal .ps-tagcloud__pill {
	background: var(--teal);
	color: var(--cream);
	border-color: var(--teal);
}
.ps-tagcloud__item--red .ps-tagcloud__pill {
	background: var(--red);
	color: #fff;
	border-color: var(--red);
}
.ps-tagcloud__item--green .ps-tagcloud__pill {
	background: var(--green);
	color: #fff;
	border-color: var(--green);
}
.ps-tagcloud__item--plum .ps-tagcloud__pill {
	background: var(--plum);
	color: var(--cream);
	border-color: var(--plum);
}
.ps-tagcloud__item--outline .ps-tagcloud__pill {
	background: transparent;
	color: var(--teal);
	border-color: var(--teal);
}
/* Outline pill on a teal panel: switch outline colour so it's visible. */
.ps-tagcloud__panel--teal .ps-tagcloud__item--outline .ps-tagcloud__pill {
	color: var(--cream);
	border-color: var(--cream);
}

/* ==========================================================================
   Organic scatter — vary rotation by :nth-child so each pill sits
   at a slightly different angle. Combined with size variance this
   reads as a hand-scattered cluster.
   ========================================================================== */
.ps-tagcloud__item:nth-child(1)  { transform: rotate(-3deg); }
.ps-tagcloud__item:nth-child(2)  { transform: rotate(2deg); }
.ps-tagcloud__item:nth-child(3)  { transform: rotate(-1deg); }
.ps-tagcloud__item:nth-child(4)  { transform: rotate(4deg); }
.ps-tagcloud__item:nth-child(5)  { transform: rotate(-2deg); }
.ps-tagcloud__item:nth-child(6)  { transform: rotate(3deg); }
.ps-tagcloud__item:nth-child(7)  { transform: rotate(-4deg); }
.ps-tagcloud__item:nth-child(8)  { transform: rotate(1deg); }
.ps-tagcloud__item:nth-child(9)  { transform: rotate(-2deg); }
.ps-tagcloud__item:nth-child(10) { transform: rotate(3deg); }
.ps-tagcloud__item:nth-child(11) { transform: rotate(-3deg); }
.ps-tagcloud__item:nth-child(12) { transform: rotate(2deg); }
.ps-tagcloud__item:nth-child(13) { transform: rotate(-1deg); }
.ps-tagcloud__item:nth-child(14) { transform: rotate(4deg); }
.ps-tagcloud__item:nth-child(15) { transform: rotate(-3deg); }
.ps-tagcloud__item:nth-child(16) { transform: rotate(1deg); }
.ps-tagcloud__item:nth-child(17) { transform: rotate(-2deg); }
.ps-tagcloud__item:nth-child(18) { transform: rotate(3deg); }
.ps-tagcloud__item:nth-child(19) { transform: rotate(-4deg); }
.ps-tagcloud__item:nth-child(20) { transform: rotate(2deg); }
.ps-tagcloud__item:nth-child(21) { transform: rotate(-1deg); }
.ps-tagcloud__item:nth-child(22) { transform: rotate(3deg); }
.ps-tagcloud__item:nth-child(23) { transform: rotate(-3deg); }
.ps-tagcloud__item:nth-child(24) { transform: rotate(2deg); }

/* ==========================================================================
   Hover — only for linked pills: straighten and gently scale up.
   ========================================================================== */
.ps-tagcloud__item:has(> .ps-tagcloud__pill--link):hover {
	transform: rotate(0) scale(1.03);
}
.ps-tagcloud__pill--link:hover {
	box-shadow: 0 6px 18px rgba(24, 60, 66, .12);
}
.ps-tagcloud__pill--link:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
}
.ps-tagcloud__panel--teal .ps-tagcloud__pill--link:focus-visible {
	outline-color: var(--cream);
}

/* ==========================================================================
   Responsive — calm the rotation amounts on small screens for readability.
   ========================================================================== */
@media (max-width: 600px) {
	.ps-tagcloud__item:nth-child(odd)  { transform: rotate(-1deg); }
	.ps-tagcloud__item:nth-child(even) { transform: rotate(1deg); }
	.ps-tagcloud__list { gap: 10px; }
	.ps-tagcloud__item--large .ps-tagcloud__pill { font-size: 1.2rem; }

	/* Long labels: wrap inside the pill instead of clipping at the panel edge. */
	.ps-tagcloud__pill {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}

	/* Extend the tap area of linked pills to ~40px without changing their look.
	   -5px keeps hit areas inside the 10px flex gap so neighbours don't overlap. */
	.ps-tagcloud__pill--link { position: relative; }
	.ps-tagcloud__pill--link::after {
		content: "";
		position: absolute;
		inset: -5px;
		border-radius: 999px;
	}
}

/* ==========================================================================
   Desktop — more panel padding, larger pill sizes, airier scatter.
   ========================================================================== */
@media (min-width: 1024px) {
	.ps-tagcloud__panel { padding: clamp(44px, 4vw, 64px); }
	.ps-tagcloud__list { gap: 16px 18px; }
	.ps-tagcloud__pill {
		padding: 12px 22px;
	}
	.ps-tagcloud__item--small  .ps-tagcloud__pill { font-size: .85rem; }
	.ps-tagcloud__item--medium .ps-tagcloud__pill { font-size: .98rem; }
	.ps-tagcloud__item--large  .ps-tagcloud__pill { font-size: 1.12rem; padding-inline: 22px; }
	.ps-tagcloud__heading { font-size: clamp(1.7rem, 2.2vw, 2.1rem); }
}

@media (min-width: 1280px) {
	.ps-tagcloud__panel { padding: 64px clamp(48px, 5vw, 80px); }
	.ps-tagcloud__list { gap: 16px 18px; }
	.ps-tagcloud__item--large .ps-tagcloud__pill { font-size: 1.18rem; padding-inline: 24px; }
}

/* ==========================================================================
   Reduced motion — drop the hover transform animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ps-tagcloud__item,
	.ps-tagcloud__pill { transition: none; }
	.ps-tagcloud__item:has(> .ps-tagcloud__pill--link):hover {
		transform: none;
	}
}