/*
 * /dashboard (T-093) — member dashboard surface.
 *
 * Layout philosophy is utility-page, not marketing: no hero photo, no
 * full-bleed bands except the lapsed-renewal banner. Cards use the same
 * `--isjac-shadow-card` + `--isjac-radius-md` as featured-post cards so the
 * visual language stays consistent across the site.
 *
 * State-driven badge color: paid-active = brand-deep; community = brand-mid;
 * lapsed = warning. The Renderer emits the right modifier class per state.
 *
 * Tokens only. No raw hex.
 */

/* ---------- container ----------
 * The :not(.alignwide):not(.alignfull) selector in 30-layout.css has a
 * specificity of (0,2,2) which beats `.entry-content > .isjac-dashboard`
 * (0,2,1) and silently constrains the dashboard to --isjac-content-prose
 * (73ch). Mirror the same :not pattern here so this rule reaches (0,4,1)
 * and wins cleanly. Use --isjac-content-prose-wide (82ch) — wide enough
 * for the 3-up artist-blog and manage grids on desktop, narrow enough to
 * keep the page from sprawling on ultra-wide monitors. */
.entry-content > .isjac-dashboard:not(.alignwide):not(.alignfull) {
	max-width: var(--isjac-content-prose-wide);
	margin-inline: auto;
	padding-inline: var(--isjac-pad-lg);
}

/* Differential spacing rhythm (UX research, 2026-05-02):
 * - hero → event band:        ≈96px (priority break before featured event)
 * - event band → opportunities: ≈80px (still priority)
 * - everything else:          ≈64px (supporting bands tighter)
 *
 * Implementation: default to the supporting-band gap (--isjac-section-md ≈ 64px)
 * and override the two priority breaks with the larger tokens so the rhythm
 * is set by the markup order — no per-section overrides anywhere else.
 * --isjac-section-xl ≈ 96px / --isjac-section-lg ≈ 80px / --isjac-section-md ≈ 64px. */
.entry-content .isjac-dashboard section {
	margin-block: var(--isjac-section-md);
}

.entry-content .isjac-dashboard-hero + .isjac-dashboard-event-band,
.entry-content .isjac-dashboard-hero + .isjac-dashboard-opportunities {
	margin-block-start: var(--isjac-section-xl);
}

.entry-content .isjac-dashboard-event-band + .isjac-dashboard-opportunities {
	margin-block-start: var(--isjac-section-lg);
}

.entry-content .isjac-dashboard-section__header {
	margin-block-end: var(--isjac-pad-lg);
}

/* Sub-section break: any sub-header that follows a sibling inside a
 * dashboard band (e.g. "From the Artist Blog" header following the
 * Live virtual events grid) needs the same vertical breathing room as
 * a top-level section divider. Without this the subheader collides
 * with the bottom of the prior content. */
.entry-content .isjac-dashboard > section > * + .isjac-dashboard-section__header {
	margin-block-start: var(--isjac-section-md);
}

.entry-content .isjac-dashboard-section__header h2 {
	font-size: var(--isjac-font-size-xl);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-ink);
	margin: 0 0 var(--isjac-pad-xs);
	line-height: var(--isjac-line-height-tight);
}

.entry-content .isjac-dashboard-section__header p {
	color: var(--isjac-text-muted);
	font-size: var(--isjac-font-size-base);
	margin: 0;
}

.entry-content .isjac-dashboard-eyebrow {
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--isjac-color-brand-mid);
	margin: 0 0 var(--isjac-pad-xs);
}

/* ---------- §0 lapsed renewal banner (alignfull) ---------- */
.entry-content .isjac-dashboard-lapsed-banner {
	background-color: var(--isjac-color-warning);
	color: var(--isjac-color-paper);
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	padding: var(--isjac-pad-lg) 0;
}

.entry-content .isjac-dashboard-lapsed-banner__inner {
	max-width: var(--isjac-content-constrained, 1140px);
	margin-inline: auto;
	padding-inline: var(--isjac-pad-lg);
}

.entry-content .isjac-dashboard-lapsed-banner h2 {
	color: var(--isjac-color-paper);
	font-size: var(--isjac-font-size-lg);
	margin: 0 0 var(--isjac-pad-xs);
}

