@charset "UTF-8";
/**
 * Artist Slider Block - Frontend Styles
 *
 * Displays artists in a horizontal carousel slider.
 * Uses shared carousel component and artist card styles.
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Token Index
 * Forwards all design tokens
 *
 * Usage in other files:
 * @use '../shared/tokens' as tokens;
 *
 * color: tokens.$color-base-black;
 */
/**
 * Color Tokens
 * Pure CSS variables - no mixins, just values
 * Can be safely imported anywhere
 */
/**
 * Spacing Tokens
 * Pure CSS variables - no mixins, just values
 * Can be safely imported anywhere
 */
/**
 * Typography Tokens
 * Pure CSS variables - no mixins, just values
 * Can be safely imported anywhere
 */
/**
 * Breakpoint Tokens
 * Pure values - no mixins, just variables
 * Can be safely imported anywhere
 */
/**
 * Transition & Animation Tokens
 * Pure CSS variables - no mixins, just values
 * Can be safely imported anywhere
 */
/**
 * Mixins Index
 * Forwards all mixins for use in components
 *
 * Usage:
 * @use '../shared/mixins' as mix;
 *
 * .container { @include mix.container(); }
 * .heading { @include mix.heading-lg(); }
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Container Mixins
 * Reusable container patterns
 *
 * Usage:
 * @use '../shared/mixins' as mix;
 * .my-class { @include mix.container(); }
 */
/**
 * Responsive Mixins
 * Media query helpers using modern SASS
 *
 * Usage:
 * @use '../shared/mixins' as mix;
 * @include mix.media-md { ... }
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Typography Mixins
 * Reusable text styles
 *
 * Usage:
 * @use '../shared/mixins' as mix;
 * h1 { @include mix.heading-lg(); }
 */
/**
 * Background Mixins
 * Consistent background and text color combinations
 *
 * Usage:
 * @use '../shared/mixins' as mix;
 * .block { @include mix.block-backgrounds('block-name'); }
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Height System Mixins
 * Reusable height constraints for images and media blocks
 */
/**
 * Apply height variants for images
 * Works with both cover and contain object-fit modes
 * - Cover mode: Fixed height (crops to fill)
 * - Contain mode: Max height (scales down proportionally)
 *
 * @param {String} $selector - The image selector to apply heights to
 * @param {String} $block-class - The block class for data attributes
 */
/**
 * Apply object-fit modes for images
 *
 * @param {String} $selector - The image selector
 * @param {String} $block-class - The block class for data attributes
 */
/**
 * Apply height variants for block containers (not images)
 * For hero/banner blocks that need full container height control
 *
 * @param {String} $block-class - The block class for data attributes
 */
/**
 * Card-specific height system with aspect-ratio on mobile
 * Hybrid approach: aspect-ratio on mobile, vh-driven on desktop
 *
 * Mobile: Content-aware (aspect ratio) with max-height constraint
 * Desktop: Viewport-driven (vh) with min-height fallback (existing behavior)
 *
 * This solves mobile scroll issues while preserving desktop impact.
 *
 * @param {String} $selector - The image selector to apply heights to
 * @param {String} $block-class - The block class for data attributes
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Alignment Mixins
 * Reusable alignment patterns for images and media blocks
 */
/**
 * Apply image alignment within containers
 *
 * @param {String} $figure-selector - The figure/wrapper selector
 * @param {String} $block-class - The block class for data attributes
 * @param {Boolean} $include-container - Whether to include container alignment
 */
/**
 * Apply caption alignment based on image alignment
 *
 * @param {String} $caption-selector - The caption selector
 * @param {String} $block-class - The block class for data attributes
 */
/**
 * Apply vertical alignment for grid containers
 * Used for multi-image layouts (double, triple)
 *
 * @param {String} $container-selector - The grid container selector
 * @param {String} $block-class - The block class for data attributes
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Grid Split Ratio Mixins
 * Reusable grid column layouts for multi-column blocks
 *
 * Usage:
 * @use '../shared/mixins' as mix;
 *
 * .my-block {
 *   @include mix.grid-split-two('.my-block-inner');
 * }
 */
