/**
 * Component Styles
 * UI components and patterns
 * Uses design tokens from tokens.css
 */

/* ========== THEME TRANSITIONS ========== */
/* Global theme transitions handled in base.css and layout.css */
/* Component-specific transitions only for elements that need them */

/* ========== HEADER & NAVIGATION ========== */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height-current);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--unit);
  background-color: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  border-bottom: 1px solid var(--glass-border-light);
  z-index: var(--z-header);
  pointer-events: none;
  transition:
    height var(--duration-fast) var(--easing-default),
    background-color var(--duration-theme) var(--easing-default),
    border-color var(--duration-theme) var(--easing-default);
}

/* Main logo uses t-caption-strong typography class */
.main-logo {
  pointer-events: auto;
  flex-shrink: 0;
  font-size: var(--header-font-size-current);
  transition: font-size var(--duration-fast) var(--easing-default);
}

/* Header project label uses caption typography pattern class - centered between logo and menu */
.header-project-label {
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--header-font-size-current);
  transition: opacity var(--duration-normal) ease, font-size var(--duration-fast) var(--easing-default);
}

.header-project-label:not(.visible) {
  opacity: 0;
}

/* Main menu uses t-caption typography pattern class */
.main-menu {
  pointer-events: auto;
  flex-shrink: 0;
  font-size: var(--header-font-size-current);
  transition: font-size var(--duration-fast) var(--easing-default);
}

.main-menu a {
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--duration-fast);
}

.main-menu a:hover {
  opacity: 0.6;
}

/* Current page indicator */
.main-menu a[aria-current="page"] {
  font-weight: 700;
}

/* Mobile menu close button - hidden by default, shown in project mode on mobile */
.main-menu__close {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--duration-quick);
}

.main-menu__close:hover {
  opacity: 0.6;
}

/* Mobile: Show close button instead of nav links when in project mode */
@media (max-width: 768px) {
  body.mobile-project-feed-active .main-menu__links {
    display: none;
  }

  body.mobile-project-feed-active .main-menu__close {
    display: block;
  }
}

/* ========== FLOATING CLOSE BUTTON ========== */
/* Uses .btn .btn--default classes - only position and visibility overrides */
.close-project-button {
  /* Positioning */
  position: fixed;
  bottom: var(--unit);
  right: var(--unit);
  z-index: var(--z-header);

  /* Visibility animation - horizontal only */
  opacity: 0;
  visibility: hidden;
  transform: translateX(100px); /* Slide in from the right (off-screen) */
  transition: opacity var(--duration-normal) var(--easing-default),
              visibility var(--duration-normal) var(--easing-default),
              transform var(--duration-normal) var(--easing-default);
  pointer-events: none;
}

.close-project-button:active {
  transform: translateX(0) scale(0.98); /* Keep horizontal position, only scale */
}

.close-project-button.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0); /* Slide to final position */
  pointer-events: auto;
}

/* ========== PAGE TRANSITION SCRIM ========== */
/* Fullscreen shimmer overlay for page transitions */
.page-transition-scrim {
  /* Positioning */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal, 9999);

  /* Visual - fully opaque white */
  background: var(--color-base-white);
  animation: none;

  /* Interaction */
  pointer-events: none;
  cursor: default;

  /* Visibility */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--easing-default),
              visibility 0s linear var(--duration-fast);

  /* Performance */
  will-change: opacity;
  transform: translateZ(0);
}

.page-transition-scrim.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  cursor: wait;
  transition: opacity var(--duration-fast) var(--easing-default),
              visibility 0s linear 0s;
}

/* Loading text - bottom left */
.page-transition-scrim__loading {
  position: absolute;
  bottom: var(--unit);
  left: var(--unit);
  color: var(--color-base-black);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-transition-scrim.visible {
    animation: none;
  }
}

/* Hide close button in carousel mode (not project mode) */
body:not(.project-mode) .close-project-button {
  display: none;
}

/* Hide close button on mobile */
@media (max-width: 768px) {
  .close-project-button {
    display: none !important;
  }
}

/* ========== MEDIA SHELL / SHIMMER ========== */
.media-shell {
  position: relative;
  overflow: visible;
  background-color: var(--bg-secondary);
  /* Shimmer uses tokens - automatically adjusts for dark theme via tokens.css */
  --shimmer-fill: var(--shimmer-base);
  --shimmer-fill-strong: var(--shimmer-highlight);
}

/* Ensure images and videos respect aspect-ratio and prevent layout shift */
/* Only apply height: auto in carousel and responsive contexts, not fixed-size containers */
.carousel-container .media-shell img,
.carousel-container .media-shell video,
.mockup-component .media-shell img,
.mockup-component .media-shell video {
  width: 100%;
  height: auto;
  display: block;
}

