/* ==========================================================================
   COMPONENT / SWIPER NAV ARROWS (overlay prev/next buttons)
   For the shared .article-tools-section / .article-courses-section
   components when a page wants them as a real, always-on Swiper (via
   related-cards.js's initAlwaysOnCardSwiper()/initCoursesSwiper() with
   a `navigation` option) instead of the default mobile-only behavior.
   Currently used by Course.html and Tool.html.

   Markup contract: wrap the existing .article-tools-swiper-outer (or
   .article-courses-slider-wrapper) in a `.course-swiper-nav-wrap`, and
   add two sibling <button> elements with classes
   `.course-swiper-nav-btn .course-tools-nav--prev` / `--next` (or
   `.course-courses-nav--prev` / `--next` for the courses row) —
   yes, "course-" prefixed even on Tool.html; these are internal JS/CSS
   hooks, not user-facing, and matching names meant not inventing a
   second, parallel naming scheme for the exact same component.

   The arrows float absolutely over the section's own side padding
   (rather than sitting in the flex row next to the swiper, stealing
   its width) — see the note below on why that matters for showing 3
   full tool cards instead of a cut-off third one.
   ========================================================================== */

/* --- Related tools / courses rows: now the shared
   .article-tools-section / .article-courses-section components (see
   components/_tools-section.css, components/_courses-section.css) —
   same markup, same data (assets/data/related-content.json), same
   cards as Article.html/Category.html. .course-cards-row's old grid
   is gone with it; the swiper nav arrows below are this page's own
   addition on top of those shared components.

   The arrows used to sit in the flex row *alongside* the swiper
   (each ~44px + 20px gap on both sides = ~128px stolen from the
   swiper's own width). At this section's max-width that was just
   enough to cut the 3rd tool card off mid-card instead of showing it
   in full. Overlaying the arrows (position: absolute, floating over
   the section's own side padding) gives the swiper its full width
   back — the 3 cards + 2 gaps (3×570 + 2×32 = 1774px) now actually
   fit inside the ~1792px available. */
.course-swiper-nav-wrap {
  position: relative;
  width: 100%;
}

.article-tools-swiper-outer,
.article-courses-slider-wrapper {
  width: 100%;
}

/* Swiper's own stylesheet puts width:100% on .swiper-slide
   unconditionally; for slidesPerView:'auto' mode (initAlwaysOnCardSwiper
   in related-cards.js) that's exactly backwards — each slide needs to
   size to its own card's width (570px) so more than one fits in the
   row. Swiper normally overrides this itself via an inline style, but
   doesn't reliably do so here, so it's pinned in CSS instead.
   Article.html/Category.html's tools row is unaffected — it uses the
   other, numeric-slidesPerView function instead, which sizes slides
   correctly on its own. */
.article-tools-swiper-outer .swiper-slide {
  width: auto !important;
}

.course-swiper-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #000080;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 128, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.course-tools-nav--prev,
.course-courses-nav--prev {
  left: 22px;
}

.course-tools-nav--next,
.course-courses-nav--next {
  right: 22px;
}

.course-swiper-nav-btn:hover {
  background: #C22DAF;
  transform: translateY(-50%) scale(1.06);
}

.course-swiper-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 599px) {
  .course-swiper-nav-btn {
    width: 36px;
    height: 36px;
  }

  .course-tools-nav--prev,
  .course-courses-nav--prev {
    left: -4px;
  }

  .course-tools-nav--next,
  .course-courses-nav--next {
    right: -4px;
  }
}