/* =========================================================
   rc-expand.css — "Show all / Show less" for the Resource
   Center carousels (Quick Start Series, Documentation).

   The Resource Center itself lives in Divi → Theme Options →
   Integration → head, which is database-only and unversioned.
   This enhancement is deliberately kept in the plugin instead
   so it is in git, and so deactivating the plugin cleanly
   restores the original carousel behaviour.

   Everything here is scoped to #resource-center and to classes
   this file introduces (rc-toggle, rc-expanded, rc-fade-in), so
   it cannot alter the collapsed carousel.
   ========================================================= */

/* --- the toggle button ------------------------------------------------
   .rc-group-head is display:flex with justify-content:space-between and
   two children (h3, .rc-arrows). Inserting a third child would push the
   button to the centre, so margin-right:auto makes it hug the heading and
   keeps the arrows hard right — which is what "next to the header" means
   here. Styled off the existing .rc-arrows button so it reads as part of
   the same control set.
   -------------------------------------------------------------------- */
#resource-center .rc-toggle {
  margin-right: auto;
  margin-left: 1rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-secondary, #94A3B8);
  background: var(--gradient-card, rgba(255, 255, 255, .03));
  border: 1px solid var(--border-subtle, rgba(0, 212, 255, .12));
  backdrop-filter: blur(12px);
  transition: color .18s ease, border-color .18s ease;
}

#resource-center .rc-toggle:hover,
#resource-center .rc-toggle:focus-visible {
  color: var(--accent-cyan, #00D4FF);
  border-color: var(--border-active, rgba(0, 212, 255, .4));
}

/* --- expanded track ---------------------------------------------------
   The collapsed track is a single non-wrapping flex row that scrolls
   horizontally with scroll-snap. Expanding only needs it to wrap: the
   tiles keep their existing percentage widths (.rc-video 28%, .rc-doc
   23%, widened at the 900px/600px breakpoints), so they land ~3 and ~4 per
   row respectively without this file restating any width. That is why this
   uses flex-wrap rather than switching to grid — a grid would override
   those widths and duplicate the breakpoint logic.

   overflow must go visible or the wrapped rows below the first are clipped
   to the original single-row height. scroll-snap-type is cleared because
   snapping on a wrapped container fights normal page scrolling.
   -------------------------------------------------------------------- */
#resource-center .rc-track.rc-expanded {
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
  row-gap: 1.25rem;
  padding-bottom: 0;
}

/* Arrows are meaningless once everything is on screen. Hidden rather than
   removed so collapsing restores them without re-running wireArrows(). */
#resource-center .rc-group-head.rc-is-expanded .rc-arrows {
  display: none;
}

/* --- fade-in for the newly revealed tiles -----------------------------
   Applied only to tiles that were off-screen before expanding, so the ones
   already visible do not flicker. The stagger is set inline as an
   animation-delay by the JS.

   forwards (not both) is deliberate: `both` would apply the from-state
   during the delay, so a tile with a 300ms delay would sit at opacity 0
   having already been painted — a visible flash of blank cards. With
   forwards they hold their natural state until their turn.
   -------------------------------------------------------------------- */
@keyframes rc-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

#resource-center .rc-track.rc-expanded .rc-fade-in {
  animation: rc-fade-up .35s ease forwards;
}

/* The tiles already carry transition:transform for their hover lift, and
   .rc-tile:hover sets translateY(-4px). While the fade animation runs it
   owns transform, so a hover mid-animation would be ignored; the JS strips
   .rc-fade-in on animationend to hand transform back to the hover rule. */

@media (prefers-reduced-motion: reduce) {
  #resource-center .rc-track.rc-expanded .rc-fade-in {
    animation: none;
  }
}