/**
 * Peregrine for WordPress — atomic components stylesheet.
 *
 * Visual primitives that compose into a product card: tier shell, specs
 * tiles + feature limits, price + interval, plan badge ("Popular"),
 * buy-button CTA, grid products container, cycle filter tabs.
 *
 * Sits inside @layer peregrine-base. Depends on `peregrine-base-tokens`
 * (--pk-* variables); the WP enqueue chain wires that ordering.
 *
 * @package Peregrine\WordPress
 */

@layer peregrine-base {

	/* ── PRODUCT CARD — structural baseline ─────────────────────── */
	.peregrine-tier {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--pk-space-2);
		padding: var(--pk-space-3);
		background: var(--pk-surface);
		border: 1px solid var(--pk-border);
		border-radius: var(--pk-radius-lg);
		color: var(--pk-text);
		container-type: inline-size;
	}

	.peregrine-tier__product-header {
		display: flex;
		align-items: center;
		gap: var(--pk-space-2);
	}

	.peregrine-tier__product-name {
		font-size: 1.25rem;
		font-weight: 700;
		margin: 0;
		color: inherit;
		overflow-wrap: break-word;
	}

	.peregrine-tier__product-name a {
		color: inherit;
		text-decoration: none;
	}

	/* ── SPECS (tile + inline) ──────────────────────────────────── */
	.peregrine-tier__specs--primary {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--pk-space-1);
	}

	.peregrine-tier__spec {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.125rem;
		padding: var(--pk-space-1);
		background: var(--pk-surface-2);
		border-radius: var(--pk-radius-sm);
		text-align: center;
	}

	.peregrine-tier__spec-value {
		font-weight: 800;
		font-size: clamp(0.875rem, 1.5cqi + 0.55rem, 1.0625rem);
		line-height: 1.15;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
		text-wrap: balance;
	}

	.peregrine-tier__spec-label {
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		opacity: 0.7;
	}

	.peregrine-tier__feature-limits {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 0.875rem;
		font-size: 0.8125rem;
		opacity: 0.85;
	}

	.peregrine-tier__feature-limit {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
	}

	/* ── PRICE + INTERVAL ───────────────────────────────────────── */
	.peregrine-tier__price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.375rem;
		font-size: 1.5rem;
		font-weight: 700;
	}

	.peregrine-tier__price-interval {
		font-size: 0.875rem;
		font-weight: 500;
		opacity: 0.7;
	}

	/* ── PLAN BADGE (Popular) ───────────────────────────────────── */
	.peregrine-tier__badge {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.3125rem 0.875rem;
		border-radius: var(--pk-radius-pill);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		background: var(--pk-accent);
		color: var(--pk-accent-on);
		white-space: nowrap;
	}

	/* ── CTA BUY BUTTON ─────────────────────────────────────────── */
	.peregrine-buy-button__btn,
	.peregrine-tier__cta {
		display: inline-block;
		padding: 0.75rem 1.5rem;
		border: none;
		border-radius: var(--pk-radius);
		background: var(--pk-accent);
		color: var(--pk-accent-on);
		font-family: inherit;
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
		transition: opacity 150ms ease, transform 150ms ease;
		text-decoration: none;
	}

	.peregrine-buy-button__btn:hover,
	.peregrine-tier__cta:hover {
		opacity: 0.9;
		transform: translateY(-1px);
	}

	/* ── GRID PRODUCTS CONTAINER ────────────────────────────────── */
	.peregrine-products-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--pk-space-3);
	}

	/* ── CYCLE FILTER TABS ──────────────────────────────────────── */
	.peregrine-cycle-filter {
		display: flex;
		justify-content: center;
		margin: 0 0 var(--pk-space-3);
	}

	.peregrine-cycle-filter__rail {
		display: inline-flex;
		gap: 0.25rem;
		padding: 0.3125rem;
		border-radius: var(--pk-radius-pill);
		background: var(--pk-surface);
		border: 1px solid var(--pk-border);
	}

	.peregrine-cycle-filter__btn {
		padding: 0.5rem 1.25rem;
		border: none;
		background: transparent;
		color: inherit;
		font-weight: 600;
		font-size: 0.875rem;
		border-radius: var(--pk-radius-pill);
		cursor: pointer;
		transition: background 150ms ease;
	}

	.peregrine-cycle-filter__btn:hover {
		background: var(--pk-surface-2);
	}

	.peregrine-cycle-filter__btn.is-active {
		background: var(--pk-accent);
		color: var(--pk-accent-on);
	}

}