/* Support for modern aspect-ratio property in responsive contexts */
@supports (aspect-ratio: 16 / 9) {
  .carousel-container .media-shell img[style*="aspect-ratio"],
  .carousel-container .media-shell video[style*="aspect-ratio"],
  .mockup-component .media-shell img[style*="aspect-ratio"],
  .mockup-component .media-shell video[style*="aspect-ratio"] {
    width: 100%;
    height: auto;
  }
}

.media-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--shimmer-fill);
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity var(--duration-fast) ease;
}

.media-shell.media-loading::before,
.media-shell:has([data-media-state="loading"])::before {
  opacity: 1;
  animation: media-shimmer 1.4s ease-in-out infinite;
}

/* Make all media-shell backgrounds transparent (shimmer still shows via ::before) */
.media-shell {
  background-color: transparent !important;
}

/* Hide shimmer when media is loaded */
.media-shell.media-loaded::before,
.media-shell[data-media-state="loaded"]::before,
.media-shell[data-media-state="error"]::before,
.media-shell:has([data-media-state="loaded"])::before,
.media-shell:has([data-media-state="error"])::before,
.media-shell:has(.media-loaded)::before,
.media-shell:has(.media-element[style*="opacity: 1"])::before {
  opacity: 0;
  display: none;
  animation: none;
}

.media-shell.media-error::before,
.media-shell[data-media-state="error"]::before,
.media-shell:has([data-media-state="error"])::before {
  opacity: 0;
  animation: none;
}

.media-shell.media-error::after {
  content: 'Media unavailable';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  max-width: 80%;
  pointer-events: none;
}

@keyframes media-shimmer {
  0%, 100% { background-color: var(--shimmer-fill); }
  50% { background-color: var(--shimmer-fill-strong); }
}

/* ========== VIDEO PROGRESS BAR ========== */
/* Sleek minimal progress bar for video loading */
.media-shell[data-media-type="video"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--video-progress-height);
  background-color: var(--video-progress-color);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-elevated);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: opacity var(--duration-fast) ease, transform var(--duration-slow) var(--easing-default);
}

.media-shell[data-media-type="video"].media-loading::after,
.media-shell[data-media-type="video"]:has([data-media-state="loading"])::after {
  opacity: 0.75;
  transform: scaleX(1);
  animation: video-progress-pulse 1.5s ease-in-out infinite;
}

.media-shell[data-media-type="video"].media-loaded::after,
.media-shell[data-media-type="video"]:has([data-media-state="loaded"])::after {
  opacity: 0;
  animation: none;
  display: none;
}

.media-shell[data-media-type="video"].media-error::after,
.media-shell[data-media-type="video"]:has([data-media-state="error"])::after {
  opacity: 0;
  animation: none;
  display: none;
  transform: scaleX(0);
}

@keyframes video-progress-pulse {
  0% {
    transform: scaleX(0.25);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-shell.media-loading::before,
  .media-shell:has([data-media-state="loading"])::before {
    animation: none;
    opacity: 1;
  }

  .media-shell[data-media-type="video"].media-loading::after,
  .media-shell[data-media-type="video"]:has([data-media-state="loading"])::after {
    animation: none;
    opacity: 0.6;
    transform: scaleX(1);
  }
}

/* ========== HERO SECTION ========== */
.main-content {
  position: relative;
  width: 100%;
  overflow-x: hidden;  /* Prevent horizontal scroll - only carousel should scroll */
}

/* Allow carousel layout to peek outside main-content */
.main-content:has(.project-page:has(.layout-container[data-layout="carousel"])) {
  overflow-x: visible;
}

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - accounts for mobile browser UI */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--unit) var(--unit) 0 var(--unit);
  /* No overflow clipping - let carousel items be fully visible */
  /* Page-level overflow-x: hidden on body/main-content prevents page scroll */
  overscroll-behavior-x: none; /* Prevent browser back/forward navigation gestures */
}

/* Mobile project mode: Hide carousel hero and details slot */
body.mobile-project-feed-active .hero-section {
  display: none !important;
}

body.mobile-project-feed-active #project-details-slot {
  display: none !important;
}

/* Works heading uses t-display-xxl typography pattern class */
.works-heading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Center both axes relative to hero */
  width: 100%;
  text-align: center;
  transition: opacity var(--duration-normal);
  user-select: none;
  z-index: 1; /* Below carousel */
}

/* Hide heading in project mode with fast transition */
body.project-mode .works-heading {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-default); /* Match nav-helper: 300ms */
}

