/* Anders search result card — whole-card link.
 *
 * Theme-authored, not ported: the approved design's card is clickable only on
 * its title and its "View Job" link, so there is nothing upstream to re-port
 * from. Do not fold this into assets/css/anders-job-search.css — that file is
 * generated by tools/port-design.js and a re-port overwrites it.
 *
 * The whole card navigates to the job, but the thing doing the navigating is
 * still the real anchor on the title: its ::after is stretched across the card,
 * so the pointer target grows while the link itself stays an ordinary link.
 * That keeps the status-bar preview, cmd/middle-click, "Open in new tab", the
 * tab order and the accessible name — one link, labelled with the job title.
 * A click handler on the <article> would have cost every one of those.
 *
 * Everything interactive has to be lifted back above that overlay, Apply Now
 * above all: it must open the Quick Apply dialog rather than follow the card.
 * See job-card-actions.js, which catches `.qa` and stops the event there.
 */

.anders-design .job-card {
  position: relative;
}

.anders-design .job-card .job-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/*
 * Apply Now and View Job. Raised above the overlay so each keeps its own
 * click, its own cursor and its own focus ring.
 */
.anders-design .job-card .job-actions {
  position: relative;
  z-index: 2;
}

/* Keep the primary card action prominent without stretching it across the
 * card. The centered 200px floor is still a generous touch target on phones. */
.anders-design .job-card .job-actions .btn {
  width: fit-content;
  min-width: 200px;
  max-width: 100%;
  align-self: center;
}

/* Below the desktop card layout, keep both destinations on one action line.
 * The secondary link gets the same 44px touch height as the primary button;
 * only the distribution changes between phone and tablet. */
@media (max-width: 1023px) {
  .anders-design .job-card .job-actions {
    flex-direction: row;
    align-items: center;
  }

  .anders-design .job-card .view-link {
    flex: none;
    min-height: 44px;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .anders-design .job-card .job-actions {
    justify-content: space-between;
    gap: var(--s-1);
  }

  /* The 200px tablet/desktop floor plus View Job cannot share a 320px card.
   * Let the button use its intrinsic padded width on phones instead. */
  .anders-design .job-card .job-actions .btn {
    min-width: 0;
  }
}

/*
 * The focus ring stays on the title text rather than tracing the whole card:
 * outline is drawn on the anchor's own box, and the stretched ::after is a
 * separate box the outline does not enclose. Nothing to do but not break it —
 * noted because "make the card focusable" is the tempting wrong turn here.
 */

/*
 * The overlay swallows drag-to-select over most of the card, so the one place
 * a visitor is likely to want the text — the pay figure — is lifted out of it.
 */
.anders-design .job-card .job-pay {
  position: relative;
  z-index: 2;
}

/* Featured jobs are one horizontal rail at every width. Phones reveal a
 * portion of the next card as the scroll affordance; tablet cards stay wide
 * enough for pay and contract metadata, and the three-card desktop set shares
 * the available row without wrapping. */
.anders-design .feat-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Overflow scrolling clips descendant paint. Give the raised card shadow a
   * real internal gutter, then pull the rail outward by the same inline amount
   * so the first and last card edges still align with the section heading. */
  margin-inline: calc(0px - var(--s-3));
  padding: var(--s-2) var(--s-3) var(--s-6);
  scroll-padding-inline: var(--s-3);
}

.anders-design .feat-grid::-webkit-scrollbar {
  display: none;
}

.anders-design .feat-grid:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.anders-design .feat-card {
  flex: 0 0 clamp(248px, 78vw, 312px);
  min-width: 0;
  scroll-snap-align: start;
}

.anders-design .feat-pay {
  white-space: nowrap;
}

.anders-design .feat-meta {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
}

/* This is the shell that owns the actual query results, not a global shell
 * adjustment. Keep a clear section break after the featured rail. */
.anders-design .jobs-feed-shell {
  margin-top: var(--s-6);
}

/* The larger shadow gutter replaces half of the old inter-section gap; keep
 * the card-to-results rhythm unchanged when Featured Jobs is present. */
.anders-design .featured + .jobs-feed-shell {
  margin-top: var(--s-3);
}

/* Phones pull the job count a little closer to the rail above it. */
@media (max-width: 767px) {
  .anders-design .featured + .jobs-feed-shell {
    margin-top: var(--s-1);
  }
}

/* On /job-search the feed is the whole page — no market band or editorial
 * sections follow it — so it has to carry the gap to the footer itself. Padding
 * rather than margin: a trailing margin would collapse straight out of <main>. */
.anders-design .jobs-feed-shell:last-child:not(.jobs-feed-shell--empty) {
  padding-bottom: var(--s-section);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .anders-design .job-card .job-actions {
    justify-content: center;
    gap: var(--s-6);
  }

  .anders-design .feat-card {
    flex-basis: clamp(320px, 42vw, 360px);
  }
}

@media (min-width: 1024px) {
  .anders-design .feat-card {
    flex: 1 1 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .anders-design .feat-grid.is-scrollable {
    cursor: grab;
    /* Proximity snapping creates a dead zone when a tablet-width rail has
     * less than one card of overflow. Mouse dragging should track the pointer
     * directly; coarse pointers keep native momentum and card snapping. */
    scroll-snap-type: none;
  }

  .anders-design .feat-grid.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  /* The card already lifts on hover; the title follows the accent it would
     have taken on its own, so hovering anywhere reads as hovering the link. */
  .anders-design .job-card:hover .job-title a {
    color: var(--accent);
  }
}

/* The facts row aligns its items on their text baselines. The start date is
 * a flex box whose first child is the calendar icon, and an icon has no text
 * baseline, so its bottom edge stood in: the "Starts …" text rode about 1.5px
 * above the pay and the Setting. Let the text decide the baseline and centre
 * the icon on its own. */
.anders-design .job-facts .job-start {
	align-items: baseline;
}

.anders-design .job-facts .job-start svg {
	align-self: center;
}

/* Therapy cards' Setting (the owner's request, 2026-10-04): the start date's
 * type size and colour, on the same baseline. Unlike the start date it may
 * wrap, because "Please contact for setting details" is wider than a phone
 * card; it takes its own line there. */
.anders-design .job-facts .job-setting {
	color: var(--slate);
	font-size: 13.5px;
}

/* Phones: pay, start date and Setting do not fit on one line, and a wrapped
 * Setting landed under the pay. Option B (2026-10-04): the pay keeps
 * the left; the start date and Setting stack as one block on the right, the
 * two lines starting at the same edge. Elsewhere the block is layout-free, so
 * the three items keep sharing the row's baseline. */
.anders-design .job-facts__stack {
	display: contents;
}

@media (max-width: 767px) {
	.anders-design .job-facts.job-facts--setting {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 14px;
	}

	.anders-design .job-facts--setting .job-facts__stack {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		justify-self: end;
		min-width: 0;
	}

	/* Both lines on the same leading, so the pair reads as one unit and its
	 * middle sits on the pay's middle (the start line was 21.6px tall, the
	 * Setting line 18px, which left a wide gap between them). */
	.anders-design .job-facts--setting .job-start,
	.anders-design .job-facts--setting .job-setting {
		line-height: 1.35;
	}

	.anders-design .job-facts--setting .job-setting {
		text-wrap: balance;
	}

	.anders-design .job-setting__value--whole {
		white-space: nowrap;
	}
}