@charset "UTF-8";
/**
 * Inner Hero Block Styles
 * Three layout options: Split, Text Only, Full Image
 * Uses ARTBID Design Tokens (CSS Variables)
 * Applied to both frontend and editor
 */
/**
 * 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);
}

/* ============================================
   SHARED STYLES (All Layouts)
   ============================================ */
.inner-hero {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Typography - Shared across all layouts */
.inner-hero-eyebrow {
  display: block;
  font-size: var(--font-size-sm, clamp(0.875rem, 0.851rem + 0.065vw, 0.9375rem));
  text-transform: uppercase;
  letter-spacing: var(--font-letterSpacing-widest);
  margin-bottom: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
}

/* Hide eyebrow when toggle is off */
.inner-hero[data-show-eyebrow=false] .inner-hero-eyebrow {
  display: none;
}

.inner-hero-heading {
  font-family: var(--font-display, "loretta-display", Georgia, serif);
  font-size: var(--font-size-4xl, clamp(2.25rem, 1.694rem + 1.488vw, 3.75rem));
  line-height: var(--font-lineHeight-tight);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--spacing-fluid-hero-button-gap, var(--spacing-gap-sm));
}

.inner-hero-subheading {
  font-size: var(--font-size-xl, clamp(1.25rem, 1.032rem + 0.517vw, 1.625rem));
  line-height: var(--font-lineHeight-relaxed);
  margin-bottom: var(--spacing-gap-md);
}

/* Hide subheading when toggle is off */
.inner-hero[data-show-subheading=false] .inner-hero-subheading {
  display: none;
}

.inner-hero-description {
  font-size: var(--font-size-lg, clamp(1.125rem, 0.98rem + 0.323vw, 1.375rem));
  line-height: var(--font-lineHeight-relaxed);
  max-width: var(--layout-container-prose);
  margin-bottom: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
}

/* Buttons */
.inner-hero-buttons {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 3rem);
}

/* Hide buttons when toggle is off */
.inner-hero[data-show-buttons=false] .inner-hero-buttons {
  display: none;
}

/* Heading size modifiers */
.inner-hero-heading--sm {
  font-size: var(--font-size-3xl, clamp(1.875rem, 1.419rem + 1.165vw, 3rem));
}

.inner-hero-heading--md {
  font-size: var(--font-size-4xl, clamp(2.25rem, 1.694rem + 1.488vw, 3.75rem)); /* Default */
}

.inner-hero-heading--lg {
  font-size: var(--font-size-5xl, clamp(3rem, 2.226rem + 2.07vw, 5rem));
}

.inner-hero-heading--xl {
  font-size: var(--font-size-6xl, clamp(3.75rem, 2.661rem + 3.1vw, 6.75rem));
}

/* ============================================
   LAYOUT 1: SPLIT LAYOUT (Media + Text)
   ============================================ */
.inner-hero[data-layout=split] {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 768px) {
  .inner-hero[data-layout=split] {
    flex-direction: row;
    gap: 0;
  }
}
.inner-hero[data-layout=split] {
  /* Height controlled by block-heights mixin */
}

/* Media side */
.inner-hero-split-media {
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .inner-hero-split-media {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .inner-hero-split-media {
    flex: 0 0 auto;
  }
}
.inner-hero-split-media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-100, #f3f4f6);
  min-height: var(--layout-minHeight-sm); /* Ensure it has height even without media */
}
@media (max-width: 767px) {
  .inner-hero-split-media {
    height: var(--layout-minHeight-sm);
  }
}
@media (min-width: 768px) {
  .inner-hero-split-media {
    align-self: stretch;
  }
}
.inner-hero-split-media {
  /* 40/60 split: 40% text / 60% media */
}
@media (min-width: 768px) {
  .inner-hero[data-split="40-60"] .inner-hero-split-media {
    flex-basis: 60%;
  }
}
.inner-hero-split-media {
  /* 50/50 split */
}
@media (min-width: 768px) {
  .inner-hero[data-split="50-50"] .inner-hero-split-media {
    flex-basis: 50%;
  }
}

