/**
 * TechBBQ Tickets Hero — page hero with a ticket card or image in the aside column.
 *
 * The widget renders the page-hero DOM, so page-hero.css owns the orb, the
 * typography and the vertical rhythm. This file only adds the second column and
 * the hero-card teaser sizing.
 *
 * Breakpoints match page-hero.css: 0–767, 768–1023, 1024–1199, 1200+.
 * The aside only becomes a column at 1200px, because below that a 352px card
 * plus a readable title does not fit side by side.
 */

.techbbq-tickets-hero__row {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-space-4);
	width: 100%;
}

.techbbq-tickets-hero__body {
	min-width: 0;
}

.techbbq-tickets-hero__aside {
	width: 100%;
	min-width: 0;
}

.techbbq-tickets-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--techbbq-radius-md);
	object-fit: cover;
}

/* The card reads its padding, radius and name size from variables declared on
 * .techbbq-ticket-tiers, so the widget wraps it in one. That class is written for
 * a full page section, so it also brings the page background and 72–140px of
 * section padding-bottom, which would paint a block over the hero and leave the
 * card floating above its own bottom edge. Both are cleared here.
 */
.techbbq-tickets-hero__tiers {
	width: 100%;
	padding: 0;
	background-color: transparent;
}

.techbbq-tickets-hero__card {
	width: 100%;
}

/* ── Card surface ─────────────────────────────────────────────
 * A tier card has no fill of its own. In the tiers section it reads as a card
 * because the section behind it is near-black; over the hero gradient there is
 * nothing to separate it, and a coloured tier wash (green especially) turns
 * muddy against the orange. The panel gives the card its own ground.
 */
.techbbq-tickets-hero__card--panel {
	/* One colour drives the whole panel, flat or faded. The widget overrides it
	 * per instance; the alpha steps below stay the same whatever colour it is. */
	--techbbq-tickets-hero-panel: #0b0e11;

	background-color: color-mix(in srgb, var(--techbbq-tickets-hero-panel) 72%, transparent);
	backdrop-filter: blur(8px);
}

/* Without backdrop-filter the translucent fill alone is too weak to separate
 * the card, so it falls back to a near-opaque one. */
@supports not (backdrop-filter: blur(8px)) {
	.techbbq-tickets-hero__card--panel {
		background-color: color-mix(in srgb, var(--techbbq-tickets-hero-panel) 92%, transparent);
	}
}

.techbbq-tickets-hero__card--plain {
	--techbbq-ticket-tiers-card-hover-bg: none;
	--techbbq-ticket-tiers-card-hover-border-color: rgb(255 255 255 / 18%);
}

/* Fade: the panel dissolves downward instead of ending on a hard edge, so the
 * card sits in the hero rather than on top of it. The panel moves from
 * background-color to background-image because only a gradient can carry the
 * fade, and the blur goes with it: backdrop-filter applies evenly to the whole
 * box, so a faded tint over an unfaded blur reads as a smudge at the bottom.
 */
.techbbq-tickets-hero__card--fade {
	background-color: transparent;

	/* These two are load-bearing, not tidying. The card carries a 2px transparent
	 * border, and a background defaults to background-origin: padding-box with
	 * background-clip: border-box — so the gradient is sized to the padding box
	 * and then REPEATS to cover the border strip, redrawing its darkest stop as a
	 * 2px line along the bottom edge. That line is the one you can see under a
	 * faded card. Sizing the gradient to the border box and forbidding the repeat
	 * removes it. */
	background-origin: border-box;
	background-repeat: no-repeat;

	/* Five stops, not three. A short ramp reads as a hard edge rather than a fade:
	 * at three stops the last 20% of a 240px landscape card did all the work. */
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--techbbq-tickets-hero-panel) 90%, transparent) 0%,
		color-mix(in srgb, var(--techbbq-tickets-hero-panel) 84%, transparent) 34%,
		color-mix(in srgb, var(--techbbq-tickets-hero-panel) 56%, transparent) 64%,
		color-mix(in srgb, var(--techbbq-tickets-hero-panel) 18%, transparent) 86%,
		transparent 100%
	);
	backdrop-filter: none;
}

