/* Intentionally near-empty. Visual styling for every HCI widget/shortcode
   (donate bar, giving levels, quick-donate shelf) comes from the ported
   prototype stylesheets (assets/prototype-css/*.css), loaded by
   HCI_Prototype_Assets — those files' real classes (.donatebar, .level,
   .qcard, etc.) are used directly in each widget's markup, so there is
   nothing left to duplicate here.

   The one exception: Quick Donate Shelf's per-breakpoint column controls
   are editor-configurable (not fixed like the rest of the ported CSS), so
   the grid-template-columns rules that read the widget's own
   --shelf-cols-* custom properties (set inline per-instance by
   class-hci-widget-quick-donate-shelf.php) live here instead. Breakpoints
   match styles.css's own (900px/640px). */
.shelf-grid {
	grid-template-columns: repeat(var(--shelf-cols-desktop, 4), 1fr);
	gap: var(--shelf-gap, var(--hci-gap));
}

@media (max-width: 900px) {
	.shelf-grid {
		grid-template-columns: repeat(var(--shelf-cols-tablet, 2), 1fr);
	}
}

@media (max-width: 640px) {
	.shelf-grid {
		grid-template-columns: repeat(var(--shelf-cols-mobile, 1), 1fr);
	}
}

.qcard[style*="--qcard-accent"] .qcard__ico {
	color: var(--qcard-accent);
}

/* HCI Campaign Archive's pagination — no equivalent pattern existed in the
   ported prototype CSS (the prototype never had a real paginated list), so
   this is new, built from the same tokens/shapes (pill radius, ink/line
   colors, .btn-style hover) everything else already uses. */
.pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: clamp(28px, 4vw, 44px);
	flex-wrap: wrap;
}

.pager__link,
.pager span.pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	color: var(--ink-2);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a.pager__link:hover {
	border-color: var(--red);
	color: var(--red);
}

/* `!important` on color only: the current page item renders as a plain
   `<span>` (WP core's paginate_links(), not a link), which also matches the
   `.pager span.pager__link` base-color rule above — a compound selector
   with higher specificity (0,2,1) than `.pager__link.current` (0,2,0) alone,
   so without this the base ink color silently wins over white despite
   `.current` being the more specific-looking selector by eye. */
.pager__link.current {
	background: var(--red);
	border-color: var(--red);
	color: #fff !important;
}

.pager span.pager__link.dots {
	border-color: transparent;
	color: var(--ink-3);
}

/* HCI Page Banner (hci_campaign_banner), boxed layout: a little breathing
   room between the lede/description and the button row — the prototype's
   own `.cbanner__actions{gap:12px}` only spaces the buttons from each
   other, not from the description above them. */
.cbanner--boxed .cbanner__actions {
	margin-top: 12px;
}

/* Every ported class that does `gap: var(--gap)` (.ecards, .covers, .wcards,
   .joblist, .docs, .grid--*, the rail carousel, etc.) can lose that gap once
   nested inside an Elementor Container: `--gap` is also the internal custom
   property Elementor's own Container flex/grid-gap system uses. Elementor's
   frontend.css resets `--gap: initial` on every `.elementor-element`
   (both the Container AND our widget's own wrapper element carry that
   class), then the Container re-declares it to its own real value (e.g.
   `0px 0px` when no gap is configured) — that value cascades down through
   our widget wrapper, UNLESS the wrapper's own `--gap: initial` reset (from
   the same generic rule) wins by being the nearer declaration, in which
   case every ported class inside inherits "initial" (empty) instead of
   either value, and `gap: var(--gap)` falls back to the property's own
   initial value, "normal" — no visible spacing, and no error anywhere.
   Which of those two outcomes happens seems to depend on markup depth in a
   way not worth relying on. Re-declaring the real token value on
   `.elementor-widget-container` — the one element Elementor wraps around
   every widget's actual rendered output, which is never itself reset since
   it doesn't carry `.elementor-element` — fixes the cascade at its root for
   every ported class at once, instead of patching each affected class. */
.elementor-widget-container {
	--gap: clamp(1rem, 2.4vw, 1.75rem);
}

/* HCI Team Grid card — headshot (falls back to an initials avatar, same
   pattern as HCI Governance's .avatar) + name + role, laid out on the same
   tokens/shapes as .ccard so it feels like the same design system without
   duplicating a whole new card language. */
.tteam {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 24px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}

.tcard:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-2);
	border-color: #EDD2CF;
}

/* One shared circle treatment for both the real photo and the initials
   fallback (.tcard__photo--fallback always carries .tcard__photo too) —
   same size/radius/ring on both, so a photo being added later doesn't
   change the card's shape at all, just what's inside the circle.
   !important is required on border-radius/border/box-shadow: Elementor's
   own frontend.min.css ships a global `.elementor img{border-radius:0;
   border:none;box-shadow:none}` reset (element+class = higher specificity
   than our plain .tcard__photo class alone, and it loads after this
   stylesheet), which otherwise silently un-clips every real photo back to
   a plain square while leaving the initials-avatar <span> (not an <img>,
   so the reset doesn't target it) circular — exactly the inconsistency
   this rule exists to prevent. */
.tcard__photo {
	width: 108px;
	height: 108px;
	border-radius: 50% !important;
	object-fit: cover;
	background: var(--sand);
	box-shadow: 0 0 0 1px var(--line) !important;
	border: none !important;
	transition: box-shadow .24s var(--ease);
}

.tcard:hover .tcard__photo {
	box-shadow: 0 0 0 1px #EDD2CF !important;
}

.tcard__photo--fallback {
	display: grid;
	place-items: center;
	background: var(--red);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.tcard__name {
	font-size: .95rem;
}

.tcard__role {
	font-size: .82rem;
	color: var(--ink-3);
}

/* Reusable on any section/container that is the very first thing on a page
   — i.e. no Hero above it to absorb the fixed header's height via negative
   margin (see styles.css's .hero). Without this, the fixed header visually
   overlaps the first heading.
   !important is required: every HCI_Elementor_Builder::section() container
   gets an explicit zero-padding Style-tab setting, which Elementor compiles
   into per-post CSS (an ID-based selector, e.g. .elementor-element-xxxxx)
   that has equal-or-higher specificity than a plain class selector and is
   enqueued after this stylesheet — without !important that generated rule
   silently wins and this padding never applies. */
.pt-header {
	padding-top: calc(var(--pad-s) + var(--header-h, 86px)) !important;
}

/* HCI Governance's photo avatar (styles.css's .avatar is sized/circular but
   was designed for the initials-fallback <span> case only — object-fit
   wasn't needed there, and its `background: var(--red)` is meant for that
   fallback's initials-on-red-circle look, not a real photo — left
   unoverridden it shows through as a red ring/background behind the
   photo). Same Elementor img reset fight as .tcard__photo above:
   .elementor img{border-radius:0;border:none;box-shadow:none} in
   Elementor's own frontend.min.css outranks a plain class selector and
   loads after this stylesheet, so it silently un-clips the photo back to
   a square without !important here. Background + ring now match Team
   Grid's .tcard__photo exactly, for the same circle look on both pages. */
.avatar--photo {
	object-fit: cover;
	background: var(--sand);
	border-radius: 50% !important;
	border: none !important;
	box-shadow: 0 0 0 1px var(--line) !important;
}