/**
 * Two-column split ratio layouts
 * Supports: 50-50, 60-40, 40-60, 70-30, 30-70
 *
 * @param {String} $inner-selector - The grid container selector (e.g., '.inner', '.grid')
 * @param {String} $block-class - Optional block class for scoping
 */
/**
 * Two-column split ratios for edge-to-edge layouts
 * Uses fr units instead of column spans (simpler for edge-to-edge)
 *
 * @param {String} $inner-selector - The grid container selector
 * @param {String} $block-class - Optional block class for scoping
 */
/**
 * Three-column split ratio layouts
 * Supports: 33-33-33, 25-25-50, 50-25-25
 *
 * @param {String} $inner-selector - The grid container selector
 * @param {String} $block-class - Optional block class for scoping
 */
/**
 * Three-column split ratios for edge-to-edge layouts
 *
 * @param {String} $inner-selector - The grid container selector
 * @param {String} $block-class - Optional block class for scoping
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Flexbox Split Layout Mixins
 * Reusable flexbox layouts for side-by-side blocks
 *
 * Handles common flexbox split pattern:
 * - Mobile: column layout (stacked)
 * - Desktop: row layout (side-by-side)
 * - Prevents overflow bugs from width: 100% + flex-basis conflicts
 *
 * Usage:
 * @use '../shared/mixins' as mix;
 *
 * .my-block {
 *   @include mix.flex-split-container();
 * }
 * .my-block-child {
 *   @include mix.flex-split-child();
 * }
 */
/**
 * Flexbox split container
 * Use on parent element that contains split children
 *
 * @param {String} $gap-mobile - Gap between items on mobile (default: 0)
 * @param {String} $gap-desktop - Gap between items on desktop (default: 0)
 */
/**
 * Flexbox split child
 * Use on child elements within a flex split container
 * Prevents overflow by only applying width: 100% on mobile
 *
 * IMPORTANT: This prevents the common bug where width: 100% + flex-basis
 * causes horizontal overflow in flexbox row layouts
 */
/**
 * Flexbox split ratios
 * Use on children to control their width in desktop split layout
 *
 * @param {String} $ratio - Split ratio (50-50, 40-60, 60-40)
 * @param {String} $position - Which child this is (left, right, first, second)
 */
/**
 * Flexbox split with data attribute support
 * Generates split ratios based on data-split attribute
 * Use this on the container when you want data-attribute control
 *
 * @param {String} $child-selector - The child element selector
 * @param {String} $block-class - Optional block class for scoping
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Overlay System Mixins
 * Reusable overlay patterns for darkening/lightening images and media
 */
/**
 * Apply image overlay with opacity levels
 * Creates a dark overlay element that sits on top of images
 *
 * @param {String} $overlay-class - The overlay element class name (e.g., 'inner-hero-overlay')
 * @param {String} $block-class - The block class for data attributes (null uses &)
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Carousel Mixins
 * Reusable patterns for Swiper.js carousel implementations
 *
 * Provides consistent edge padding and overflow control for carousels
 * to ensure first and last slides have proper spacing from viewport edges.
 */
/**
 * Carousel Edge Padding
 * Adds responsive padding to carousel wrapper to match inter-slide spacing.
 * This ensures first and last slides don't touch viewport edges.
 *
 * Usage:
 * .my-block[data-style="slider"] {
 *     @include carousel-edge-padding();
 * }
 */
/**
 * Carousel Edge Padding with Custom Values
 * Allows overriding the default spacing values if needed.
 *
 * @param {string} $mobile-sm - Spacing for mobile 320px (default: $spacing-4)
 * @param {string} $mobile-lg - Spacing for mobile 480px (default: $spacing-5)
 * @param {string} $tablet - Spacing for tablet 768px (default: $spacing-6)
 * @param {string} $desktop - Spacing for desktop 1024px (default: $spacing-8)
 *
 * Usage:
 * .my-special-carousel {
 *     @include carousel-edge-padding-custom($spacing-3, $spacing-4, $spacing-5, $spacing-6);
 * }
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Artwork Card Component
 * Ported from ARTBID design system: artist-archive-block
 * Source: /Users/user/Dev/nextjs/artbid-system/src/assets/css/main.css (lines 10120-10195)
 */
