/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited.
For copyright inquiries: jacques@toptronic.com
  PLWS :: Plazdiez Website — CSS Styles Part 2 of 2
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-08-01T13:21:29+1000
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  Continuation from styles_001.css
  This file contains: Carousel styles, Fullscreen overlay,
    Responsive breakpoints for Mobile → 8K Desktop.
*/

/* ============================================================
   SECTION 7: CAROUSEL (Image slideshow)
   ---------------------------------------------------------
   -- Jacques: The carousel is the most important feature of PLWS.
     It shows Paul's work images one at a time, auto-advancing.
   -- Ryan: A carousel is like a photo album that turns pages by
     itself. You can also click arrows or swipe on a phone.
   -- Ava: The pictures change every 15 seconds. You can also
     click the left/right buttons to look at more pictures!
   ============================================================ */

/* Carousel outer wrapper */
.carousel-section {
  padding: var(--sp-2xl) var(--sp-lg);
  text-align: center;
}

/* Section heading above the carousel */
.carousel-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--clr-charcoal);
  margin-bottom: var(--sp-lg);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* The carousel container — holds the image + arrows */
.carousel {
  position: relative;         /* So arrows can be positioned absolutely */
  max-width: var(--carousel-max-width);
  margin: 0 auto;
  background-color: var(--clr-dark-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;           /* Clip images to rounded corners */
  box-shadow: var(--shadow-lg);
}

/* -- Students: "overflow: hidden" means anything outside the
   rounded corners gets cut off. Without this, images would show
   square corners overlapping the border-radius. */

/* Image wrapper — sizes the image maintaining aspect ratio */
.carousel-image-wrap {
  position: relative;
  width: 100%;
  /* Aspect ratio roughly 16:10 for industrial product photos */
  aspect-ratio: 16 / 10;
  cursor: pointer;            /* Indicates clickable for fullscreen */
  overflow: hidden;
}

/* Slides are stacked <picture> elements inside the wrap.
   -- Ryan: Like a pile of transparent sheets — only the top one
     (the .active slide) is visible; the others wait underneath. */
.carousel-image-wrap picture.carousel-slide {
  position: absolute;
  inset: 0;                   /* top/right/bottom/left all 0 = fill wrap */
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  /* 400ms cross-fade + subtle 12px directional glide */
  transition: opacity 400ms ease, transform 400ms ease,
              visibility 0s linear 400ms;
}

.carousel-image-wrap picture.carousel-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 400ms ease, transform 400ms ease,
              visibility 0s;
}

/* Slide start positions: 12px off to the side it travels from */
.carousel-image-wrap picture.carousel-slide.enter-right { transform: translateX(12px); }
.carousel-image-wrap picture.carousel-slide.enter-left  { transform: translateX(-12px); }

/* Actual image inside each slide */
.carousel-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* Show entire image, no cropping */
  background-color: var(--clr-dark-bg);
  border-radius: var(--radius-md);
}

/* -- Jacques: "object-fit: contain" makes sure the whole image is
   visible, never cropped. Black bars may appear on sides but the
   full product is shown. This is important for industrial photos
   where the whole part must be visible. */

/* Instruction text below carousel */
.carousel-instruction {
  margin-top: var(--sp-sm);
  font-size: 0.8rem;
  color: var(--clr-text);
  opacity: 0.7;
  font-style: italic;
}

/* Left and right arrow buttons */
.carousel-arrow {
  position: absolute;
  top: 50%;                   /* Center vertically */
  transform: translateY(-50%);
  width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
  background-color: rgba(26, 26, 26, 0.85); /* Dark semi-transparent */
  color: var(--clr-accent);
  border: 2px solid var(--clr-accent);
  border-radius: var(--radius-round);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color var(--trans-fast),
              border-color var(--trans-fast),
              color var(--trans-fast);
  /* High contrast for visibility */
  box-shadow: 0 0 8px rgba(240, 165, 0, 0.3);
}

/* -- Ava: The arrow buttons are bright yellow circles with dark
   backgrounds so you can always see them, even on light pictures! */

.carousel-arrow:hover,
.carousel-arrow:focus {
  background-color: var(--clr-accent);
  color: var(--clr-charcoal);
  border-color: var(--clr-accent-hover);
  box-shadow: 0 0 16px rgba(240, 165, 0, 0.6);
}

.carousel-arrow-left {
  left: var(--sp-lg);
}

.carousel-arrow-right {
  right: var(--sp-lg);
}

/* Filmstrip of thumbnail buttons (replaces the old dot indicators).
   -- Jacques: Like a darkroom contact strip — small previews in a row;
     the amber frame marks the negative currently enlarging.
   Hidden on screens <= 820px (thumbs are a desktop luxury). */
.carousel-filmstrip {
  display: flex;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  background-color: var(--clr-dark-bg);
  overflow-x: auto;           /* Scroll sideways when many thumbs */
  scrollbar-width: thin;
}

.carousel-thumb {
  flex: 0 0 auto;             /* Thumbs keep their size, strip scrolls */
  width: 72px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background-color: #1a1a1a;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.65;
  transition: opacity var(--trans-fast), border-color var(--trans-fast);
}

.carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Fill the little frame nicely */
  display: block;
}

/* Active thumbnail: amber border + full opacity */
.carousel-thumb.active {
  border-color: var(--clr-accent);
  opacity: 1;
}

.carousel-thumb:hover,
.carousel-thumb:focus-visible {
  opacity: 1;
  border-color: var(--clr-accent-hover);
}

@media screen and (max-width: 820px) {
  .carousel-filmstrip { display: none; }
}

/* Caption chip — bottom-left overlay, one short line per image.
   -- Ava: Like the little name tag under a painting in a museum! */
.carousel-caption {
  position: absolute;
  bottom: calc(var(--sp-sm) + 6px);   /* Sit just above the progress bar */
  left: var(--sp-md);
  max-width: 65%;
  background-color: rgba(26, 26, 26, 0.8);
  color: var(--clr-white);
  font-size: 0.8rem;
  line-height: 1.3;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm);
  z-index: 10;
  pointer-events: none;       /* Clicks pass through to the image */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    /* Long captions end with ... */
}

/* Progress bar — slim 3px amber line along the bottom of the image.
   Fills over 15 seconds, then the slide advances.
   -- Ryan: Like the loading bar on a video, but for the next picture. */
.carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.12);
  z-index: 10;
  pointer-events: none;
}

.carousel-progress-fill {
  width: 0%;
  height: 100%;
  background-color: var(--clr-accent);
}

/* Pause/Play toggle — top-right corner of the image (WCAG 2.2.2).
   -- Ava: Press it to freeze the picture show, press again to go! */
.carousel-pause-btn {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  width: 36px;
  height: 36px;
  background-color: rgba(26, 26, 26, 0.85);
  color: var(--clr-accent);
  border: 2px solid var(--clr-accent);
  border-radius: var(--radius-round);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  transition: background-color var(--trans-fast), color var(--trans-fast);
}

.carousel-pause-btn:hover,
.carousel-pause-btn:focus-visible {
  background-color: var(--clr-accent);
  color: var(--clr-charcoal);
}

/* Counter text (e.g., "3 / 19") */
.carousel-counter {
  position: absolute;
  bottom: calc(var(--sp-sm) + 6px);   /* Clear of the 3px progress bar */
  right: var(--sp-md);
  background-color: rgba(26, 26, 26, 0.8);
  color: var(--clr-white);
  font-size: 0.75rem;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm);
  z-index: 10;
  pointer-events: none;   /* Click passes through to image */
}

/* Reduced motion: no fade, no glide, no smooth scrolling.
   -- Jacques: A hardware jumper for comfort — some people's balance
     system dislikes moving screens, so we switch slides instantly.
   (Autoplay itself is disabled in JS when this flag is set.) */
@media (prefers-reduced-motion: reduce) {
  .carousel-image-wrap picture.carousel-slide,
  .carousel-image-wrap picture.carousel-slide.active {
    transition: none;
  }

  .carousel-thumb {
    transition: none;
  }
}

/* ============================================================
   SECTION 8: FULLSCREEN OVERLAY
   ---------------------------------------------------------
   -- Ryan: When you click a carousel image, it opens in fullscreen
     mode covering the whole browser window. Click again to go back.
   -- This is like YouTube's theater mode but for images.
   ============================================================ */
.fullscreen-overlay {
  display: none;                /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95); /* Nearly black background */
  z-index: 2000;                /* Above everything including header */
  cursor: pointer;
  /* -- Jacques: "position: fixed" anchors the overlay to the viewport,
     not the page. vw/vh = viewport width/height = 100% of screen. */
}

.fullscreen-overlay.active {
  display: flex;                /* Show as flex to center content */
  align-items: center;
  justify-content: center;
}

.fullscreen-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}

/* Media box holds the fullscreen <picture> (large2x when available) */
.fullscreen-media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 95vh;
}

/* Close hint in fullscreen */
.fullscreen-hint {
  position: absolute;
  top: var(--sp-lg);
  right: var(--sp-lg);
  color: var(--clr-white);
  font-size: 0.85rem;
  opacity: 0.7;
  pointer-events: none;
}

/* Fullscreen nav arrows (larger, more visible) */
.fullscreen-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--clr-white);
  border: 2px solid var(--clr-white);
  border-radius: var(--radius-round);
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  transition: background-color var(--trans-fast);
}

.fullscreen-arrow:hover {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
}

.fullscreen-arrow-left  { left: var(--sp-lg); }
.fullscreen-arrow-right { right: var(--sp-lg); }

/* ============================================================
   SECTION 9: PLACEHOLDER PAGE STYLES
   ============================================================ */
.page-placeholder {
  text-align: center;
  padding: var(--sp-3xl) var(--sp-lg);
}

.page-placeholder h1 {
  color: var(--clr-accent);
  margin-bottom: var(--sp-md);
}

.page-placeholder p {
  max-width: 600px;
  margin: 0 auto var(--sp-md);
  color: var(--clr-text);
  opacity: 0.8;
}

/* --- Responsive breakpoints moved to styles_003.css --- */
/* Content continues in styles_003.css */