/* ==========================================================================
   Museums Alaska — directory skin
   Handle: wcd-directory-skin. Depends on `wcd-directory`, so it always loads
   after it; both are filemtime()-versioned because static assets are held at
   the edge for ten years.

   This file carries THIS SITE'S LOOK and nothing else. Geometry — the grid,
   the control heights, the dialog, the pagination — is the engine's.

   Every colour and every type value below resolves through an Elementor Kit
   global, via the --wcd-* tokens the engine declares on `.wcd`. Change a
   colour in Site Settings -> Global Colors and it still flows through here.

   Provenance: the card chrome is measured off loop templates 8516 / 8517 /
   8518 / 8519 / 8540 / 8541, which retire as each directory is converted. The
   look does not change; it stops living in six container-setting blobs in the
   database and starts living in this file.

   NOT here, deliberately: the sea-salt ground behind the section. That is
   painted by the Elementor container the shortcode sits in (verified on page
   3899, element 1ea12eb, background-color --e-global-color-2131ec2). Painting
   it again on `.wcd` would double it up on every converted page.
   ========================================================================== */


/* -------------------------------------------------------- 1. Site tokens */

.wcd {
	/* The card's hover wash. No Kit global expresses it directly — it is a
	   2.5% lift off the card ground toward the brand, not a brand colour — so
	   it is DERIVED from two globals rather than invented, the same two-line
	   pattern as --wcd-highlight below: the literal is the fallback an engine
	   without color-mix() keeps, the derived value is what everything else uses.
	   Change Global Colors and the hover follows. */
	--wcd-card-hover: #f9fbfc;
	--wcd-card-hover: color-mix(in srgb, var(--wcd-brand) 2.5%, var(--wcd-paper));

	/* The site's highlight-underline language, borrowed from the document
	   download links: the yellow is a wash under the text, never the text
	   colour. #FDB810 on white is 1.74:1 and would fail as a text colour. */
	--wcd-highlight: rgba(253, 184, 16, .34);
	--wcd-highlight: color-mix(in srgb, var(--wcd-accent) 34%, transparent);
}


/* ----------------------------------------------------------- 2. The card */

.wcd__card {
	background-color: var(--wcd-paper);
	border-block-start: 3px solid var(--wcd-ink);
	block-size: 100%;
	gap: 10px;
	padding: 24px 24px 22px;
	transition: background-color .2s ease, border-color .2s ease;
}

/* The hover moves the top rule to the highlight yellow and lifts the ground —
   the same pair the retiring cards used. */
.wcd__card:hover,
.wcd__card:focus-within {
	background-color: var(--wcd-card-hover);
	border-block-start-color: var(--wcd-accent);
}

.wcd__title {
	color: var(--wcd-ink);
}

.wcd__meta {
	color: var(--wcd-brand);
}

.wcd__place,
.wcd__summary {
	color: var(--wcd-muted);
	font-size: var(--wcd-body-size);
	line-height: var(--wcd-body-lh);
}

.wcd__amount {
	color: var(--wcd-ink);
	font-size: var(--wcd-body-size);
	font-weight: var(--wcd-btn-weight);
	line-height: var(--wcd-body-lh);
}

/* The card's one link, at the foot whatever the card's height. It reads as a
   link now rather than as the pill button it used to be: one tab stop, one
   accessible name, and no control competing with the record's title. */
/* The card action is the site's existing pill button, not a text link. These are the
   exact declarations the Kit already applies to .ma-card-button .elementor-button, so a
   directory card and an Elementor card read as the same component. Colours come from the
   Kit globals, so a brand change in Site Settings still flows through. */