/* ============================================
   GRID
   Responsive: 1 → 2 → 3 → 4 columns
   ============================================ */
/* ============================================
   CARD WRAPPER (LINK)
   Design System: @apply block; @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black; border-radius: var(--radius-brand);
   ============================================ */
.artwork-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  box-sizing: border-box;
}
.artwork-card:focus-visible {
  outline: var(--spacing-scale-0) 0.5 solid var(--color-base-black);
  outline-offset: var(--spacing-scale-0) 0.5;
}

/* ============================================
   INNER WRAPPER
   Design System: @apply block;
   ============================================ */
.artwork-card-inner {
  display: block;
  box-sizing: border-box;
}

/* ============================================
   IMAGE WRAPPER - Tan Matte Background
   Design System:
     background-color: var(--color-tan);
     @apply relative w-full;
     aspect-ratio: 3/4;
     @apply p-4 md:p-6;
     @apply overflow-hidden;
     @apply flex items-center justify-center;
     border-radius: var(--radius-brand);
     @apply mb-4;
   ============================================ */
.artwork-card-image-wrapper {
  background-color: var(--color-warm-300);
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  padding: var(--spacing-scale-4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin-bottom: var(--spacing-scale-4);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .artwork-card-image-wrapper {
    padding: var(--spacing-scale-6);
  }
}

/* ============================================
   IMAGE
   Design System: @apply w-full h-full object-contain;
   WordPress: object-fit: contain maintains natural aspect ratio
   ============================================ */
.artwork-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================
   IMAGE PLACEHOLDER
   ============================================ */
.artwork-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
}
.artwork-card-image-placeholder svg {
  width: var(--spacing-scale-12);
  height: var(--spacing-scale-12);
}

/* ============================================
   INFO CONTAINER (Flex container for details + badge)
   Design System: @apply flex items-start justify-between gap-4;
   ============================================ */
.artwork-card-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-scale-4);
}

/* ============================================
   DETAILS (Text content area)
   Design System: @apply flex-1;
   ============================================ */
.artwork-card-details {
  flex: 1;
}

/* ============================================
   TITLE
   Design System:
     @apply text-base font-medium mb-1;
     font-style: italic;
   ============================================ */
.artwork-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--spacing-scale-1);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-gray-900);
}

/* ============================================
   YEAR (Inline with title)
   ============================================ */
.artwork-card-year {
  font-weight: var(--font-weight-normal);
  font-style: normal;
}

/* ============================================
   ARTIST (for auction context)
   ============================================ */
.artwork-card-artist {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-scale-1);
  line-height: 1.4;
}

/* ============================================
   META (Year, Medium)
   Design System: @apply text-sm text-gray-600 mb-1;
   ============================================ */
.artwork-card-meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-scale-1);
  line-height: 1.5;
}

/* ============================================
   DIMENSIONS
   Design System: @apply text-sm text-gray-500;
   ============================================ */