/* ========== NAVIGATION HELPER ========== */
.nav-helper {
  position: fixed;
  left: var(--unit);
  bottom: var(--unit);
  transform: none;
  display: inline-block;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: none;
  border-radius: var(--radius-md);
  box-shadow: none;
  text-align: left;
  user-select: none;
  opacity: 0.5;
  color: var(--text-primary);
  z-index: var(--z-elevated);
  font-size: var(--type-caption-font-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: uppercase;
  --nav-helper-line-duration: var(--duration-fast);
  --nav-helper-line-stagger: 80ms;
  --nav-helper-line-easing: var(--easing-default);
  --nav-helper-line-count: 8;
}

.nav-helper--hidden,
body.project-mode .nav-helper,
body.works-transitioning .nav-helper,
.page-transition-scrim.visible ~ main .nav-helper {
  pointer-events: none;
}

.nav-helper-table {
  border-collapse: separate;
  border-spacing: 0;
  display: inline-table;
  width: auto;
}

.nav-helper-table td {
  padding: 0;
  vertical-align: top;
}

.nav-helper-table tr + tr td {
  padding-top: var(--spacing-2xs);
}

.nav-helper-spacer {
  width: var(--spacing-sm);
  min-width: var(--spacing-sm);
}

.nav-helper-action {
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}

.nav-helper-label {
  opacity: 0.6;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.nav-helper-line {
  display: block;
  clip-path: inset(0 0 0 0);
  transition-property: clip-path;
  transition-duration: var(--nav-helper-line-duration);
  transition-timing-function: var(--nav-helper-line-easing);
  transition-delay: calc(var(--line-index, 0) * var(--nav-helper-line-stagger));
  will-change: clip-path;
}

.nav-helper--hidden .nav-helper-line,
body.project-mode .nav-helper .nav-helper-line,
body.works-transitioning .nav-helper .nav-helper-line,
.page-transition-scrim.visible ~ main .nav-helper .nav-helper-line {
  clip-path: inset(100% 0 0 0);
  transition-delay: calc(
    (var(--nav-helper-line-count, 0) - var(--line-index, 0) - 1)
    * var(--nav-helper-line-stagger)
  );
}

@media (prefers-reduced-motion: reduce) {
  .nav-helper-line {
    transition: none;
  }
}

/* ========== CAROUSEL ========== */
.carousel-outer {
  position: absolute;
  left: var(--unit);
  right: var(--unit);
  bottom: var(--unit);
  height: var(--carousel-height);
  overflow: visible;  /* Allow carousel items to be fully visible */
  user-select: none;
  isolation: isolate;  /* Create stacking context to prevent overflow bubbling */
  overscroll-behavior-x: none; /* Prevent browser back/forward navigation gestures */
  z-index: var(--z-elevated); /* Above heading and nav-helper (z-index: 10) */
}

.mockups-container {
  position: absolute;
  left: 0;
  bottom: 0;  /* Anchor to bottom so container grows upward */
  height: auto;  /* Allow container to size based on content */
  min-height: var(--carousel-height);  /* Maintain minimum height */
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-3xl); /* 60px desktop, 40px mobile */
  transition: transform var(--duration-quick) var(--easing-default);
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: none; /* Prevent browser back/forward navigation on horizontal swipe */
  user-select: none; /* Prevent text selection during drag */
  -webkit-user-select: none;
}

/* Disable transition during drag for immediate response */
.mockups-container.is-dragging {
  transition: none;
}

.mockups-container:active {
  cursor: grabbing;
}

/* Prevent native browser drag on carousel links */
.device-link {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y pinch-zoom;
}

.device-link,
.device-link * {
  /* Prevent native image/link drag behavior */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* ========== DEVICE ITEMS ========== */
.device-item {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  /* Transitions controlled by JS - removed CSS transition to prevent conflicts */
  transform-origin: bottom left;
  height: auto; /* Allow natural height */
  display: flex;
  align-items: flex-end; /* Align to bottom */
  justify-content: center;
}

.device-item img,
.device-item video {
  /* Display images at their natural size - scaling handled by JS */
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: var(--radius-sm);
}

/* Video-specific styles for carousel */
.device-item video,
.carousel-media.carousel-video {
  background: var(--bg-primary); /* Use theme-aware background while loading */
  pointer-events: none; /* Prevent video controls interaction in carousel */
}

.carousel-media {
  backface-visibility: hidden;
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
}

/* Make carousel videos transparent when loaded */
.device-item video[style*="opacity: 1"],
.carousel-media.carousel-video[style*="opacity: 1"],
.device-item:has(video.media-loaded),
.media-shell:has(.carousel-video.media-loaded) {
  background: transparent !important;
}

.device-item video.media-loaded,
.carousel-media.carousel-video.media-loaded {
  background: transparent !important;
}

/* z-index for focused device is controlled by JS during animation */
/* Removed [style*="scale"] selector - was conflicting with JS transition control */

/* ========== PROJECT DETAILS ========== */
#project-details-slot {
  position: absolute;
  left: var(--unit);
  bottom: var(--unit);
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: min(32vw, 420px);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, var(--translate-details-y), 0);
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.project-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 290px;
}