.entry-content .isjac-dashboard-lapsed-banner p {
	color: var(--isjac-color-paper);
	margin: 0 0 var(--isjac-pad-md);
}

/* ---------- §1 hero ----------
 * Compact utility hero (UX research, 2026-05-02): pad-lg padding (was pad-xl),
 * h2-sized greeting (was display-sized) — recovers ≈70px above the fold so
 * the featured-event band appears in the first viewport on 1440 desktop. */
/* Single-column hero — tier moved to the eyebrow position above the
 * greeting (was a top-right pill in the old grid layout). The eyebrow
 * carries the credential AND contextualizes the welcome with one read,
 * removing the visual tension between a "label" and a "name". */
.entry-content .isjac-dashboard-hero {
	background-color: var(--isjac-surface-card);
	border: 1px solid var(--isjac-color-rule);
	border-radius: var(--isjac-radius-lg);
	box-shadow: var(--isjac-shadow-card);
	padding: var(--isjac-pad-lg);
}

.entry-content .isjac-dashboard-hero__eyebrow {
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--isjac-pad-xs);
}

/* Tier color swatch on the eyebrow — community + student share brand-mid
 * (both are non-paid tiers), paid is brand-deep, lapsed is the warning
 * color so attention reads correctly even when the renew banner above is
 * dismissed/scrolled-past. */
.entry-content .isjac-dashboard-eyebrow--community,
.entry-content .isjac-dashboard-eyebrow--student   { color: var(--isjac-color-brand-mid); }
.entry-content .isjac-dashboard-eyebrow--paid      { color: var(--isjac-color-brand-deep); }
.entry-content .isjac-dashboard-eyebrow--lapsed    { color: var(--isjac-color-warning); }

.entry-content .isjac-dashboard-hero h1.isjac-dashboard-hero__greeting {
	font-size: var(--isjac-font-size-xl);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-ink);
	margin: 0 0 var(--isjac-pad-xs);
	line-height: var(--isjac-line-height-tight);
}

.entry-content .isjac-dashboard-hero__status {
	color: var(--isjac-text-muted);
	font-size: var(--isjac-font-size-base);
	margin: 0 0 var(--isjac-pad-md);
}

.entry-content .isjac-dashboard-hero__cta { margin: 0; }

/* ---------- §2 opportunities grid + cards ---------- */
.entry-content .isjac-dashboard-opportunities__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--isjac-pad-lg);
	margin-top: var(--isjac-pad-lg);
}
.entry-content .isjac-opp-card--featured + .isjac-dashboard-opportunities__grid,
.entry-content .isjac-opp-card--featured + .isjac-dashboard-opportunities__chips,
.entry-content .isjac-opp-card--featured + .isjac-dashboard-opportunities__list { margin-top: var(--isjac-pad-lg); }

@media (max-width: 960px) {
	.entry-content .isjac-dashboard-opportunities__grid { grid-template-columns: 1fr; }
}

/* Cards across the dashboard share one surface: paper background, brand-rule
 * border, soft shadow, brand radius. Border + shadow together read as a
 * "lifted card" without the heavy outline some nonprofit dashboards default
 * to. The border is visible at <70% display brightness where shadows alone
 * disappear (Sun-on-laptop test). */
.entry-content .isjac-opp-card,
.entry-content .isjac-dashboard-resources__card,
.entry-content .isjac-dashboard-manage__card,
.entry-content .isjac-dashboard-empty {
	border: 1px solid var(--isjac-color-rule);
}

.entry-content .isjac-opp-card {
	background-color: var(--isjac-surface-card);
	border-radius: var(--isjac-radius-md);
	box-shadow: var(--isjac-shadow-card);
	padding: var(--isjac-pad-lg);
	display: flex;
	flex-direction: column;
	gap: var(--isjac-pad-sm);
}

.entry-content .isjac-opp-card__eyebrow {
	display: flex;
	gap: var(--isjac-pad-sm);
	flex-wrap: wrap;
	align-items: center;
	font-size: var(--isjac-font-size-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--isjac-text-muted);
}

.entry-content .isjac-opp-card__elig {
	color: var(--isjac-color-brand-mid);
	font-weight: var(--isjac-font-weight-medium);
}

