/* =========================================================================
   COMPONENTS — carousel, thumbnail grid, expanded view (lightbox)
   Consumes tokens.css only via var(--...). No raw colors/sizes here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   CAROUSEL
   Native CSS scroll-snap + prev/next buttons + dot pagination — no JS
   carousel library, no hand-rolled focus trap. Follows the WAI-ARIA APG
   carousel pattern (region + group/slide roles, a polite live region
   announcing the active slide).
   ------------------------------------------------------------------------- */
.carousel {
  --carousel-gap: var(--space-m);
  position: relative;
}

.carousel__viewport {
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-padding);
  padding-block: var(--space-2xs);
  padding-inline: var(--container-padding);
  margin-inline: calc(var(--container-padding) * -1);
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
}

.carousel__slide {
  flex: 0 0 min(20rem, 80%);
  scroll-snap-align: start;
}

.carousel__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-s);
}

.carousel__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-1);
  line-height: 1;
}
.carousel__btn:hover { background: var(--color-surface); }
.carousel__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.carousel__dots {
  display: flex;
  gap: var(--space-2xs);
}
.carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-border-strong);
  cursor: pointer;
}
.carousel__dot[aria-current="true"] {
  background: var(--color-primary);
  width: 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   THUMBNAIL GRID
   Each thumbnail is a real <button> (keyboard/screen-reader operable).
   ------------------------------------------------------------------------- */
.thumb-grid {
  --thumb-size: 6.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-size), 1fr));
  gap: var(--space-xs);
}
.thumb-grid__item {
  padding: 0;
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: none;
  aspect-ratio: 1 / 1;
}
.thumb-grid__item img,
.thumb-grid__item .thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-grid__item:hover { border-color: var(--color-border-strong); }
.thumb-grid__item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* -------------------------------------------------------------------------
   EXPANDED VIEW / LIGHTBOX — built on the native <dialog> element.
   showModal() gives a real focus trap, top-layer stacking, and
   Escape-to-close for free.
   ------------------------------------------------------------------------- */
.lightbox {
  --lightbox-max-w: min(60rem, 92vw);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text);
  max-width: var(--lightbox-max-w);
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.lightbox::backdrop {
  background: rgba(16, 17, 20, 0.6);
}
.lightbox__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-s);
  border-bottom: var(--border-width) solid var(--color-border);
}
.lightbox__counter { color: var(--color-text-muted); font-size: var(--font-size-n1); }
.lightbox__close {
  background: none;
  border: none;
  font-size: var(--font-size-2);
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  padding: var(--space-3xs);
  border-radius: var(--radius-sm);
}
.lightbox__close:hover { background: var(--color-surface); }

.lightbox__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  min-height: 16rem;
}
.lightbox__body img,
.lightbox__body .thumb-placeholder {
  max-height: 70vh;
  max-width: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(252, 252, 253, 0.85);
  color: var(--color-neutral-900);
  cursor: pointer;
  font-size: var(--font-size-1);
}
.lightbox__nav--prev { left: var(--space-s); }
.lightbox__nav--next { right: var(--space-s); }

.lightbox__caption {
  padding: var(--space-s);
  font-size: var(--font-size-n1);
  color: var(--color-text-muted);
}

/* Placeholder "image" — a gradient block, used until real project/gallery
   images exist so the site never depends on an external image host. */
.thumb-placeholder {
  background: linear-gradient(135deg, var(--ph-a, var(--color-accent-200)), var(--ph-b, var(--color-surface)));
}

/* -------------------------------------------------------------------------
   COMPANY TITLE TILE
   Company icon (16px, 6px-radius rounded rectangle) + company name. Reusable
   anywhere a case study needs to name the company, e.g.:
     <div class="company-title-tile">
       <img class="company-title-tile__icon" src="assets/logos/<company>.svg" alt="" width="16" height="16">
       <span class="company-title-tile__name">Company</span>
     </div>
   ------------------------------------------------------------------------- */
.company-title-tile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-s);
  font-size: var(--font-size-n1);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
}
.company-title-tile__icon {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

/* -------------------------------------------------------------------------
   CARD
   Reusable surface: white background, hairline border, rounded corners.
     <div class="card"><div class="card__body">...</div></div>
   Modifiers:
     .card--interactive  hover border (for cards that are clickable)
     .card--accordion    use on <details>; summary is .card__summary with a
                         .card__chev, content is .card__body
   ------------------------------------------------------------------------- */
.card {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.card__body {
  padding: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-n1);
}
.card--interactive:hover,
.card--accordion:hover { border-color: var(--color-border-strong); }

.card--accordion[open] { border-color: var(--color-primary); }
.card--accordion > .card__body { padding-top: 0; }
.card__summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: var(--space-xs) calc(var(--space-m) + var(--space-xs)) var(--space-xs) var(--space-xs);
  border-radius: var(--radius-md);
}
.card__summary::-webkit-details-marker { display: none; }
.card__chev {
  position: absolute;
  top: 50%;
  right: var(--space-xs);
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--duration-fast) var(--easing-standard);
}
.card--accordion[open] .card__chev { transform: translateY(-30%) rotate(-135deg); }

/* -------------------------------------------------------------------------
   EXPANDED LINK
   Right-aligned text link with an "enlarge" icon, for content that opens in a
   full-size modal (so the reader doesn't leave the page). Works on a <button>
   or <a>. Needs the #icon-expand symbol from the page's SVG sprite, and
   data-modal="<dialog id>" to open a .modal (see below).
     <button type="button" class="link-expanded" data-modal="myModal" aria-haspopup="dialog">
       <span>Label</span>
       <svg class="icon" aria-hidden="true"><use href="#icon-expand"/></svg>
     </button>
   ------------------------------------------------------------------------- */
.link-expanded {
  display: flex;
  width: fit-content;
  margin: var(--space-s) 0 0 auto;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--font-size-n1);
  color: var(--color-primary);
  cursor: pointer;
}
.link-expanded .icon { width: 1em; height: 1em; flex: none; }
.link-expanded:hover { color: var(--color-primary-hover); }
.link-expanded:hover span:first-child { text-decoration: underline; }

/* -------------------------------------------------------------------------
   MODAL
   Large native <dialog>: header (title + close), scrolling body. Opened by
   any [data-modal="<id>"] control; closed by [data-modal-close], Escape, or
   a click on the backdrop. Handled in js/case-study.js.
   ------------------------------------------------------------------------- */
.modal {
  width: min(72rem, calc(100vw - 2 * var(--space-m)));
  max-height: calc(100vh - 2 * var(--space-m));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: rgba(16, 17, 20, 0.6); }
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-bottom: var(--border-width) solid var(--color-border);
}
.modal__title { margin: 0; font-size: var(--font-size-1); font-weight: var(--font-weight-bold); }
.modal__close {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text);
  cursor: pointer;
}
.modal__close:hover { background: var(--color-surface); }
.modal__body { padding: var(--space-m); overflow-y: auto; }