.project-client {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

.project-logo {
  width: 28px;
  height: 16px;
  object-fit: contain;
}

/* Project client names use t-heading-lg typography class */
.project-client-names {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.project-client-names p {
  margin: 0;
  padding: 0;
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.project-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.project-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

/* Project detail label uses t-label typography class */
/* Project detail value uses t-body-strong typography class */
.project-detail-value {
  margin: 0;
}

.project-detail-separator {
  width: 100%;
  height: 1px;
  background-color: var(--text-primary);
}

/* Project detail description uses t-body typography class */
.project-detail-description {
  margin: 0;
}

/* Project detail button uses t-button typography class */
.project-detail-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) 0 0 0;
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
  border: none;
  cursor: pointer;
}

.project-detail-button:hover {
  opacity: 0.7;
}

.project-detail-button svg {
  width: 11px;
  height: 11px;
}

/* ========== PROJECT PAGES ========== */
.project-pages-container {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  transition: opacity var(--duration-normal);
}

.project-page {
  position: relative;
  width: 100%;
  height: 100vh; /* Use fixed height instead of min-height for proper constraint */
  min-height: 100vh; /* Fallback for content that might overflow */
  padding: 0;
  margin: 0;
  /* Remove flex centering - layout components handle their own positioning */
  display: block;
  overflow: hidden; /* Default to hidden for most layouts */
}

/* Allow carousel layout to peek outside project page */
.project-page:has(.layout-container[data-layout="carousel"]) {
  overflow-x: visible;
  overflow-y: hidden;
}

/* Layout containers inside project pages should use natural sizing */
.project-page > .layout-container {
  width: 100%;
  height: 100%; /* Inherit full height from parent */
  /* Remove flex-specific properties - not needed with display: block */
}

@media (max-width: 768px) {
  .project-pages-container {
    min-height: 100vh;
  }

  .project-page {
    height: auto;
    min-height: 130vw; /* Minimum 1.3x screen width for comfortable viewing */
    overflow-y: visible; /* Allow layouts with long content to expand */
  }

  .project-page:has(.layout-container[data-layout="carousel"]) {
    overflow-y: visible; /* Carousel peeks horizontally but still scrolls vertically */
  }

  .project-page > .layout-container {
    height: auto;
    min-height: 130vw; /* Minimum 1.3x screen width */
  }

  .project-page > .layout-container .layout-page {
    height: auto;
    min-height: 130vw; /* Minimum 1.3x screen width */
  }
}

/* Mobile project intro feed */
.mobile-project-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
  padding: 0 var(--unit);
  margin: var(--spacing-2xl) 0 var(--spacing-4xl);
}

.mobile-project-intro__hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  padding-top: var(--unit-2x);
  cursor: pointer;
  touch-action: manipulation;
  min-height: min(90vh, 780px);
  height: min(90vh, 780px);
  width: 100%;
  background: var(--surface-primary);
  transition: transform var(--duration-fast) var(--easing-default), opacity var(--duration-fast) var(--easing-default);
}

.mobile-project-intro__hero:active {
  transform: scale(0.985);
}

.mobile-project-intro__hero:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 6px;
}

.mobile-project-hero-device {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
}

.mobile-project-hero-device [data-media-wrapper],
.mobile-project-hero-device .media-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-project-hero-device img,
.mobile-project-hero-device video,
.mobile-project-hero-device .media-element {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

.mobile-project-intro__details {
  padding-bottom: var(--spacing-xl);
}

.mobile-project-intro__details .caption-component {
  width: 100%;
}

/* ========== PAGE COMPONENTS ========== */
/* Title Page - uses t-display-xxl and t-caption typography pattern classes */
.page-title-content {
  text-align: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--unit);
}

.page-title-heading {
  margin: 0 0 var(--spacing-xl) 0;
}

.page-title-platforms {
  margin: 0;
  color: var(--text-secondary);
}

/* Mockups Page */
.page-mockups-content {
  width: 100%;
  max-width: 1779px;
  margin: 0 auto;
  padding: 0 var(--unit-2x);
}

.page-mockups-content img {
  width: 100%;
  height: auto;
  display: block;
}

/* Columns Page */
.page-columns-content {
  display: flex;
  gap: var(--spacing-4xl); /* 100px desktop, 60px mobile */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--unit-2x);
}

.page-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Column styles moved to layout.css and use typography pattern classes */
/* All typography handled by typography.css pattern classes */

/* ========== CAPTION COMPONENT ========== */
/* Typography handled by pattern classes: t-heading-lg, t-label, t-body, t-button */