.artwork-card-dimensions {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   BADGE (Sold badge on the right)
   Artist artworks context: Just bold text "Sold"
   Other contexts: Background box (preserved for backwards compatibility)
   ============================================ */
.artwork-card-badge {
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  flex-shrink: 0;
  align-self: flex-start;
}
.artwork-card-badge.artwork-card-badge--box {
  padding: var(--spacing-scale-1) var(--spacing-scale-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border-radius: 0;
}

/* ============================================
   PRICE
   ============================================ */
.artwork-card-price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-top: var(--spacing-scale-2);
}

/* ============================================
   OVERLAY (for masonry view)
   Default: hidden everywhere except in masonry view
   ============================================ */
.artwork-card-overlay {
  display: none;
}

/* ============================================
   AUCTION CONTEXT VARIANT
   ============================================ */
[data-context=artist] .artwork-card-artist {
  display: none;
}

[data-context=auction] .artwork-card-title {
  font-style: normal;
}

[data-context=auction] .artwork-card-badge {
  display: none;
}

[data-context=auction] .artwork-card-meta,
[data-context=auction] .artwork-card-dimensions {
  display: none;
}

/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Post Card Component (Journal Card)
 * Converted from: assets/css/journal-archive.css
 * Used by: Latest Posts block, Archive templates, Blog pages
 *
 * Structure:
 * .post-card (or .journal-card) - Article wrapper
 *   .post-card-image - Featured image (4:3 aspect ratio)
 *   .post-card-content - Content wrapper
 *     .post-card-meta - Date + Category
 *       .post-card-date
 *       .post-card-category
 *     .post-card-title - H3 title with display font
 *     .post-card-excerpt - Excerpt text
 *     .post-card-cta - "Read more" link
 */
/* ============================================
   GRID MIXIN
   Responsive: 1 → 2 → 3 columns
   ============================================ */
/* ============================================
   CARD WRAPPER
   ============================================ */
.post-card,
.journal-card {
  display: block;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-out;
}
.post-card a,
.journal-card a {
  position: relative;
  z-index: 1;
}
.post-card:focus-within,
.journal-card:focus-within {
  outline: 2px solid var(--color-base-black);
  outline-offset: var(--spacing-scale-1);
  border-radius: 0;
}
.post-card[style*="display: none"],
.journal-card[style*="display: none"] {
  display: none !important;
}

/* ============================================
   CARD IMAGE
   4:3 aspect ratio with gray background
   ============================================ */
.post-card-image,
.journal-card-image,
.post-card .wp-block-post-featured-image,
.journal-card .wp-block-post-featured-image {
  width: 100%;
  margin-bottom: var(--spacing-scale-2);
  display: block;
  background-color: var(--color-gray-100);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 0;
}
.post-card-image img,
.journal-card-image img,
.post-card .wp-block-post-featured-image img,
.journal-card .wp-block-post-featured-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* ============================================
   CARD CONTENT
   Gap between elements: 0.75rem
   ============================================ */
.post-card-content,
.journal-card-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-3);
  padding-top: var(--spacing-scale-2);
}

/* ============================================
   META: Date & Category
   ============================================ */
.post-card-meta,
.journal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-scale-4);
  font-size: var(--font-size-xs);
  margin: 0;
}

.post-card-date,
.journal-card-date,
.post-card .wp-block-post-date,
.journal-card .wp-block-post-date {
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
}

.post-card-category,
.journal-card-category,
.post-card .wp-block-post-terms,
.journal-card .wp-block-post-terms {
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: var(--font-letterSpacing-wider);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
.post-card-category a,
.journal-card-category a,
.post-card .wp-block-post-terms a,
.journal-card .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

.post-card .wp-block-post-terms__separator,
.journal-card .wp-block-post-terms__separator {
  display: none;
}

/* ============================================
   TITLE
   Display font, responsive sizing
   ============================================ */
.post-card-title,
.journal-card-title,
.post-card .wp-block-post-title,
.journal-card .wp-block-post-title,
.post-card h3,
.journal-card h3,
.post-card .wp-block-post-title a,
.journal-card .wp-block-post-title a {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  line-height: var(--font-lineHeight-tight);
  margin: 0;
  color: var(--color-base-black);
  font-weight: var(--font-weight-normal);
}
@media (min-width: 768px) {
  .post-card-title,
  .journal-card-title,
  .post-card .wp-block-post-title,
  .journal-card .wp-block-post-title,
  .post-card h3,
  .journal-card h3,
  .post-card .wp-block-post-title a,
  .journal-card .wp-block-post-title a {
    font-size: var(--font-size-2xl);
  }
}

.post-card-title a,
.journal-card-title a,
.post-card .wp-block-post-title a,
.journal-card .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
  font-family: inherit;
}
.post-card-title a:hover,
.journal-card-title a:hover,
.post-card .wp-block-post-title a:hover,
.journal-card .wp-block-post-title a:hover {
  color: var(--color-gray-700);
}

