/* ==============================================================================
   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;
  }
}

/* ==============================================================================
   FULL-SCREEN VARIANT (content.SlideshowFullscreen, ADR-035)

   The home page's showcase: the photo fills the block edge to edge
   (page.css gives the block the full grid track), each slide's copy sits
   in a paper caption at the bottom left, the drawing's title block of
   doc/07, and the controls in a paper strip at the bottom right. Both
   line up with the page's content column through --showcase-inset. The
   block's own height is the screen's minus the header and a band of
   about two lines, never taller than 60rem on a very tall monitor nor
   shorter than 26rem on a landscape phone: the next section peeks in,
   which says the page goes on, and nothing here ever captures the wheel
   or the scroll.
   ============================================================================== */

.block-slideshow--fullscreen {
  --showcase-inset: max(var(--spacing-lg), (100% - var(--content-max-width)) / 2);
  /* What the controls strip measures: one 44px button row plus its
     padding. The caption on a phone stacks right above it. */
  --showcase-nav-height: calc(44px + 2 * var(--spacing-xs));

  position: relative;
  /* svh, not dvh: a phone's address bar collapsing while scrolling must
     not resize the block under the visitor's finger. vh is the fallback
     for a browser without the small-viewport unit. */
  height: clamp(26rem, 100vh - 5rem, 60rem);
  height: clamp(26rem, 100svh - 5rem, 60rem);
  overflow: hidden;
  background: var(--paper-secondary-bg);
}

.block-slideshow--fullscreen .slideshow__viewport {
  position: absolute;
  inset: 0;
}

.block-slideshow--fullscreen .slide {
  display: block;
  height: 100%;
}

/* Repeated after the rule above, which has the same specificity as
   .slide[hidden] at the top of this file and would otherwise show every
   slide at once. */
.block-slideshow--fullscreen .slide[hidden] {
  display: none;
}

.block-slideshow--fullscreen picture {
  height: 100%;
}

.block-slideshow--fullscreen .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The one animation of the page (doc/07): a photo that comes in fades
   from the block's paper. The first slide never does, so the largest
   image of the first paint is visible at once and LCP does not wait
   600ms for it. main.css's reduced-motion guard reduces this to nothing. */
@keyframes showcase-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.block-slideshow--fullscreen .slide:not(:first-child):not([hidden]) picture,
.block-slideshow--fullscreen .slide:not(:first-child):not([hidden]) > img {
  animation: showcase-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Caption: the project's number in the run, its name in the display
   face, its use and place, and the link to its page. Paper on the photo,
   never text straight on it, so the contrast is the palette's own
   whatever the picture behind.
   -------------------------------------------------------------------------- */
.block-slideshow--fullscreen .slide__copy {
  position: absolute;
  inset-inline-start: var(--showcase-inset);
  inset-block-end: var(--showcase-inset);
  width: min(30rem, 100% - 2 * var(--showcase-inset));
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  background: var(--paper-bg);
  color: var(--text-primary);
  cursor: auto;
}

.block-slideshow--fullscreen .slide__count {
  margin: 0 0 var(--spacing-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.block-slideshow--fullscreen .slide__copy h3 {
  margin: 0;
  font-size: var(--font-size-display);
  line-height: 0.95;
  text-wrap: balance;
}

.block-slideshow--fullscreen .slide__copy p:not(.slide__count) {
  margin: var(--spacing-sm) 0 var(--spacing-md);
  color: var(--text-secondary);
}

.block-slideshow--fullscreen .slide__copy a {
  display: inline-block;
  padding-block: var(--spacing-xs);
  color: var(--accent-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --------------------------------------------------------------------------
   Controls strip: previous, pause/play and next as square, unrounded
   44px buttons, then one short bar per project. The current bar is
   longer and in the accent, so the state reads by shape as well as by
   colour.
   -------------------------------------------------------------------------- */
.block-slideshow--fullscreen .slideshow__nav {
  position: absolute;
  inset-inline-end: var(--showcase-inset);
  inset-block-end: var(--showcase-inset);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--paper-bg);
}

.block-slideshow--fullscreen .slideshow__controls,
.block-slideshow--fullscreen .slideshow__dots {
  margin: 0;
  gap: 0;
}

.block-slideshow--fullscreen .slideshow-prev,
.block-slideshow--fullscreen .slideshow-next,
.block-slideshow--fullscreen .slideshow-toggle {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
}

/* The single guillemets are small glyphs; at this size they read as
   arrows as clearly as the pause/play signs between them. */
.block-slideshow--fullscreen .slideshow-prev,
.block-slideshow--fullscreen .slideshow-next {
  font-size: 1.75rem;
  line-height: 1;
}

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

.block-slideshow--fullscreen .slideshow-dot {
  width: 24px;
  height: 44px;
}

.block-slideshow--fullscreen .slideshow-dot::before {
  width: 12px;
  height: 2px;
  border-radius: 0;
  background: var(--border-color);
}

.block-slideshow--fullscreen .slideshow-dot[aria-current="true"]::before {
  width: 20px;
  height: 4px;
  background: var(--accent-blue);
}

/* --------------------------------------------------------------------------
   Phones and narrow tablets: the strip runs the width of the block at the
   bottom, the caption stacks right above it. Under 360px the bars go:
   seven of them and three buttons no longer fit in one row, and the
   arrows plus the "03 / 07" of the caption already say where you are.
   -------------------------------------------------------------------------- */
@media (max-width: 48em) {
  .block-slideshow--fullscreen {
    --showcase-inset: var(--spacing-md);

    height: clamp(26rem, 100vh - 8.5rem, 60rem);
    height: clamp(26rem, 100svh - 8.5rem, 60rem);
  }

  .block-slideshow--fullscreen .slide__copy {
    inset-inline-end: var(--showcase-inset);
    inset-block-end: calc(var(--showcase-inset) + var(--showcase-nav-height) + 1px);
    width: auto;
    padding: var(--spacing-md);
  }

  .block-slideshow--fullscreen .slideshow__nav {
    inset-inline-start: var(--showcase-inset);
    justify-content: space-between;
  }

  /* main.css grows every slideshow dot to 44 × 44 on a touch screen;
     the bars keep 24px of width, enough for WCAG 2.5.8's 24px target,
     so seven of them still fit beside the buttons from 360px up. */
  .block-slideshow--fullscreen .slideshow-dot {
    width: 24px;
  }
}

@media (max-width: 22.4375em) {
  .block-slideshow--fullscreen .slideshow__dots {
    display: none;
  }
}