/* Component container - defines overall layout */
.caption-component {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  width: 314px;
  color: var(--text-primary);
  padding: 0; /* No padding */
  margin: 0; /* No margin */
}

/* Individual caption item - inherits from parent */
.caption__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

/* Typography elements use pattern classes directly - minimal overrides */
.caption__item p {
  margin: 0;
  padding: 0;
}

/* All caption items wrap and truncate after 2 lines by default */
.caption__item .t-heading-lg,
.caption__item .t-label,
.caption__item .t-caption-strong,
.caption__item .t-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: visible; /* Allow descenders to be visible */
  text-overflow: ellipsis;
  white-space: normal;
  padding-bottom: 0.15em; /* Extra space for descenders like 'g', 'y', 'p', 'q' */
}

/* Description (body): wrap without truncation */
.caption__item .t-body {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
}

/* PAGE VARIANT: Description uses sentence case (not uppercase) */
.caption__item--description .t-caption {
  text-transform: none;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Separator line */
.caption__separator {
  height: 0;
  width: 100%;
  position: relative;
}

.caption__separator::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--text-primary);
}

/* Hide separator on last caption item (dividers only between items) */
.caption__item:last-child .caption__separator::after {
  display: none;
}

/* Project variant header */
.caption__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-bottom: var(--spacing-xl);
  width: 100%;
}

.caption__logo {
  width: 28px;
  height: 16px;
  margin-bottom: var(--spacing-sm);
}

.caption__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.caption__header p {
  margin: 0;
  padding:0;
  line-height: var(--line-height-tight);
}

.caption__year {
  color: var(--color-base-black);
  font-weight: var(--font-weight-light);
}

/* ========== BUTTON COMPONENT ========== */
/*
 * Two variants only:
 * - .btn--default: Frosted glass pill (UI buttons)
 * - .btn--inline: White pill with gray border (text/inline buttons)
 *
 * Shape modifier:
 * - .btn--circle: Makes button circular (combine with --default)
 *
 * Dark mode: Only text/icon color changes to white
 */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--size-small); /* 28px */
  padding: 0 12px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 100px;
  cursor: pointer;
  transition:
    transform var(--duration-quick) ease,
    opacity var(--duration-quick) ease,
    color var(--duration-theme) ease-out,
    background-color var(--duration-theme) ease-out;
  vertical-align: middle;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

.btn:active {
  transform: scale(0.98);
}

/* Button icon */
.btn__icon {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity var(--duration-quick);
}

.btn:hover .btn__icon {
  opacity: 1;
}

/* ===== DEFAULT VARIANT ===== */
/* Frosted glass pill - matches UI layer buttons */
.btn--default {
  min-width: 64px;
  min-height: 64px;
  background-color: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  border: 1px solid var(--glass-border-light);
  color: var(--color-base-black);
}

.btn--default:hover {
  background-color: var(--glass-hover-light);
  transform: scale(1.05);
}

/* ===== INLINE VARIANT ===== */
/* White pill with gray border - for text/inline buttons */
.btn--inline {
  background: white;
  border: 1px solid #d0d0d0;
  color: #333;
}

.btn--inline:hover {
  background: #f5f5f5;
  border-color: #333;
}

/* ===== CIRCLE MODIFIER ===== */
/* Combine with --default for circular buttons */
.btn--circle {
  width: var(--size-medium); /* 40px */
  height: var(--size-medium);
  padding: 0;
  border-radius: 50%;
}

.btn--circle svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .btn--circle {
    width: 36px;
    height: 36px;
  }
  .btn--circle svg {
    width: 20px;
    height: 20px;
  }
}

/* ===== DARK THEME ===== */
/* Only text/icon color changes to white */
[data-theme="dark"] .btn--default,
[data-theme="dark"] .btn--inline {
  color: white;
}

/* ===== CAPTION BUTTON ===== */
/* Used by Caption component for project CTAs */
.caption__button {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-xs);
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity var(--duration-quick);
}

.caption__button span {
  padding: 0.2em 0;
}

.caption__button:hover {
  opacity: 0.7;
}

.caption__button-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transform: rotate(180deg) scaleY(-1);
}

/* Theme overrides */
[data-theme="dark"] .main-header {
  background-color: var(--glass-bg-dark);
  border-bottom: 1px solid var(--glass-border-dark);
}

[data-theme="dark"] .caption-component {
  color: var(--text-primary);
}

[data-theme="dark"] .caption__separator::after {
  background: var(--text-primary);
}

[data-theme="dark"] .caption__button {
  color: var(--text-primary);
}

/* ========== IMAGE COMPONENT ========== */
/* Base image component styles */
.image-component {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary); /* Ensure theme-aware background for all media */
}

/* Make image component transparent when media is loaded */
.image-component:has(.media-loaded),
.image-component:has(.media-element[style*="opacity: 1"]) {
  background: transparent !important;
}