.inner-hero-split-image,
.inner-hero-split-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Image fit variants */
.inner-hero[data-image-fit=landscape] .inner-hero-split-image,
.inner-hero[data-image-fit=landscape] .inner-hero-split-video {
  width: auto;
  height: 100%;
  min-width: 100%;
}

.inner-hero[data-image-fit=portrait] .inner-hero-split-image,
.inner-hero[data-image-fit=portrait] .inner-hero-split-video {
  width: 100%;
  height: auto;
  min-height: 100%;
}

/* Content side */
.inner-hero-split-content {
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .inner-hero-split-content {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .inner-hero-split-content {
    flex: 0 0 auto;
  }
}
.inner-hero-split-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* Default: center alignment */
  background-color: var(--color-base-white, #ffffff);
  padding: var(--spacing-block-md, var(--spacing-block-md));
  /* Ensure content determines height on mobile */
  min-height: auto;
  overflow: visible; /* Prevent clipping */
}
@media (min-width: 768px) {
  .inner-hero-split-content {
    align-self: stretch;
  }
}
.inner-hero-split-content {
  /* 40/60 split: 40% text / 60% media */
}
@media (min-width: 768px) {
  .inner-hero[data-split="40-60"] .inner-hero-split-content {
    flex-basis: 40%;
  }
}
.inner-hero-split-content {
  /* 50/50 split */
}
@media (min-width: 768px) {
  .inner-hero[data-split="50-50"] .inner-hero-split-content {
    flex-basis: 50%;
  }
}

.inner-hero-split-content-inner {
  width: 100%;
  max-width: 32rem;
  color: var(--color-base-black, #000000);
}

/* Media position (left/right) */
.inner-hero[data-media-position=left] {
  flex-direction: column;
}
@media (min-width: 768px) {
  .inner-hero[data-media-position=left] {
    flex-direction: row;
  }
}

.inner-hero[data-media-position=right] {
  flex-direction: column;
}
@media (min-width: 768px) {
  .inner-hero[data-media-position=right] {
    flex-direction: row-reverse;
  }
}

/* Background colors for split layout */
.inner-hero[data-layout=split][data-bg=white] .inner-hero-split-content {
  background-color: var(--color-base-white);
}
.inner-hero[data-layout=split][data-bg=white] .inner-hero-split-content .inner-hero-split-content-inner :not(.btn):not(.wp-block-button__link):not(.wp-block-artbid-button) {
  color: var(--color-base-black);
}
.inner-hero[data-layout=split][data-bg=gray] .inner-hero-split-content {
  background-color: var(--color-gray-100);
}
.inner-hero[data-layout=split][data-bg=gray] .inner-hero-split-content .inner-hero-split-content-inner :not(.btn):not(.wp-block-button__link):not(.wp-block-artbid-button) {
  color: var(--color-base-black);
}
.inner-hero[data-layout=split][data-bg=tan] .inner-hero-split-content {
  background-color: var(--color-warm-300);
}
.inner-hero[data-layout=split][data-bg=tan] .inner-hero-split-content .inner-hero-split-content-inner :not(.btn):not(.wp-block-button__link):not(.wp-block-artbid-button) {
  color: var(--color-base-black);
}

/* Vertical text positioning for split layout */
.inner-hero[data-text-position=top] .inner-hero-split-content {
  align-items: flex-start;
}

.inner-hero[data-text-position=center] .inner-hero-split-content {
  align-items: center;
}

.inner-hero[data-text-position=bottom] .inner-hero-split-content {
  align-items: flex-end;
}

/* Horizontal text alignment for split layout */
.inner-hero[data-text-align=left] .inner-hero-split-content-inner {
  text-align: left;
}

.inner-hero[data-text-align=center] .inner-hero-split-content-inner {
  text-align: center;
}

.inner-hero[data-text-align=right] .inner-hero-split-content-inner {
  text-align: right;
}

/* Horizontal container positioning for split layout */
.inner-hero[data-layout=split][data-text-align=left] .inner-hero-split-content {
  justify-content: flex-start;
}

.inner-hero[data-layout=split][data-text-align=center] .inner-hero-split-content {
  justify-content: center;
}

.inner-hero[data-layout=split][data-text-align=right] .inner-hero-split-content {
  justify-content: flex-end;
}

/* ============================================
   LAYOUT 2: TEXT ONLY
   ============================================ */
.inner-hero[data-layout=text-only] {
  display: flex;
  align-items: flex-end; /* Default: bottom-aligned */
  /* Height controlled by block-heights mixin */
}

.inner-hero[data-layout=text-only] .inner-hero-content-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  max-width: var(--layout-container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-section-inline, var(--spacing-container-inline));
  padding-right: var(--spacing-section-inline, var(--spacing-container-inline));
  padding-top: clamp(2.5rem, 1.75rem + 2.5vw, 5rem);
  padding-bottom: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
  box-sizing: border-box;
}

/* Vertical positioning for text-only */
.inner-hero[data-layout=text-only][data-text-position=top] {
  align-items: flex-start;
}

.inner-hero[data-layout=text-only][data-text-position=center] {
  align-items: center;
}

.inner-hero[data-layout=text-only][data-text-position=bottom] {
  align-items: flex-end;
}

.inner-hero[data-layout=text-only] .inner-hero-content {
  width: 100%;
}

/* Background colors for text-only layout */
.inner-hero[data-layout=text-only][data-bg=white] {
  background-color: var(--color-base-white);
}
.inner-hero[data-layout=text-only][data-bg=white] .inner-hero-content :not(.btn):not(.wp-block-button__link):not(.wp-block-artbid-button) {
  color: var(--color-base-black);
}
.inner-hero[data-layout=text-only][data-bg=gray] {
  background-color: var(--color-gray-100);
}
.inner-hero[data-layout=text-only][data-bg=gray] .inner-hero-content :not(.btn):not(.wp-block-button__link):not(.wp-block-artbid-button) {
  color: var(--color-base-black);
}
.inner-hero[data-layout=text-only][data-bg=tan] {
  background-color: var(--color-warm-300);
}
.inner-hero[data-layout=text-only][data-bg=tan] .inner-hero-content :not(.btn):not(.wp-block-button__link):not(.wp-block-artbid-button) {
  color: var(--color-base-black);
}

/* Text alignment for text-only layout */
.inner-hero[data-layout=text-only] .inner-hero-content {
  max-width: 56rem;
}

.inner-hero[data-text-align=left] .inner-hero-content {
  text-align: left;
}

.inner-hero[data-text-align=center] .inner-hero-content {
  text-align: center;
}

.inner-hero[data-text-align=right] .inner-hero-content {
  text-align: right;
}

/* Center variant centers the content block itself */
.inner-hero[data-layout=text-only][data-text-align=center] .inner-hero-content-wrapper {
  justify-content: center;
}

.inner-hero[data-layout=text-only][data-text-align=center] .inner-hero-content {
  margin-left: auto;
  margin-right: auto;
}

/* Left variant aligns to start */
.inner-hero[data-layout=text-only][data-text-align=left] .inner-hero-content-wrapper {
  justify-content: flex-start;
}

/* ============================================
   LAYOUT 3: FULL IMAGE
   ============================================ */
.inner-hero[data-layout=full-image] {
  position: relative;
  width: 100%;
  overflow: visible; /* Changed from hidden to allow content expansion */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Height controlled by block-heights mixin */
}

/* Ensure background media still fills container */
.inner-hero[data-layout=full-image]::before {
  content: "";
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Background media */
.inner-hero-image,
.inner-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Overlay for darkening media - use shared mixin */
.inner-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.inner-hero[data-overlay=none] .inner-hero-overlay {
  display: none;
}

.inner-hero[data-overlay=light] .inner-hero-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

.inner-hero[data-overlay=medium] .inner-hero-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.inner-hero[data-overlay=heavy] .inner-hero-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Content wrapper */
.inner-hero[data-layout=full-image] .inner-hero-content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: var(--spacing-section-md, clamp(3rem, 2rem + 2.67vw, 5rem)) var(--spacing-section-inline, var(--spacing-container-inline));
}

/* Content container */
.inner-hero[data-layout=full-image] .inner-hero-content {
  position: relative;
  z-index: 3;
  max-width: 56rem;
}

/* Text alignment for full-image layout */
.inner-hero[data-text-align=left] .inner-hero-content {
  text-align: left;
}

.inner-hero[data-text-align=center] .inner-hero-content {
  text-align: center;
}

.inner-hero[data-text-align=right] .inner-hero-content {
  text-align: right;
}

/* Center variant */
.inner-hero[data-layout=full-image][data-text-align=center] {
  align-items: center;
  justify-content: center;
}

.inner-hero[data-layout=full-image][data-text-align=center] .inner-hero-content-wrapper {
  display: flex;
  justify-content: center;
}

/* Left variant */
.inner-hero[data-layout=full-image][data-text-align=left] {
  align-items: center;
  justify-content: flex-start;
}

.inner-hero[data-layout=full-image][data-text-align=left] .inner-hero-content-wrapper {
  display: flex;
  justify-content: flex-start;
}

.inner-hero[data-layout=full-image][data-text-align=left] .inner-hero-content {
  padding-left: clamp(2rem, 1rem + 3vw, 6rem);
}

/* Vertical positioning for full-image */
.inner-hero[data-layout=full-image][data-text-position=top] {
  align-items: flex-start;
}

.inner-hero[data-layout=full-image][data-text-position=center] {
  align-items: center;
}

.inner-hero[data-layout=full-image][data-text-position=bottom] {
  align-items: flex-end;
}

/* Text theme variants */
.inner-hero[data-style*=text-light] .inner-hero-content {
  color: var(--color-base-white, #ffffff);
}

.inner-hero[data-style*=text-light] .inner-hero-eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

.inner-hero[data-style*=text-light] .inner-hero-subheading {
  color: rgba(255, 255, 255, 0.9);
}

.inner-hero[data-style*=text-dark] .inner-hero-content {
  color: var(--color-base-black, #000000);
}

.inner-hero[data-style*=text-dark] .inner-hero-eyebrow {
  color: rgba(0, 0, 0, 0.7);
}

.inner-hero[data-style*=text-dark] .inner-hero-subheading {
  color: rgba(0, 0, 0, 0.8);
}

/* ============================================
   HEIGHT VARIANTS
   Applied via shared block-heights mixin
   ============================================ */
.inner-hero[data-height=auto] {
  height: auto;
  min-height: auto;
}
.inner-hero[data-height=narrow] {
  min-height: max(var(--layout-height-narrow), var(--layout-minHeight-sm));
}
.inner-hero[data-height=half] {
  min-height: max(var(--layout-height-half), var(--layout-minHeight-md));
}
.inner-hero[data-height=two-thirds] {
  min-height: max(var(--layout-height-two-thirds), var(--layout-minHeight-lg));
}
.inner-hero[data-height=three-quarters] {
  min-height: max(var(--layout-height-three-quarters), var(--layout-minHeight-lg));
}
.inner-hero[data-height=full] {
  min-height: max(var(--layout-height-full), var(--layout-minHeight-xl));
  height: var(--layout-height-full);
}
@media (max-width: 767px) {
  .inner-hero[data-height=narrow] {
    min-height: var(--layout-minHeight-sm);
  }
  .inner-hero[data-height=half] {
    min-height: var(--layout-minHeight-md);
  }
  .inner-hero[data-height=two-thirds] {
    min-height: var(--layout-minHeight-md);
  }
  .inner-hero[data-height=three-quarters] {
    min-height: var(--layout-minHeight-lg);
  }
  .inner-hero[data-height=full] {
    min-height: var(--layout-minHeight-lg);
  }
}