/* ============================================
   EXCERPT
   Clamped to 3 lines
   ============================================ */
.post-card-excerpt,
.journal-card-excerpt,
.post-card .wp-block-post-excerpt,
.journal-card .wp-block-post-excerpt {
  font-size: var(--font-size-sm);
  line-height: var(--font-lineHeight-relaxed);
  color: var(--color-gray-600);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-card-excerpt,
  .journal-card-excerpt,
  .post-card .wp-block-post-excerpt,
  .journal-card .wp-block-post-excerpt {
    font-size: var(--font-size-base);
  }
}

.post-card .wp-block-post-excerpt__more-link,
.journal-card .wp-block-post-excerpt__more-link {
  display: none;
}

/* ============================================
   READ MORE CTA
   Underlined link that removes underline on hover
   ============================================ */
.post-card-cta-wrapper,
.journal-card-cta-wrapper {
  margin: 0;
}

.post-card-cta,
.journal-card-cta,
.post-card .wp-block-read-more,
.journal-card .wp-block-read-more {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-base-black);
  text-decoration: underline;
  transition: text-decoration 0.2s ease-in-out;
}
.post-card-cta:hover,
.journal-card-cta:hover,
.post-card .wp-block-read-more:hover,
.journal-card .wp-block-read-more:hover {
  text-decoration: none;
}

.post-card:hover .post-card-cta,
.journal-card:hover .journal-card-cta,
.post-card:hover .wp-block-read-more,
.journal-card:hover .wp-block-read-more {
  text-decoration: none;
}

/* ============================================
   SCREEN READER TEXT
   For accessible card links
   ============================================ */
.post-card-link,
.journal-card-link {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Carousel Component - Shared Swiper.js Carousel Styles
 *
 * Used by: Current Auction slider, Artist slider (future)
 * Based on artbid-system carousel patterns
 *
 * Features:
 * - Variable-width slides on desktop (based on image aspect ratio)
 * - Snap scrolling on mobile for better UX
 * - Universal navigation (dots + arrows)
 * - Light/dark theme support
 */
/* ============================================
   CAROUSEL UNIVERSAL NAVIGATION
   Reusable pagination dots and arrow buttons
   ============================================ */
/* Pagination dots container */
.carousel-pagination {
  display: flex;
  gap: var(--spacing-scale-2);
}

/* Individual pagination bullet (inactive - outline only) */
.carousel-pagination-bullet {
  width: var(--spacing-scale-2);
  height: var(--spacing-scale-2);
  border-radius: 50%;
  transition: all 0.2s;
  cursor: pointer;
  background: transparent;
}

/* Active pagination bullet (filled circle, same size) */
.carousel-pagination-bullet-active {
  /* No size change - stays circular */
}

/* Light theme bullets (for dark backgrounds) */
.carousel-pagination--light .carousel-pagination-bullet {
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.carousel-pagination--light .carousel-pagination-bullet:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

.carousel-pagination--light .carousel-pagination-bullet-active {
  background: var(--color-base-white);
  border-color: var(--color-base-white);
}

/* Dark theme bullets (for light backgrounds) */
.carousel-pagination--dark .carousel-pagination-bullet {
  border: 1px solid rgba(0, 0, 0, 0.6);
}
.carousel-pagination--dark .carousel-pagination-bullet:hover {
  border-color: rgba(0, 0, 0, 0.8);
}

.carousel-pagination--dark .carousel-pagination-bullet-active {
  background: var(--color-base-black);
  border-color: var(--color-base-black);
}

/* Navigation arrows - minimal square buttons */
.carousel-arrow {
  width: var(--spacing-scale-10);
  height: var(--spacing-scale-10);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border-radius: 0;
  cursor: pointer;
}
.carousel-arrow:focus-visible {
  outline: 2px solid var(--color-base-black);
  outline-offset: 2px;
}
.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.carousel-arrow svg {
  width: var(--spacing-scale-6);
  height: var(--spacing-scale-6);
}

/* Light theme arrows (for dark backgrounds) */
.carousel-arrow--light {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: var(--color-base-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.carousel-arrow--light:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}
.carousel-arrow--light:disabled:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Dark theme arrows (for light backgrounds) */
.carousel-arrow--dark {
  background: var(--color-base-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-base-black);
}
.carousel-arrow--dark:hover:not(:disabled) {
  background: var(--color-base-black);
  color: var(--color-base-white);
  border-color: var(--color-base-black);
}
.carousel-arrow--dark:disabled:hover {
  background: var(--color-base-white);
  color: var(--color-base-black);
  border-color: var(--color-gray-200);
}

/* ============================================
   ARTWORK CAROUSEL
   For current auction slider and artist slider
   ============================================ */
.artwork-carousel {
  padding-top: var(--spacing-block-md);
  padding-bottom: var(--spacing-block-md);
}

.artwork-carousel-heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  margin-bottom: 0;
}
.artwork-carousel-heading--center {
  text-align: center;
}
.artwork-carousel-heading--left {
  text-align: left;
}

.artwork-carousel-wrapper {
  position: relative;
  margin-top: var(--spacing-scale-6);
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
}

.artwork-carousel-swiper {
  overflow: visible;
}

.artwork-carousel-slide {
  height: auto;
  /* Width controlled by Swiper configuration and card content */
}

/* Navigation wrapper: CTA button + dots/arrows */
.artwork-carousel-nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: var(--spacing-scale-8);
}

/* CTA Button - centered on page */
.artwork-carousel-cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Navigation container - dots + arrows on right side */
.artwork-carousel-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-scale-4);
  margin-left: auto;
}

