/* ==============================================================================
   SLIDESHOW BLOCK
   ============================================================================== */

.slideshow__viewport {
  position: relative;

  /* Lets slideshow.js read a horizontal drag as a swipe while the browser
     still handles vertical scrolling itself; without this, a touch drag
     here is ambiguous and some browsers swallow it entirely instead of
     firing pointerup. */
  touch-action: pan-y;
  cursor: grab;
}

.slide {
  display: grid;
  gap: var(--spacing-md);
}

/* The plain "hidden" attribute has the same specificity as .slide above,
   and an author stylesheet always wins over the browser's own [hidden]
   rule regardless of specificity, so without this the slide it is on
   would still show. Task 7's behaviour toggles this same attribute. */
.slide[hidden] {
  display: none;
}

.slide img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.slideshow__controls {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.slideshow-prev,
.slideshow-next,
.slideshow-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--paper-secondary-bg);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
}

.slideshow-prev:hover,
.slideshow-next:hover,
.slideshow-toggle:hover {
  background: var(--button-bg-hover);
}

.slideshow__dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

/* The button itself is the 24 × 24 px tap target WCAG 2.2 asks for
   (2.5.8); the 10 px dot a visitor sees is only its ::before, centred in
   it. The global :focus-visible ring then outlines the whole target, not
   just the small dot. */
.slideshow-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
}

.slideshow-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border-color);
}

.slideshow-dot[aria-current="true"]::before {
  background: var(--accent-blue);
}

/* Side by side once there is room for the image not to crowd the copy. */
@media (min-width: 768px) {
  .slide {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
  }
}