.image-component__media,
.image-component__img,
.image-component__video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Default value, can be overridden by inline styles */
  object-position: center;
  display: block;
}

/* Video-specific styles in image component */
.image-component__video {
  background: var(--bg-primary); /* Use theme-aware background while loading */
}

/* Make video transparent when loaded */
.image-component__video.media-loaded,
.media-wrapper:has(.media-loaded) .image-component__video {
  background: transparent !important;
}

/* Darken variant - 50% black scrim using ::after pseudo-element */
.image-component[data-variant="darken"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--scrim-light);
  z-index: 3;
  pointer-events: none;
}

/* Blur variant - 80px blur + 30% black scrim */
.image-component[data-variant="blur"] .image-component__img,
.image-component[data-variant="blur"] .image-component__video,
.image-component[data-variant="blur"] .image-component__media,
.image-component[data-variant="blurred"] .image-component__img,
.image-component[data-variant="blurred"] .image-component__video,
.image-component[data-variant="blurred"] .image-component__media {
  filter: blur(80px);
  /* Scale up slightly to hide blur edges */
  transform: scale(1.4);
}

.image-component[data-variant="blur"]::after,
.image-component[data-variant="blurred"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--scrim-dark);
  z-index: 3;
  pointer-events: none;
}

/* Responsive - reduce blur intensity on mobile for better performance */
@media (max-width: 768px) {
  .image-component[data-variant="blur"] .image-component__img,
  .image-component[data-variant="blur"] .image-component__video,
  .image-component[data-variant="blur"] .image-component__media,
  .image-component[data-variant="blurred"] .image-component__img,
  .image-component[data-variant="blurred"] .image-component__video,
  .image-component[data-variant="blurred"] .image-component__media {
    filter: blur(40px);
  }
}

/* ========== MOCKUP COMPONENT ========== */
/* Mockup component - displays image with optional number and title */
.mockup-component {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  height: auto;
}

/* Image wrapper - contains the image */
.mockup-component__image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  transform: translateZ(0); /* Force GPU acceleration for smooth rendering */
  backface-visibility: hidden; /* Improve rendering quality */
}

/* Media (image/video) inside mockup */
.mockup-component__media,
.mockup-component__image,
.mockup-component__video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border: none;
  outline: none;
  border-radius: 0;
}

/* Video-specific styles */
.mockup-component__video {
  background: transparent; /* Transparent background to avoid visible borders */
}

/* Details container (number + title) */
.mockup-component__details {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: min(var(--max-width-details), 100%);
  box-sizing: border-box;
  margin-top: var(--spacing-md); /* Fixed 10px gap between image and details */
  align-self: stretch;
  text-align: left;
}

/* Number styling - uses t-caption-strong class */
.mockup-component__number {
  flex-shrink: 0;
  color: var(--text-primary);
}

/* Title styling - uses t-caption class */
.mockup-component__title {
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-secondary);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* ========== MOCKUP LAYOUT PATTERNS ========== */
/*
 * Unified mockup layout system
 * All mockup layouts use these standard patterns for consistent behavior
 *
 * Layout alignment principles:
 * - MockupOnePage: Center horizontally and vertically
 * - MockupTwoPage/ThreePage: Right-aligned horizontally, centered vertically
 * - All mockups use same scale factor
 * - Row container never exceeds _inner bounds
 */

/* Mockup component styling - mockups are direct children of layout-content */
.layout-content .mockup-component {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto; /* Allow natural width based on content */
  flex-shrink: 0; /* Prevent shrinking */
  /* Natural dimensions preserved, scaling applied to image-wrapper */
}

/* Single mockup layouts - center the details */
.layout-mockup-single .mockup-component {
  align-items: center; /* Center the image */
}

.layout-mockup-single .mockup-component__details {
  align-self: flex-start; /* Align details to left edge of image */
  margin-left: 0; /* Remove centering */
  margin-right: auto;
}

/* Image wrapper - dimensions set by JavaScript */
.layout-content .mockup-component__image-wrapper {
  /* Width and height set dynamically by JavaScript scaling */
  overflow: hidden;
  flex-shrink: 0; /* Prevent flex from altering scaled dimensions */
}

/* Image scales with wrapper */
.layout-content .mockup-component__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Details remain at natural size below scaled image */
.layout-content .mockup-component__details {
  /* Inherits natural typography size from .t-caption/.t-caption-strong */
  /* Gap between image and details handled by mockup component CSS */
}