/* Pagination dots - position on right side */
.artwork-carousel-pagination,
[class*=artwork-carousel-pagination-] {
  position: static !important;
  width: auto !important;
  flex: 1;
  display: flex !important;
  justify-content: flex-end;
}

/* Arrow buttons - no additional styles needed, inherit from .carousel-arrow--dark */
.artwork-carousel-prev,
.artwork-carousel-next {
  /* Inherits from .carousel-arrow--dark */
}

/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
/**
 * Image Block Editor Styles
 * Shared editor preview styles for all image blocks
 *
 * Usage:
 * @use '../_shared' as *;
 * @include image-block-editor-base();
 */
/**
 * Base editor styles for image blocks with object-fit modes
 * Apply to any block that uses data-object-fit and data-height attributes
 *
 * @param {String} $block-class - The block class (e.g., 'content-full-image')
 * @param {String} $figure-class - The figure class (e.g., 'content-full-image-figure')
 */
/**
 * Editor grid layouts for multi-image blocks
 *
 * @param {String} $block-class - The block class
 * @param {String} $inner-class - The inner grid container class
 */
/**
 * Media upload placeholder styling
 */
/**
 * Shared Styles Index
 * Main entry point for all shared styles
 *
 * Usage in block styles:
 * @use '../_shared' as shared;
 *
 * .my-block {
 *   @include shared.block-container();
 * }
 */
.container {
  width: 100%;
  max-width: var(--layout-container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-container-inline);
  padding-right: var(--spacing-container-inline);
  box-sizing: border-box;
}

[data-container=narrow] .container {
  max-width: var(--layout-container-standard);
}

[data-container=prose] .container {
  max-width: var(--layout-container-prose);
}

[data-container=ultra] .container {
  max-width: var(--layout-container-ultra);
}

