/* Career page pieces that spaviadayspa.com's bundle has no utility for.
   Every value is a Spavia token: colors from the spavia-* palette, radii from --radius-*,
   easings from --ease-out-*. Keep this file small; prefer their utilities in the markup. */

/* Jobs card: filters panel (cream, like their bg-spavia-cream) beside the list */
.jobs-card { border: 1px solid #b38a5f26; /* border-spavia-bronze/15 */ }
@media (min-width: 64rem) {
  .jobs-card__filters { border-right: 1px solid #b38a5f26; }
}
@media (max-width: 63.99rem) {
  .jobs-card__filters { border-bottom: 1px solid #b38a5f26; }
}

@media (min-width: 64rem) { .jobs-card__list--full { grid-column: 1 / -1; } }

/* Awards marquee halves: equal gap after the last tile so the -50% loop is seamless */
.marquee-half { gap: 2rem; padding-right: 2rem; }

/* Filters fold away on small screens; always open on desktop */
.filters-toggle { list-style: none; cursor: pointer; }
.filters-toggle::-webkit-details-marker { display: none; }
.filters-toggle__icon { transition: transform .5s var(--ease-out-expo); }
details[open] > .filters-toggle .filters-toggle__icon { transform: rotate(45deg); }
@media (min-width: 64rem) {
  .filters-toggle { pointer-events: none; }
  .filters-toggle__icon { display: none; }
}

/* Facet option: checkbox | label (two lines max) | count pill (Nova Leap model) */
.facet-option { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .75rem; cursor: pointer; }
.facet-option__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.facet-option__count {
  min-width: 1.75rem; padding: .125rem .5rem; border-radius: 9999px; text-align: center;
  background: #ebebeb; /* spavia-sand */ color: #1a1a1a; font-size: .75rem; line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.facet-option:has(input:checked) .facet-option__count { background: #b38a5f; color: #000; }

/* Job row: whole row links to the job; "View job" pill shows on hover like Pacific Steel */
.job-row { transition: background-color .5s var(--ease-out-quart); }
.job-row:hover, .job-row:focus-visible { background-color: #f5f5f5; /* spavia-cream */ }
.job-row__cta { transition: opacity .5s var(--ease-out-quart), transform .5s var(--ease-out-quart), background-color .3s, color .3s, border-color .3s; }
.job-row:hover .job-row__cta, .job-row:focus-visible .job-row__cta { background: #b38a5f; border-color: #b38a5f; color: #000; }
@media (hover: hover) and (pointer: fine) {
  .job-row__cta { opacity: 0; transform: translateX(-.5rem); }
  .job-row:hover .job-row__cta, .job-row:focus-visible .job-row__cta { opacity: 1; transform: none; }
}

/* Pillar dialog: centered panel on their ink backdrop */
.pillar-dialog {
  width: min(48rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: .25rem; /* --radius-sm */
  background: #fff; color: #1a1a1a; overflow-y: auto;
}
.pillar-dialog::backdrop { background: #0009; }
.pillar-dialog[open] { animation: pageEnter .6s var(--ease-out-quart) both; }

/* Carousels (team quotes, Spavia Green): their scroll-snap track, no scrollbar */
.carousel-track { scrollbar-width: none; scroll-behavior: smooth; }
.carousel-track::-webkit-scrollbar { display: none; }
/* Breathing room so italic overhang of the next slide never peeks in at the edge */
.carousel-track > li { padding-right: 2rem; }

/* Awards marquee: with reduced motion their CSS stops the track, so let people scroll it */
@media (prefers-reduced-motion: reduce) {
  .awards-marquee { overflow-x: auto; }
  .awards-marquee [aria-hidden="true"].marquee-copy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
  .pillar-dialog[open] { animation: none; }
}

/* Cities line up under their state's label: disclosure (1.5rem) + gap (.25rem) */
.loc-cities { padding-left: 1.75rem; }

/* Header hide/show. Their class transitions `transform`, but Tailwind 4's -translate-y-full
   sets `translate`, so it jumped. Short ease-out-quart slide instead. */
#site-header {
  transition: translate .45s var(--ease-out-quart), background-color .7s var(--ease-out-expo), box-shadow .7s var(--ease-out-expo);
}

/* Select: their bronze-dark chevron with room to breathe instead of the native arrow */
.select-chevron {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806240' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
  cursor: pointer;
}

/* Video play button: bronze disc over the first frame; native controls once playing */
.video-play { background: #0003; transition: background-color .5s var(--ease-out-quart); }
.video-play:hover { background: #0000001a; }
.video-play__disc { width: 5rem; height: 5rem; }
.video-play__disc { transition: transform .5s var(--ease-out-expo), background-color .3s; }
.video-play:hover .video-play__disc, .video-play:focus-visible .video-play__disc { transform: scale(1.06); background: #c9a57d; /* bronze-light */ }