/* ========== MOBILE MOCKUP LAYOUTS ========== */
@media (max-width: 768px) {
  /* Mockups are already direct children of layout-content */
  /* Mobile stacking handled by CSS media query in layout.css */

  /* Center mockup components on mobile */
  .layout-content .mockup-component {
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    align-items: center; /* Center all children horizontally */
    /* Gap handled by JavaScript to scale properly */
  }

  /* Ensure mockup images are centered within their container */
  .layout-content .mockup-component__image-wrapper {
    margin: 0 auto; /* Center the image wrapper */
  }

  /* Center mockup details (number and title) on mobile */
  .mockup-component__details {
    justify-content: center; /* Center the flex items */
    width: 100%; /* Full width to enable centering */
  }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-reveal {
  animation: fadeIn var(--duration-fast) var(--easing-default) forwards;
  opacity: 0;
}

.animate-hide {
  animation: fadeOut var(--duration-fast) var(--easing-default) forwards;
  opacity: 1;
}

.project-page {
  animation: fadeInUp var(--duration-normal) var(--easing-default);
  animation-fill-mode: backwards;
}

.project-page:nth-child(1) { animation-delay: 0s; }
.project-page:nth-child(2) { animation-delay: var(--duration-instant); }
.project-page:nth-child(3) { animation-delay: calc(var(--duration-instant) * 2); }
.project-page:nth-child(4) { animation-delay: calc(var(--duration-instant) * 3); }
.project-page:nth-child(5) { animation-delay: calc(var(--duration-instant) * 4); }

/* ========== RESPONSIVE ========== */
/* Mobile: Single breakpoint at 768px */
@media (max-width: 768px) {
  /* Header adjustments - auto spacing with minimum gaps */
  .main-header {
    padding: 0 var(--unit) 0 var(--unit);
    gap: var(--spacing-sm); /* Minimum gap between elements */
  }

  /* Logo stays at natural size */
  .main-logo {
    flex-shrink: 0;
  }

  /* Project label with truncation */
  .header-project-label {
    position: static; /* Remove absolute positioning */
    transform: none; /* Remove centering transform */
    flex: 1; /* Take available space */
    min-width: 0; /* Allow flex item to shrink below content size */
    text-align: center; /* Center text within available space */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Menu stays at natural size */
  .main-menu {
    flex-shrink: 0;
  }

  /* Hero section mobile layout */
  .hero-section {
    padding: var(--unit) var(--unit) 0 var(--unit);
  }

  body.mobile-project-details .hero-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-3xl);
    height: auto;
    min-height: 100vh;
    padding-bottom: var(--spacing-4xl);
  }

  .nav-helper {
    display: none;
  }

  .carousel-outer {
    left: var(--unit);
    right: var(--unit);
  }

  /* Mobile carousel: center items horizontally, keep bottom alignment */
  .mockups-container {
    justify-content: center; /* Center carousel items */
    /* Keep align-items: flex-end from desktop - items stay bottom-aligned */
  }

  /* Mobile project page separators for better scanning */
  .project-page + .project-page {
    border-top: 1px solid var(--border-color);
  }

  /* Mobile project details positioning - below scaled device */
  #project-details-slot {
    position: fixed;
    left: var(--unit);
    right: var(--unit);
    bottom: auto; /* Will be positioned dynamically by JS */
    top: auto; /* Will be positioned dynamically by JS */
    max-width: none;
    width: calc(100vw - var(--unit) * 2);
    align-items: stretch; /* Stretch caption to full width */
    z-index: 1; /* Below footer and header on mobile */
  }

  body.mobile-project-details #project-details-slot {
    order: 4;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    padding: var(--spacing-xl) var(--unit) 0 var(--unit);
    margin-top: var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    z-index: var(--z-overlay);
    pointer-events: auto;
  }

  .project-details {
    max-width: 100%;
    width: 100%;
  }

  /* Caption component fills width on mobile */
  .caption-component {
    width: 100%;
    max-width: 100%;
  }

  body.mobile-project-details .caption-component {
    width: 100%;
    max-width: none;
  }

  body.mobile-project-details .carousel-outer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    order: 3;
  }

  body.mobile-project-details .mockups-container {
    position: static;
    min-height: auto;
    width: 100%;
    justify-content: center;
  }

  body.mobile-project-details .device-item {
    margin: 0 auto;
  }

  body.mobile-project-details .works-heading {
    order: 1;
  }

  body.mobile-project-details .nav-helper {
    order: 2;
  }

  /* Project details list stacks vertically on mobile */
  .project-details-list {
    flex-direction: column;
  }

  .project-client-names {
    flex-direction: column;
  }

  /* Project pages - minimum height for comfortable viewing on mobile */
  .project-page {
    height: auto;
    min-height: 130vw; /* Minimum 1.3x screen width */
  }

  /* Page layout stacking */
  .page-columns-content {
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: 0 var(--unit);
  }

  .page-mockups-content {
    padding: 0 var(--unit);
  }

  /* Caption responsive sizing */
  .caption-component {
    width: 100%;
    max-width: 314px;
  }
}