.entry-content .isjac-opp-card__title {
	font-size: var(--isjac-font-size-lg);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-ink);
	margin: 0;
	line-height: var(--isjac-line-height-tight);
}

.entry-content .isjac-opp-card__lead {
	color: var(--isjac-text-muted);
	font-size: var(--isjac-font-size-base);
	margin: 0;
}

.entry-content .isjac-opp-card__deadline {
	font-size: var(--isjac-font-size-small);
	color: var(--isjac-text-muted);
	margin: 0;
}
.entry-content .isjac-opp-card--closing_soon .isjac-opp-card__deadline {
	color: var(--isjac-color-warning);
	font-weight: var(--isjac-font-weight-medium);
}

/* Action row: button + deadline as one visual unit. Button is the action;
 * deadline sits beside it as context, vertically centered to the button so
 * "Submit · Closes May 6" reads as a single grouped element. */
.entry-content .isjac-opp-card__cta {
	margin: var(--isjac-pad-xs) 0 0;
	display: flex;
	align-items: center;
	gap: var(--isjac-pad-md);
	flex-wrap: wrap;
}

.entry-content .isjac-dashboard-empty {
	background-color: var(--isjac-surface-card);
	border-radius: var(--isjac-radius-md);
	box-shadow: var(--isjac-shadow-card);
	padding: var(--isjac-pad-xl);
	text-align: center;
	color: var(--isjac-text-muted);
}

/* ---------- §3 resources grid ---------- */
.entry-content .isjac-dashboard-resources__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--isjac-pad-lg);
}

/* Two-card variant — Member Directory placeholder removed in Path A.
 * Resources is now event card + Artist Blog teaser. */
.entry-content .isjac-dashboard-resources__grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
	.entry-content .isjac-dashboard-resources__grid--two { grid-template-columns: 1fr; }
}

.entry-content .isjac-dashboard-resources__media {
	margin: 0 0 var(--isjac-pad-sm);
	border-radius: var(--isjac-radius-sm);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--isjac-color-brand-wash);
}

.entry-content .isjac-dashboard-resources__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 960px) {
	.entry-content .isjac-dashboard-resources__grid { grid-template-columns: 1fr; }
}

.entry-content .isjac-dashboard-resources__card {
	background-color: var(--isjac-surface-card);
	border-radius: var(--isjac-radius-md);
	box-shadow: var(--isjac-shadow-card);
	padding: var(--isjac-pad-lg);
	display: flex;
	flex-direction: column;
	gap: var(--isjac-pad-sm);
}

.entry-content .isjac-dashboard-resources__card h3 {
	font-size: var(--isjac-font-size-lg);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-ink);
	margin: 0;
}

.entry-content .isjac-dashboard-resources__card--placeholder {
	opacity: 0.7;
}

.entry-content .isjac-dashboard-jcp-embed {
	aspect-ratio: 16 / 9;
	background-color: var(--isjac-color-ink);
	border-radius: var(--isjac-radius-sm);
	overflow: hidden;
	margin-block-start: var(--isjac-pad-sm);
}

.entry-content .isjac-dashboard-jcp-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.entry-content .isjac-dashboard-jcp-teaser {
	margin-block-start: var(--isjac-pad-sm);
	padding: var(--isjac-pad-md);
	background-color: var(--isjac-color-brand-wash);
	border-radius: var(--isjac-radius-sm);
}

/* ---------- §4 manage cards ---------- */
.entry-content .isjac-dashboard-manage__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--isjac-pad-lg);
}

@media (max-width: 960px) {
	.entry-content .isjac-dashboard-manage__grid { grid-template-columns: 1fr; }
}

/* Card uses flex column so the CTA paragraph can pin to the bottom of
 * each card via `margin-block-start: auto`. Keeps the buttons aligned
 * on a single horizontal axis even when one card's body copy is shorter
 * than another's. */
.entry-content .isjac-dashboard-manage__card {
	background-color: var(--isjac-surface-card);
	border-radius: var(--isjac-radius-md);
	box-shadow: var(--isjac-shadow-card);
	padding: var(--isjac-pad-lg);
	display: flex;
	flex-direction: column;
}

