/*
 * Card, carousel-slide and trainer-filter styles React set inline.
 *
 * Sources: ChallengeCard.js (the video layer, the intensity badge), Challenges.js
 * (the carousel slide's video wash) and Trainers.js (the filter pills, whose
 * `filterTextStyle` object was spread into three <p> elements).
 */

/* ChallengeCard.js: the moving thumbnail and its legibility wash. The app also
   renders a spinner until `onCanPlay`; a muted looping poster-less video that is
   still loading simply shows the card's dark background here, which is quieter. */
.rc-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.rc-card-video-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 17.71%, rgba(43, 57, 73, 0.85) 96.88%);
  z-index: 1;
}

/* Challenges.js uses a different, flatter wash on the carousel slide. */
.rc-carousel-video-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(23, 30, 39, 0.3), rgba(23, 30, 39, 0.8));
  z-index: 1;
}

/* The orange "3 Levels" / "Hard" badge, top-left. */
.rc-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #ff7700;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 3;
}

/* When a "New" tag is present the badge drops below it. */
.rc-card-badge--below-new {
  top: 36px;
}

/* Cards are wrapped in a link; without this the anchor's underline and inherited
   colour leak into the card text. */
.rc-card-link,
.rc-carousel-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* The search/filter hides cards with the `hidden` attribute. That is only a UA
   `display:none`, which any author rule setting `display` would beat — and
   .trainers-3-row-cards is a flex container, so its children are one stylesheet
   edit away from being given one. Make it explicit. */
[hidden] {
  display: none !important;
}

/* Wrapper around each trainer card, so search/filter can hide a whole card as one
   unit. .trainers-3-row-cards is `display:flex; flex-wrap:wrap`, and this block
   behaves as a flex item exactly as the app's <a> did, so the layout is unchanged.
   Not `display:contents` — that would remove the box the `hidden` attribute needs
   to act on. */
.rc-trainer {
  display: block;
}

/* ── Trainer search + filter ──────────────────────────────────────────────
   Replaces antd <Input> and <Collapse>. The input styling copies what the app
   set inline on the antd Input. */
.rc-trainer-tools {
  padding: 0 20px;
}

.rc-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2a2f36;
  padding: 0 20px;
  margin-bottom: 10px;
}

.rc-search-icon {
  color: #fff;
  opacity: 0.8;
  flex-shrink: 0;
  font-size: 2rem;
}

.rc-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  padding: 20px 0;
  color: #fff;
  font-size: 2rem;
  opacity: 0.8;
}

.rc-search input::placeholder {
  color: #fff;
  opacity: 0.5;
}

.rc-search:focus-within {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* <details> replacing antd's ghost <Collapse>. The app hides the expand arrow
   (showArrow={false}); the native marker is removed for the same reason. */
.rc-filter summary {
  cursor: pointer;
  font-size: 18px;
  padding: 10px 0;
  list-style: none;
}

.rc-filter summary::-webkit-details-marker {
  display: none;
}

.rc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Trainers.js `filterTextStyle`, plus the selected background. Note the app's own
   object sets `padding` twice (0 then "5px 12px") — the second wins, so 5px 12px
   is the effective value. */
.rc-filter-pill {
  margin: 0;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 16px;
  border: 0;
  color: #fff;
  background-color: #454b52;
}

.rc-filter-pill.is-active {
  background-color: #ff7700;
}

.rc-filter-pill:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* ── Card strip ───────────────────────────────────────────────────────────
   The app sets overflow:hidden, so the strip can only be moved with the two
   arrow buttons — no swipe, no touch drag, no keyboard. Allowing normal
   horizontal scrolling keeps the buttons working and makes it behave like any
   other horizontal list. */
.rc-scroller {
  overflow-x: auto !important;
  scrollbar-width: thin;
}

.rc-scroller-controls button {
  font-size: 20px;
  padding: 8px;
  margin-right: 5px;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

.rc-scroller-controls button:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* The challenges carousel slides are links, so they need the slide's own layout
   rather than an inline-level anchor box. */
.challenges-2-row .rc-slide {
  display: block;
}

/* ── Narrow phones (<=360px) ───────────────────────────────────────────────
   The shared card has a ~318px floor — `min-width: 30rem` plus `margin: 20px` —
   and `.challenge-card-basic-overlay` is `width: 110%`, a decorative bleed. On a
   320px screen `.trainers-3-row` leaves a 288px content box, so the card pushed
   46px past the viewport. Let it go fluid and clip the bleed, only at the width
   where it actually does not fit, so the card keeps its normal size everywhere
   else. Same defect and same fix as the nutrition grid. */
@media screen and (max-width: 360px) {
  .rc-trainer {
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }

  .trainers-3-row-cards .challenge-card-basic {
    min-width: 0;
    width: 100%;
    margin: 20px 0;
  }
}