/* ========== CAROUSEL COMPONENT ========== */
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Carousel viewport - visible area, clips overflow */
.carousel__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-x: none; /* Prevent browser back/forward on swipe */
  touch-action: pan-y pinch-zoom; /* Allow vertical page scroll; horizontal handled via JS */
}

/* Carousel track - horizontal flexbox with fixed gaps */
.carousel__track {
  display: flex;
  gap: var(--spacing-3xl); /* Fixed gap between slides (60px desktop, 40px mobile) */
  width: 100%;
  height: 100%;
  align-items: flex-end; /* Align all slides to bottom */
  transition: transform var(--duration-slow) var(--easing-apple-carousel);
  will-change: transform;
}

/* Individual slide - wraps mockup component */
.carousel__slide {
  position: relative;
  flex: 0 0 auto;
  min-width: 90vw;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.4;
  transition: opacity var(--duration-slow) var(--easing-apple-carousel);
}

.carousel__slide--active {
  opacity: 1;
  z-index: 1;
}

/* Override mockup positioning so slide becomes the context */
.carousel__slide .mockup-component {
  position: static;
}

/* Caption/number at bottom-left of slide container */
.carousel__slide .mockup-component__details {
  position: absolute;
  left: 0;
  bottom: 0;
}

/* Navigation container - spans full carousel for side-positioned buttons */
.carousel__navigation {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none; /* Allow clicks through to slides */
  z-index: var(--z-elevated);
}

/* Navigation button containers - UI button size with centered secondary button */
.carousel__nav-container {
  width: var(--size-standard);
  height: var(--size-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Navigation buttons */
.carousel__nav-button {
  pointer-events: auto;
}

.carousel__nav-button--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}


/* Pagination dots - positioned at bottom right of layout container */
.carousel__pagination {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  z-index: var(--z-elevated);
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: var(--text-secondary);
  opacity: 0.3;
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-default);
  padding: 0;
}

.carousel__dot:hover {
  opacity: 0.6;
  transform: scale(1.2);
}

.carousel__dot--active {
  opacity: 1;
  background: var(--text-primary);
  transform: scale(1.3);
}

/* Mobile responsive - vertical stack: media / caption / nav */
@media (max-width: 768px) {
  .carousel {
    display: flex;
    flex-direction: column;
  }

  .carousel__viewport {
    order: 1;
  }

  .carousel__track {
    gap: var(--spacing-2xl);
  }

  .carousel__slide {
    min-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .carousel__slide--active {
    opacity: 1;
  }

  /* Reset absolute positioning - flow naturally below media */
  .carousel__slide .mockup-component {
    position: relative;
    width: 100%;
  }

  .carousel__slide .mockup-component__details {
    position: static;
    order: 2;
    margin-top: var(--spacing-md);
    text-align: center;
  }

  /* Nav below content */
  .carousel__navigation {
    position: static;
    order: 3;
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
  }

  .carousel__nav-container {
    width: auto;
    height: auto;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .carousel__track,
  .carousel__slide,
  .carousel__nav-button,
  .carousel__dot {
    transition: none;
  }
}

/* ========== FOOTER ========== */
.main-footer {
  background-color: var(--color-base-black);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--unit-4x) var(--unit) var(--unit) var(--unit);
  color: var(--color-base-white);
  min-height: 280px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .main-footer {
    padding-bottom: calc(var(--unit) + env(safe-area-inset-bottom));
  }
}

.footer-content {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--spacing-4xl);
  height: 100%;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 480px;
  justify-content: space-between;
}

.footer-title {
  color: var(--color-base-white);
  margin: 0;
}

.footer-description {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: auto;
}

.footer-links a {
  color: var(--color-base-white);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 2px;
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-base-white);
  transition: width var(--duration-fast) var(--easing-default);
}

.footer-links a:hover::after {
  width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .main-footer {
    padding: var(--unit-2x) var(--unit) var(--unit) var(--unit);
    min-height: auto;
  }

  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .main-footer {
      padding-bottom: calc(var(--unit) + env(safe-area-inset-bottom));
    }
  }

  .footer-content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2xl);
  }

  .footer-left {
    max-width: 100%;
    gap: var(--spacing-md);
  }
}

/* ========== CAROUSEL ERROR STATE ========== */
.carousel__slide--error {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg, 12px);
}

.carousel__slide-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--text-tertiary);
}

.carousel__slide-error svg {
  opacity: 0.4;
  color: var(--text-secondary);
}

.carousel__slide-error p {
  margin: 0;
  opacity: 0.6;
}

.carousel__slide-error button {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-default);
}

.carousel__slide-error button:hover {
  background: var(--bg-secondary);
  border-color: var(--border-secondary);
}