.wcd a.wcd__more {
	/* A compact text link, not a pill. The pill competed with the card title and, at
	   157x47, dominated cards whose whole point is the record. Rest colour stays the
	   site's ink so it reads as the same component family; the underline is drawn as a
	   border so its offset is controllable (text-decoration-offset is not animatable). */
	align-self: flex-start;
	background: none;
	border: 0;
	border-block-end: 2px solid currentColor;
	border-radius: 0;
	color: var(--e-global-color-primary, #000);
	display: inline-flex;
	align-items: center;
	/* margin-top:auto still pushes the action to the card floor so a row aligns; the
	   padding-top is the guaranteed minimum breathing room, because auto collapses to 0
	   on any card whose content already fills the height — which was every card. It also
	   lifts the touch target from 17px to ~33px. */
	margin-top: auto;
	padding: 12px 0 3px;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, border-color .2s ease;

	font-size: 14px;
	font-weight: var(--e-global-typography-text-font-weight);
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wcd a.wcd__more:hover,
.wcd a.wcd__more:focus-visible {
	/* No fill: the card already changes ground on hover, so a second filled surface
	   inside it read as two competing states. Colour + underline is the site's own
	   text-link voice. */
	background-color: transparent;
	border-block-end-color: var(--e-global-color-secondary, #005E89);
	color: var(--e-global-color-secondary, #005E89);
	text-decoration: none;
}

/* The card needs to push its action to the bottom so a row of cards aligns, the same way
   .ma-card-button does with margin-top:auto. */
.wcd__card {
	display: flex;
	flex-direction: column;
}

/* `.wcd__reset` used to sit in this rule too, which painted a highlight block across the
   bottom half of "Clear all" while the rule below also underlined it — two hover idioms on
   one control, and the block read as a rendering artefact rather than a state. The
   highlighter stays for detail-panel prose links, where it is the site's own voice. */
.wcd__detail a:hover,
.wcd__detail a:focus-visible {
	background: linear-gradient(to top, var(--wcd-highlight) 52%, transparent 52%);
	color: var(--wcd-ink);
	text-decoration-color: var(--wcd-accent);
}


/* ------------------------------------------------------- 3. Card imagery */

/* The three ratios were chosen against the real photography — landscape for
   museum and award and grant photos, portrait for headshots, contained for
   logos — and are lifted unchanged from the Kit's managed block. */
.wcd__card--museum .wcd__media,
.wcd__card--award .wcd__media,
.wcd__card--grant-impact .wcd__media {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wcd__card--person .wcd__media {
	aspect-ratio: 5 / 6;
	object-fit: cover;
}

.wcd__card--organization .wcd__media {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	object-position: left center;
}


/* --------------------------------------------------- 4. Filters and count */

/* Small caps, the site's label voice: the same treatment the retiring filter
   captions and section eyebrows carried. */
.wcd__facet > label {
	color: var(--wcd-ink);
	letter-spacing: .04em;
	text-transform: var(--wcd-btn-case);
}

.wcd__count {
	color: var(--wcd-muted);
	font-size: var(--wcd-meta-size);
	font-weight: var(--wcd-meta-weight);
	letter-spacing: var(--wcd-meta-ls);
	line-height: var(--wcd-meta-lh);
	text-transform: var(--wcd-btn-case);
}

.wcd__empty {
	color: var(--wcd-muted);
}


/* ------------------------------------------------- 5. The detail and card */

.wcd__detail-about {
	color: var(--wcd-muted);
}


/* ----------------------------------------------- 6. Per-directory spacing */

/* The five tag directories sat 64px clear of their pagination; the six data
   directories sat 48px clear, which is the engine's default. A measured site
   value, so it belongs here and not in a config key. */
.wcd--resources,
.wcd--initiatives,
.wcd--blog,
.wcd--advocacy-resources,
.wcd--news {
	--wcd-pagination-gap: 64px;
}


@media (max-width: 600px) {
	.wcd__card {
		padding: 20px 20px 18px;
	}
}


/* ---------------------------------------------------------------- Hidden sections
   Applied as an Elementor css class on a container the client asked to hide rather than
   delete. Removing the class from the container restores it; the widget, its PHP and its
   CSS are all untouched. Used on page 8446 container 512fd4e ("Awarded by Year"). */
.wcd-hidden {
	display: none !important;
}


/* ==========================================================================
   Review fixes — 2026-09-04. Every value below is either structural or reads a
   Kit global; nothing introduces a new brand colour.
   ========================================================================== */

/* 1. The section eyebrow above the component is an Elementor heading with no
      bottom margin, and the component's first control label had no top margin,
      so "RESOURCES" sat ~4px above "TOPIC". Nothing owned the gap. The component
      owns it now. Affects resources, blog, news, initiatives, advocacy — every
      page where the original eyebrow was kept when the filter sidebar was removed. */
.wcd {
	margin-top: 32px;
}

@media (max-width: 600px) {
	.wcd {
		margin-top: 24px;
	}
}

/* 2. Cards stretched to the tallest in their row. Where a neighbour had a photo
      and this card did not, that left a tall empty void with the action stranded
      at the bottom — very visible on Museums, where 68 of 108 records have no
      image, and on Board, where only 2 of 11 have a "read more" at all.
      Sizing each card to its own content removes the void entirely. The row no
      longer bottom-aligns its buttons, which is the correct trade: a ragged
      button line reads as a list, a 200px hole reads as broken. */
/* Measured at 1440: with `stretch` the museums rows go 241/191/213 -> a uniform 241 and the
   worst void inside a card stays 22px, so the white cards on the grey page read as one
   contained block instead of a staircase; awards behaves the same. Only person and
   grant-impact cards actually pay for it — stretching those opens a 108px and a 72px hole
   under the content, which is the case this rule was added for. So the exception is scoped
   to those two directories instead of applied to all nine. */
.wcd--board .wcd__list,
.wcd--grant-impact .wcd__list {
	align-items: start;
}

/* 3. News is the only directory with no facets, so its lone search field stretched
      the full content width — 2,560px on a large desktop. Cap it so it matches the
      proportions every other directory has, where the field sits beside a select. */
.wcd--news .wcd__facet--q {
	max-inline-size: 560px;
}

/* 4. Board portraits filled almost the entire viewport on a phone, so one person
      occupied a screen and eleven of them was a very long scroll. Cap the media
      box and let the crop do the work. */
@media (max-width: 600px) {
	.wcd__card--person .wcd__media {
		aspect-ratio: 4 / 3;
		max-block-size: 240px;
		object-fit: cover;
		object-position: center top;
	}
}

/* 5. PRE-EXISTING, not introduced here: the Grant Impact / homepage counter blocks
      have no space between a counter's number and the next counter's label, so at
      tablet and below "GRANTS AWARDED" sits flush against "$35,600". Confirmed
      identical in the pre-change screenshots. Only applied where the counters
      stack, so the desktop row is untouched. */
@media (max-width: 1024px) {
	.elementor-widget-counter .elementor-counter-number-wrapper {
		margin-bottom: 22px;
	}
}


/* ==========================================================================
   Interactive states — 2026-09-04, after testing every state in a real browser.
   ========================================================================== */

/* THE BUG THIS FIXES. The engine sets `.wcd a { color: var(--wcd-brand) }` at
   specificity (0,1,1) and `.wcd a:hover` at (0,2,1). The card action was written as a
   bare `.wcd__more` (0,1,0) and `.wcd__more:hover` (0,2,0), so BOTH lost the cascade:
   the resting button drew teal text instead of the site's black, and on hover it
   filled teal while the text stayed teal — invisible, exactly the failure the pill
   filters had. Scoping to `.wcd a.wcd__more` raises these to (0,2,1) and (0,3,1),
   which wins on merit rather than with !important. Verified by reading computed
   styles under real hover, not by reading the file. */

/* "Clear all" had no hover feedback whatsoever: colour, background, border and
   text-decoration were byte-identical resting and hovered, so nothing told a mouse
   user it was a control. It is a text link, so it gets a text link's affordance. */
.wcd a.wcd__reset {
	color: var(--e-global-color-secondary, #005E89);
	text-decoration: none;
	transition: color .2s ease;
}

.wcd a.wcd__reset:hover,
.wcd a.wcd__reset:focus-visible {
	color: var(--e-global-color-primary, #000);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* A pressed state, so a click is acknowledged before the fetch returns. */
.wcd a.wcd__more:active,
.wcd .wcd__submit:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.wcd a.wcd__more:active,
	.wcd .wcd__submit:active {
		transform: none;
	}
}


/* ------------------------------------------- Filter bar: one row on desktop
   `.wcd__actions` is a sibling AFTER `.wcd__facets` inside the form, so no amount of
   wrapping within the facets div could ever pull the submit up onto the facet row — it
   is a separate block-level box, which is why "Apply filters" always landed on its own
   line. `display: contents` dissolves that box and promotes each facet to a flex item of
   the FORM, so the selects, the submit and the reset share one flex line. The div carries
   no padding, margin or background of its own (verified before relying on this), so
   dissolving it loses nothing; its gap moves up to the form. The facets are also capped:
   left to grow they took 719px and 602px of a 1340px row, which is what made two
   dropdowns fill the full width. Below 1024px everything stacks exactly as before. */
@media (min-width: 1024px) {
	.wcd .wcd__filters form {
		align-items: end;
		display: flex;
		flex-wrap: wrap;
		gap: 16px 20px;
	}

	.wcd .wcd__facets { display: contents; }

	/* Each dropdown takes the width its own longest option needs. A fixed 240px basis cut
	   "Vendors & Service Providers" to "Vendors & Service Pro…" on Organizations. The base
	   rule's min-inline-size still stops a short list collapsing, the cap stops one very long
	   option eating the row, and the form wraps before anything overflows. */
	.wcd .wcd__facet { flex: 0 1 auto; min-inline-size: 150px; max-inline-size: 420px; }

	/* The keyword box takes up the slack, and gives it back: at 1280 the awards bar only keeps
	   its two dropdowns and the button on one row if the box starts narrower than they do. */
	.wcd .wcd__facet--q { flex: 1 1 260px; max-inline-size: 420px; }

	.wcd .wcd__actions { margin: 0; }
}


/* ------------------------------------------------- Detail panel: header row
   The phone number and website link were the last <dd> of the facts list, so on a museum
   with long hours and admission text they sat far below the fold of the panel — the two
   details people open the panel FOR were the hardest to reach. They now sit on the title's
   line. `align-items: baseline` puts the contact text on the same baseline as the name
   rather than centring it against a two-line title. */
.wcd__detail-head {
	align-items: baseline;
	column-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 4px;
}

.wcd__detail-headings { min-inline-size: 0; }

.wcd__detail-contact {
	color: var(--wcd-brand);
	margin: 0;
	white-space: nowrap;
}

/* Below the panel's comfortable two-column width the contact line wraps under the title
   on its own row; nowrap above would force a horizontal scrollbar inside the dialog. */
@media (max-width: 599px) {
	.wcd__detail-contact { white-space: normal; }
}

/* The hairline between the description and the facts list added a rule inside a panel that
   is already a bounded card — removed per request. The base rule paired that border with
   `padding-block-start: 14px`; dropping both closed the gap entirely and the description ran
   straight into "LOCATION", so the separation the border used to carry is now done by space
   alone, and it needs a little more of it than it did with a line to help. */
.wcd__facts {
	border-block-start: 0;
	padding-block-start: 0;
	margin-block-start: 22px;
}

/* ------------------------------------------- Awards: heading owns the spacing
   The awards directory now sits directly under the client's "Past Award Winners" heading,
   ported from prod. That heading already separates itself from what follows: its 40px (24px on
   mobile) bottom margin lives on its inner .elementor-widget-container. The general
   `.wcd { margin-top }` above — added to space a directory from an intro that had no heading —
   stacked on top of it, so the heading floated 72px above the list it labels against 40px on
   prod (48px against 24px at 412). Measured, not estimated. (0,2,0) beats both the base rule and
   its 600px override regardless of source order. */
.wcd.wcd--awards {
	margin-top: 0;
}