/* The tier wash sits on ::before above that gradient and has its own fade, so
 * the two dissolve together rather than leaving a visible colour band. */
.techbbq-tickets-hero__card--fade::after {
	display: none;
}

/* ── Landscape card ───────────────────────────────────────────
 * The portrait card is a tall column: name, price, button, feature list. The
 * landscape one is a wide block that trades height for width — badge flat across
 * the top, then price and button on one line — for heroes where the card is a
 * pointer to the tiers below rather than a spec sheet.
 */
@media (min-width: 768px) {
	/* card-pre-cta only exists to group the head and the meta, so it is dissolved
	 * and its children become grid items of the card itself. */
	.techbbq-tickets-hero--landscape .techbbq-ticket-tiers__card-pre-cta {
		display: contents;
	}

	.techbbq-tickets-hero--landscape .techbbq-tickets-hero__card {
		display: grid;
		grid-template-areas:
			"head head"
			"meta cta";
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--techbbq-space-4);
		row-gap: var(--techbbq-space-3);
		align-items: end;
	}

	.techbbq-tickets-hero--landscape .techbbq-ticket-tiers__card-top {
		grid-area: head;
	}

	.techbbq-tickets-hero--landscape .techbbq-ticket-tiers__card-meta {
		grid-area: meta;
	}

	.techbbq-tickets-hero--landscape .techbbq-ticket-tiers__card-button {
		grid-area: cta;
		width: auto;
		white-space: nowrap;
	}

	.techbbq-tickets-hero--landscape .techbbq-ticket-tiers__features {
		grid-column: 1 / -1;
	}

	/* A vertical ribbon on a short wide card is a splinter. With this much width
	 * the badge fits back on the tag row as a flat pill, which is what the theme
	 * draws everywhere else — only the colours stay overridden for contrast.
	 *
	 * The :has() is not decoration. ticket-tiers.css reserves 40px of head padding
	 * for the ribbon at specificity (0,3,0); without matching that here the pills
	 * stop 40px short of the button's right edge instead of lining up with it.
	 */
	.techbbq-tickets-hero--landscape
		.techbbq-ticket-tiers__card:has(.techbbq-ticket-tiers__discount-tag)
		.techbbq-ticket-tiers__card-head {
		padding-right: 0;
	}

	.techbbq-tickets-hero--landscape .techbbq-ticket-tiers__discount-tag {
		position: static;
		width: auto;
		height: 32px;
		padding: 10px 12px;
		border-radius: 8px;
		font-size: var(--techbbq-text-caption-s-size);
		font-weight: 400;
		letter-spacing: 0.12em;
		writing-mode: horizontal-tb;
		clip-path: none;
	}
}

/* ── Card size ────────────────────────────────────────────────
 * Not a transform. Scaling the card would blur the text and leave the hit
 * targets lying about where they are, so each step re-declares the same
 * variables the tiers widget already sizes itself with and the card lays out at
 * the new size natively. Small is whatever the tiers section uses, so it carries
 * no class and no overrides.
 */
.techbbq-tickets-hero__card--medium {
	--techbbq-ticket-tiers-card-padding: var(--techbbq-space-3);
	--techbbq-ticket-tiers-card-radius: 16px;
	--techbbq-ticket-tiers-name-size: 26px;
	--techbbq-ticket-tiers-price-size: 72px;
	--techbbq-ticket-tiers-compare-size: 32px;
}

.techbbq-tickets-hero__card--large {
	--techbbq-ticket-tiers-card-padding: var(--techbbq-space-4);
	--techbbq-ticket-tiers-card-radius: 20px;
	--techbbq-ticket-tiers-name-size: 32px;
	--techbbq-ticket-tiers-price-size: 104px;
	--techbbq-ticket-tiers-compare-size: 40px;
}

@media (max-width: 1023px) {
	/* A 104px price needs a desktop column to sit in. Both steps come down one
	 * notch on tablet rather than overflowing the card. */
	.techbbq-tickets-hero__card--large {
		--techbbq-ticket-tiers-price-size: 72px;
		--techbbq-ticket-tiers-name-size: 26px;
	}
}