.artist-slider-block[data-bg=white] {
  background-color: var(--color-base-white);
}
.artist-slider-block[data-bg=white] .artist-slider-block-inner :not(.btn):not(.wp-block-button__link) {
  color: var(--color-base-black);
}
.artist-slider-block[data-bg=gray] {
  background-color: var(--color-gray-100);
}
.artist-slider-block[data-bg=gray] .artist-slider-block-inner :not(.btn):not(.wp-block-button__link) {
  color: var(--color-base-black);
}
.artist-slider-block[data-bg=tan] {
  background-color: var(--color-warm-300);
}
.artist-slider-block[data-bg=tan] .artist-slider-block-inner :not(.btn):not(.wp-block-button__link) {
  color: var(--color-base-black);
}
.artist-slider-block .artwork-carousel-wrapper {
  padding-left: var(--spacing-scale-4);
  padding-right: var(--spacing-scale-4);
  overflow-x: clip;
  overflow-y: visible;
}
@media (min-width: 480px) {
  .artist-slider-block .artwork-carousel-wrapper {
    padding-left: var(--spacing-scale-5);
    padding-right: var(--spacing-scale-5);
  }
}
@media (min-width: 768px) {
  .artist-slider-block .artwork-carousel-wrapper {
    padding-left: var(--spacing-scale-6);
    padding-right: var(--spacing-scale-6);
  }
}
@media (min-width: 1024px) {
  .artist-slider-block .artwork-carousel-wrapper {
    padding-left: var(--spacing-scale-8);
    padding-right: var(--spacing-scale-8);
  }
}
.artist-slider-block {
  /* ============================================
     HEIGHT VARIANTS
     Control the fixed height of artist card images
     ============================================ */
}
@media (min-width: 768px) {
  .artist-slider-block[data-height=half] .artist-card-image-wrapper {
    height: var(--layout-height-half);
    min-height: var(--layout-minHeight-md);
  }
  .artist-slider-block[data-height=two-thirds] .artist-card-image-wrapper {
    height: var(--layout-height-two-thirds);
    min-height: var(--layout-minHeight-lg);
  }
  .artist-slider-block[data-height=three-quarters] .artist-card-image-wrapper {
    height: var(--layout-height-three-quarters);
    min-height: var(--layout-minHeight-lg);
  }
  .artist-slider-block[data-height=full] .artist-card-image-wrapper {
    height: var(--layout-height-full);
    min-height: var(--layout-minHeight-xl);
  }
}
.artist-slider-block .artist-slider-empty {
  text-align: center;
  padding: var(--spacing-scale-12);
  background: var(--color-warm-50);
  border: 1px solid var(--color-warm-200);
}
.artist-slider-block .artist-slider-empty p {
  margin: 0;
  color: var(--color-gray-600);
  font-size: var(--font-size-base);
}
.artist-slider-block {
  /* ============================================
     ARTIST CARD STYLES
     Based on artbid-system artists-card pattern
     Fixed height desktop, variable width
     ============================================ */
}
.artist-slider-block .artist-card {
  display: block;
  position: relative;
  transition: transform 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.artist-slider-block .artist-card:focus-visible {
  outline: 2px solid var(--color-base-black);
  outline-offset: 2px;
}
.artist-slider-block .artist-card-image-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-scale-1);
  border-radius: 0;
}
.artist-slider-block {
  /* Mobile (<768px): Square 1:1 aspect ratio, cropped */
}
@media (max-width: 767px) {
  .artist-slider-block .artist-card-image-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
  }
  .artist-slider-block .artist-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .artist-slider-block .artist-card {
    width: 100%;
  }
  .artist-slider-block .artist-card-overlay {
    display: none !important;
  }
  .artist-slider-block .artist-card-name {
    position: relative !important;
    opacity: 1 !important;
  }
}
.artist-slider-block {
  /* Desktop (≥768px): Fixed height, variable width */
}
@media (min-width: 768px) {
  .artist-slider-block .artist-card-image-wrapper {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: auto;
    max-width: 600px;
  }
  .artist-slider-block .artist-card-image {
    height: 100%;
    width: auto;
    object-fit: cover;
    object-position: center;
  }
  .artist-slider-block .artwork-carousel-slide {
    width: auto !important;
  }
}
.artist-slider-block .artist-card-image {
  transition: transform 0.2s ease-out;
  border-radius: 0;
  display: block;
  border: 0.5px solid var(--color-gray-200);
}
.artist-slider-block .artist-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  color: var(--color-gray-300);
}
.artist-slider-block .artist-card-image-placeholder svg {
  width: var(--spacing-scale-16);
  height: var(--spacing-scale-16);
}
.artist-slider-block[data-display-style=overlay] .artist-card:hover .artist-card-image {
  transform: scale(1.05);
}
.artist-slider-block {
  /* ============================================
     OVERLAY MODE (Desktop only)
     Artist name centered on hover
     ============================================ */
}
@media (min-width: 768px) {
  .artist-slider-block[data-display-style=overlay] .artist-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-scale-6);
    color: var(--color-base-white);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
  .artist-slider-block[data-display-style=overlay] .artist-card:hover .artist-card-overlay {
    opacity: 1;
  }
  .artist-slider-block[data-display-style=overlay] .artist-card-overlay-name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    line-height: var(--font-lineHeight-tight);
    font-weight: var(--font-weight-normal);
  }
  .artist-slider-block[data-display-style=overlay] .artist-card-overlay-medium {
    display: none;
  }
  .artist-slider-block[data-display-style=overlay] .artist-card-name {
    display: none;
  }
}
.artist-slider-block {
  /* ============================================
     IMAGE-SWAP MODE (Desktop only)
     Swap portrait → cover artwork on hover
     ============================================ */
}
@media (min-width: 768px) {
  .artist-slider-block[data-display-style=image-swap] .artist-card-image-wrapper {
    position: relative;
    background-color: transparent;
    transition: background-color 0.2s;
  }
  .artist-slider-block[data-display-style=image-swap] .artist-card:hover .artist-card-image-wrapper {
    background-color: var(--color-warm-300);
  }
  .artist-slider-block[data-display-style=image-swap] .artist-card-image--portrait {
    opacity: 1;
    transition: opacity 0.3s;
    object-fit: cover;
    display: block;
  }
  .artist-slider-block[data-display-style=image-swap] .artist-card-image--cover {
    position: absolute;
    top: var(--spacing-scale-4);
    right: var(--spacing-scale-4);
    bottom: var(--spacing-scale-4);
    left: var(--spacing-scale-4);
    opacity: 0;
    transition: opacity 0.3s;
    object-fit: contain;
    width: auto;
    height: auto;
    max-width: calc(100% - var(--spacing-scale-4) * 2);
    max-height: calc(100% - var(--spacing-scale-4) * 2);
    margin: auto;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  .artist-slider-block[data-display-style=image-swap] .artist-card-image--cover {
    top: var(--spacing-scale-6);
    right: var(--spacing-scale-6);
    bottom: var(--spacing-scale-6);
    left: var(--spacing-scale-6);
    max-width: calc(100% - var(--spacing-scale-6) * 2);
    max-height: calc(100% - var(--spacing-scale-6) * 2);
  }
}
@media (min-width: 768px) {
  .artist-slider-block[data-display-style=image-swap] .artist-card:hover .artist-card-image--cover {
    opacity: 1;
  }
  .artist-slider-block[data-display-style=image-swap] .artist-card:hover .artist-card-image--portrait {
    opacity: 0;
  }
  .artist-slider-block[data-display-style=image-swap] .artist-card-overlay {
    display: none !important;
  }
  .artist-slider-block[data-display-style=image-swap] .artist-card-name {
    opacity: 1;
  }
}
.artist-slider-block .artist-card-name {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineHeight-tight);
  text-align: left;
  margin: 0;
  display: block;
  color: var(--color-gray-900);
  transition: opacity 0.2s;
}
.artist-slider-block {
  /* ============================================
     CTA BUTTON
     Positioned inline with carousel navigation
     ============================================ */
}
.artist-slider-block .artwork-carousel-nav-wrapper--with-button {
  display: flex;
  align-items: center;
  position: relative;
}
.artist-slider-block .artist-slider-button {
  display: inline-flex;
}
.artist-slider-block .artist-slider-button .btn {
  width: auto;
  white-space: nowrap;
}
.artist-slider-block .artwork-carousel-nav-wrapper--button-left {
  justify-content: space-between;
}
.artist-slider-block .artwork-carousel-nav-wrapper--button-center .artist-slider-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.artist-slider-block .artwork-carousel-nav-wrapper--button-center .artwork-carousel-nav {
  margin-left: auto;
}