/* Higher-specificity selector + longhand `margin-top`: a theme `p { margin: ... }`
 * shorthand was overriding the logical `margin-block-start: auto`, so the CTA
 * never got pushed to the bottom and cards with longer body text (3 lines vs 2)
 * had visibly lower buttons. */
.entry-content .isjac-dashboard-manage__card .isjac-dashboard-manage__cta {
	margin-top: auto;
	margin-bottom: 0;
}

.entry-content .isjac-dashboard-manage__card h3 {
	font-size: var(--isjac-font-size-base);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-ink);
	margin: 0 0 var(--isjac-pad-xs);
}

.entry-content .isjac-dashboard-manage__card p {
	color: var(--isjac-text-muted);
	font-size: var(--isjac-font-size-small);
	margin: 0 0 var(--isjac-pad-md);
}

/* ---------- §5 footer band ----------
 * Matches the site-footer treatment: brand-deep dark surface, paper text.
 * Renderer adds .isjac-band--invert which painted the surface; here we
 * just establish the band's layout. The Donate button inside picks up
 * the on-dark-hover variant via 40-buttons.css's surface-aware
 * .isjac-band--invert .isjac-btn--secondary:hover rule. */
.entry-content .isjac-dashboard-footer-band {
	background-color: var(--isjac-color-brand-deep);
	color: var(--isjac-color-paper);
	border-radius: var(--isjac-radius-lg);
	padding: var(--isjac-pad-xl);
	text-align: center;
}

.entry-content .isjac-dashboard-footer-band h2 {
	font-size: var(--isjac-font-size-lg);
	margin: 0 0 var(--isjac-pad-xs);
	color: var(--isjac-color-paper);
}

.entry-content .isjac-dashboard-footer-band p {
	color: color-mix(in srgb, var(--isjac-color-paper) 85%, transparent);
	margin: 0 0 var(--isjac-pad-md);
}

/* ---------- §1.5 featured-event band ----------
 * Sits between hero and opportunities. Brand-wash surface so it reads as
 * a distinct band without competing with the white opportunity cards
 * below. Disappears entirely (Renderer returns '') when no upcoming
 * event exists. */
/* Image left, content right when the event has a featured image. The
 * media link spans the band's full height with object-fit:cover so the
 * image always fills its slot. Falls back to single-column on mobile. */
.entry-content .isjac-dashboard-event-band {
	background-color: var(--isjac-color-brand-wash);
	border: 1px solid var(--isjac-color-rule);
	border-radius: var(--isjac-radius-lg);
	box-shadow: var(--isjac-shadow-card);
	padding: var(--isjac-pad-lg) var(--isjac-pad-xl);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--isjac-pad-lg);
	align-items: center;
}

.entry-content .isjac-dashboard-event-band:has(.isjac-dashboard-event-band__media) {
	grid-template-columns: minmax(180px, 38%) minmax(0, 1fr);
}

.entry-content .isjac-dashboard-event-band__media {
	display: block;
	border-radius: var(--isjac-radius-md);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--isjac-color-brand-deep);
}

.entry-content .isjac-dashboard-event-band__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.entry-content .isjac-dashboard-event-band__body {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-pad-xs);
}

.entry-content .isjac-dashboard-event-band__excerpt {
	color: var(--isjac-color-ink);
	font-size: var(--isjac-font-size-base);
	margin: 0;
}

@media (max-width: 768px) {
	.entry-content .isjac-dashboard-event-band:has(.isjac-dashboard-event-band__media) {
		grid-template-columns: 1fr;
	}
}

.entry-content .isjac-dashboard-event-band__eyebrow {
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--isjac-color-brand-deep);
	margin: 0;
}

.entry-content .isjac-dashboard-event-band__title {
	font-size: var(--isjac-font-size-xl);
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-ink);
	margin: 0;
	line-height: var(--isjac-line-height-tight);
}

.entry-content .isjac-dashboard-event-band__meta {
	color: var(--isjac-text-muted);
	font-size: var(--isjac-font-size-base);
	margin: 0;
}

/* Dotted underline hints "this is interactive" without competing with the
 * surrounding muted meta line. JS swaps the text to the visitor's local TZ
 * on hover. */
.entry-content .isjac-dashboard-event-band__time {
	cursor: help;
	border-bottom: 1px dotted var(--isjac-text-muted);
	padding-bottom: 1px;
}