@media (max-width: 767px) {
	.techbbq-tickets-hero__card--medium,
	.techbbq-tickets-hero__card--large {
		--techbbq-ticket-tiers-card-padding: var(--techbbq-space-2);
		--techbbq-ticket-tiers-price-size: 48px;
		--techbbq-ticket-tiers-name-size: 22px;
	}
}

/* ── Border shimmer ───────────────────────────────────────────
 * The theme already builds a border ring on ::after: a gradient clipped to the
 * 2px border strip by two masks composited with exclude. It sits at opacity 0
 * until hover. The shimmer reuses that ring exactly and only swaps the gradient
 * for a conic one whose angle is animated, so the highlight travels around the
 * card instead of the ring simply appearing.
 *
 * The angle is a registered custom property because an unregistered one is a
 * string to the animation engine and would jump from 0 to 360 instead of
 * sweeping. Registering it gives it a type, and the browser interpolates it.
 */
@property --techbbq-tickets-hero-shimmer-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.techbbq-tickets-hero__card--shimmer::after {
	display: block;
	opacity: 1;
	background: conic-gradient(
		from var(--techbbq-tickets-hero-shimmer-angle),
		transparent 0%,
		transparent 56%,
		color-mix(in srgb, var(--techbbq-tickets-hero-shimmer) 35%, transparent) 64%,
		var(--techbbq-tickets-hero-shimmer) 72%,
		color-mix(in srgb, var(--techbbq-tickets-hero-shimmer) 35%, transparent) 80%,
		transparent 88%,
		transparent 100%
	);
	animation: techbbq-tickets-hero-shimmer 2s linear infinite;
}

/* A ring drawn at full strength along a bottom edge that has faded out reads as
 * a box around nothing, so on a faded card the ring fades with it.
 *
 * Three layers, not two. The obvious version — fading the second layer of the
 * theme's own two-layer exclude — is wrong: exclude resolves to
 * a1 + a2 - 2·a1·a2, so wherever the fade drops below 1 the card's interior
 * stops being excluded and the conic gradient shows through the middle of the
 * card as a wedge. The fade has to be a separate layer intersected with the
 * finished ring instead: build the ring first (exclude), then cut it down.
 */
.techbbq-tickets-hero__card--shimmer.techbbq-tickets-hero__card--fade::after {
	mask:
		linear-gradient(to bottom, #fff 38%, transparent 94%),
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: intersect, exclude, add;
}

@keyframes techbbq-tickets-hero-shimmer {
	to {
		--techbbq-tickets-hero-shimmer-angle: 360deg;
	}
}

/* Motion is decoration here, so it stops entirely rather than slowing down. The
 * ring stays, holding its colour, so nothing disappears. */
@media (prefers-reduced-motion: reduce) {
	.techbbq-tickets-hero__card--shimmer::after {
		animation: none;
	}
}

/* Below 768px the tiers widget hides every card button and shows a fixed sticky
 * CTA instead. The hero card is a single card with no sticky bar behind it, so
 * without this its only call to action disappears on phones.
 */
@media (max-width: 767px) {
	.techbbq-tickets-hero__card button.techbbq-ticket-tiers__card-button,
	.techbbq-tickets-hero__card tito-button.techbbq-ticket-tiers__card-button,
	.techbbq-tickets-hero__card a.techbbq-ticket-tiers__card-button {
		display: inline-flex;
	}
}

/* ── Desktop with room for two columns (1200+) ───────────────── */
@media (min-width: 1200px) {
	.techbbq-tickets-hero--has-aside .techbbq-tickets-hero__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--techbbq-tickets-hero-aside-width, 352px);
		column-gap: var(--techbbq-space-7);
		align-items: end;
	}

	/* Title stays on the hero's baseline, card sits centred against it. */
	.techbbq-tickets-hero--has-aside .techbbq-tickets-hero__aside {
		align-self: center;
		justify-self: end;
		max-width: var(--techbbq-tickets-hero-aside-width, 352px);
	}
}

/* Stacked, the card reads as a card rather than a full-width panel. */
@media (max-width: 1199px) {
	.techbbq-tickets-hero__aside {
		max-width: 420px;
	}
}