.entry-content .isjac-dashboard-event-band__cta {
	margin: var(--isjac-pad-sm) 0 0;
	text-align: left;
}

/* ---------- featured opportunity card + closing-soon ----------
 * The featured card spans the grid (or the full container in list mode)
 * and gets a slightly richer treatment so it reads as the soonest deadline,
 * not a peer of the rest. */
.entry-content .isjac-opp-card--featured {
	border-color: var(--isjac-color-brand-mid);
	border-width: 2px;
}

.entry-content .isjac-opp-card__closing {
	display: inline-flex;
	align-items: center;
	background-color: var(--isjac-color-warning);
	color: var(--isjac-color-paper);
	padding: var(--isjac-space-1) var(--isjac-space-3);
	border-radius: var(--isjac-radius-sm);
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.entry-content .isjac-opp-card--closing_soon {
	border-color: var(--isjac-color-warning);
}

/* ---------- compact opportunity row (5+ items) ---------- */
.entry-content .isjac-dashboard-opportunities__list {
	list-style: none;
	margin: var(--isjac-pad-md) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--isjac-pad-sm);
}

.entry-content .isjac-opp-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) auto auto auto;
	gap: var(--isjac-pad-md);
	align-items: center;
	background-color: var(--isjac-surface-card);
	border: 1px solid var(--isjac-color-rule);
	border-radius: var(--isjac-radius-md);
	padding: var(--isjac-pad-md) var(--isjac-pad-lg);
}

.entry-content .isjac-opp-row--closing_soon {
	border-color: var(--isjac-color-warning);
}

.entry-content .isjac-opp-row__title {
	font-weight: var(--isjac-font-weight-bold);
	color: var(--isjac-color-ink);
}

.entry-content .isjac-opp-row__elig,
.entry-content .isjac-opp-row__deadline {
	font-size: var(--isjac-font-size-small);
	color: var(--isjac-text-muted);
}

.entry-content .isjac-opp-row--closing_soon .isjac-opp-row__deadline {
	color: var(--isjac-color-warning);
	font-weight: var(--isjac-font-weight-medium);
}

.entry-content .isjac-opp-row__cta .isjac-btn {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.entry-content .isjac-opp-row {
		grid-template-columns: 1fr;
		gap: var(--isjac-pad-xs);
	}
}

/* ---------- filter chips (6+ items) ---------- */
.entry-content .isjac-dashboard-opportunities__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isjac-pad-xs);
	margin: var(--isjac-pad-md) 0 0;
}

.entry-content .isjac-chip {
	background-color: var(--isjac-surface-card);
	border: 1px solid var(--isjac-color-rule);
	border-radius: 9999px;
	padding: var(--isjac-pad-xs) var(--isjac-pad-md);
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-medium);
	color: var(--isjac-text-muted);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.entry-content .isjac-chip:hover {
	background-color: var(--isjac-color-brand-wash);
	color: var(--isjac-color-ink);
}

.entry-content .isjac-chip--active {
	background-color: var(--isjac-color-brand-deep);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-brand-deep);
}

/* ---------- §2 paid-only gate overlay ----------
 * Cards whose KEY_ELIGIBILITY excludes the current user (typically
 * 'paid_only' for Community/anonymous) keep their full markup but render
 * with the body blurred and an overlay that names the access tier and
 * routes to the upgrade page. Visible-but-blurred (vs hidden) lets the
 * user see what they're missing — better conversion signal than absence. */
.entry-content .isjac-opp-card--gated {
	position: relative;
	overflow: hidden;
}

.entry-content .isjac-opp-card--gated > :not(.isjac-opp-card__eyebrow):not(.isjac-opp-card__title):not(.isjac-opp-card__gate) {
	filter: blur(4px);
	pointer-events: none;
	user-select: none;
}

.entry-content .isjac-opp-card__gate {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--isjac-pad-xs);
	background-color: color-mix(in srgb, var(--isjac-surface-card) 65%, transparent);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	text-align: center;
	padding: var(--isjac-pad-md);
	border-radius: inherit;
}

.entry-content .isjac-opp-card__gate-label {
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--isjac-color-brand-deep);
	margin: 0;
}

.entry-content .isjac-opp-card__gate-cta { margin: 0; }