/* ==========================================================================
   MOBILE UX IMPROVEMENTS
   Branchstone Artist Portfolio - Mobile-First Enhancements
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES - Mobile Design Tokens
   ========================================================================== */

:root {
  /* Mobile-specific spacing */
  --mobile-nav-height: 56px;
  --mobile-nav-offset: 72px; /* nav height + safe area padding */

  /* WCAG AA touch target minimums */
  --touch-target-min: 44px;
  --touch-target-preferred: 48px;
  --touch-target-large: 56px;

  /* Carousel dot specifications */
  --carousel-dot-inactive-size: 6px;
  --carousel-dot-active-width: 22px;
  --carousel-dot-active-height: 6px;
  --carousel-dot-gap: 8px;
  --carousel-dot-container-width: 22px; /* Matches active width for consistent layout */
  --carousel-dot-container-height: 22px;
  --carousel-dot-spacing-vertical: 12px;

  /* Carousel dot colors */
  --carousel-dot-inactive-bg: rgba(255, 255, 255, 0.35);
  --carousel-dot-inactive-opacity: 0.45;
  --carousel-dot-active-bg: var(--accent-primary);
  --carousel-dot-active-opacity: 1;
  --carousel-dot-hover-opacity: 0.8;
  --carousel-dot-hover-scale: 1.15;

  /* Mobile breakpoint - standardized across all files */
  /* Strategy: Use 767px for max-width (mobile), 768px for min-width (tablet+) */
  /* This ensures no overlap: 0-767px = mobile, 768px+ = desktop */
}

/* ==========================================================================
   1. MOBILE BOTTOM NAVIGATION BAR
   ========================================================================== */

.mobile-bottom-nav {
  display: none; /* Hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -2px 10px rgba(26, 24, 22, 0.1);
  z-index: 100;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme support */
[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(26, 24, 22, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top-color: var(--border-strong);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Hide on scroll down */
.mobile-bottom-nav.is-hidden {
  transform: translateY(100%);
}

/* Navigation list */
.mobile-bottom-nav__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Navigation items */
.mobile-bottom-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navigation links - WCAG compliant 44x44px touch targets */
.mobile-bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: var(--touch-target-preferred);
  min-height: var(--touch-target-preferred);
  padding: 0.25rem 0.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  position: relative;
}

.mobile-bottom-nav__link:active {
  transform: scale(0.95);
}

/* Icon container */
.mobile-bottom-nav__icon {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.mobile-bottom-nav__link svg {
  width: 100%;
  height: 100%;
  stroke-width: 2px;
}

/* Active state */
.mobile-bottom-nav__link.is-active {
  color: var(--accent-primary);
}

.mobile-bottom-nav__link.is-active .mobile-bottom-nav__icon {
  transform: translateY(-2px);
}

/* Label */
.mobile-bottom-nav__label {
  font-size: 0.6875rem;
  line-height: 1;
}

/* Show only on mobile - Breakpoint: 767px max for mobile */
@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: block;
  }

  /* Add bottom padding to body to prevent content hiding */
  body {
    padding-bottom: var(--mobile-nav-height);
  }

  /* Adjust back-to-top button position - same as sticky-inquiry-button */
  .back-to-top {
    bottom: calc(var(--space-4, 1rem) + var(--mobile-nav-offset) + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   2. WCAG COMPLIANT TOUCH TARGETS (44x44px minimum)
   ========================================================================== */

/* Gallery filter buttons */
@media (max-width: 767px) {
  .tag,
  [data-filter],
  [data-mobile-filter] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0.625rem 1rem;
    touch-action: manipulation;
  }

  /* Mobile filter chips */
  .mobile-filter-chip {
    min-height: var(--touch-target-min);
    min-width: 80px;
    padding: 0.75rem 1.25rem;
  }

  /* Favorite buttons - Increased to 56px for better tap accuracy */
  .artwork-card__favorite,
  .header__favorites,
  .favorite-item__remove {
    min-width: var(--touch-target-large);
    min-height: var(--touch-target-large);
    width: var(--touch-target-large);
    height: var(--touch-target-large);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Enhanced artwork card favorite button - liquid glass style */
  .artwork-card__favorite {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    left: auto;
    top: auto;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 10;
  }

  .artwork-card__favorite svg {
    width: 24px;
    height: 24px;
  }

  /* Badge stays at top-left (original position) */
  .artwork-card__badge {
    left: var(--space-4);
    top: var(--space-4);
    z-index: 5;
  }

  /* Inquire button - liquid glass style */
  .artwork-card__inquire {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    min-width: var(--touch-target-large);
    min-height: var(--touch-target-large);
    width: var(--touch-target-large);
    height: var(--touch-target-large);
    background: linear-gradient(
      135deg,
      rgba(184, 134, 107, 0.5) 0%,
      rgba(184, 134, 107, 0.3) 100%
    );
    color: white;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .artwork-card__inquire svg {
    width: 24px;
    height: 24px;
  }

  /* View button for explicit lightbox trigger - bottom-right */
  .artwork-card__view {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    min-width: var(--touch-target-large);
    min-height: var(--touch-target-large);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Disable card-level click for lightbox on mobile to prevent mis-taps */
  .artwork-card__image-wrapper {
    cursor: default;
    pointer-events: none;
  }

  /* Re-enable pointer events for buttons */
  .artwork-card__favorite,
  .artwork-card__inquire,
  .artwork-card__view {
    pointer-events: auto;
  }

  /* Back to top button styles now in components.css */

  /* Navigation links */
  .header__nav-link,
  .mobile-menu__link,
  .footer__nav-link {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
  }

  /* All interactive buttons */
  button,
  .btn {
    min-height: var(--touch-target-min);
    padding: 0.75rem 1.5rem;
  }

  /* ==========================================================================
     UNIFIED CAROUSEL PAGINATION - MOBILE ONLY
     Crisp, clean dots for ALL mobile carousels (Featured Works, Gallery, Artwork Modal, Testimonials)
     EXACT SPECIFICATIONS: inactive 6px circle, active 22px pill, gap 8px
     STRATEGY: Use ::before pseudo-element for visual dot, button provides tap target
     ========================================================================== */

  /* All carousel dots - button container (transparent tap target) */
  .carousel__dot,
  .artwork-modal__carousel-dot,
  .featured-carousel__dot,
  .highlights__dot,
  .testimonials__dot,
  [class*="carousel"][class*="dot"] {
    /* Button tap target size */
    width: var(--carousel-dot-container-width);
    height: var(--carousel-dot-container-height);
    min-height: unset;
    min-width: unset;
    padding: 0;

    /* Transparent button - visual dot is in ::before */
    background: transparent;
    border: none;
    border-radius: 0;

    /* CRISP rendering - remove ALL blur/filter/shadow */
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;

    /* Smooth transitions */
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;

    /* Force hardware rendering for crisp edges */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    will-change: transform;

    /* Position context for ::before */
    position: relative;
    z-index: 10;

    /* Center the pseudo-element dot */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Visual dot - inactive (6px circle) */
  .carousel__dot::before,
  .artwork-modal__carousel-dot::before,
  .featured-carousel__dot::before,
  .highlights__dot::before,
  .testimonials__dot::before,
  [class*="carousel"][class*="dot"]::before {
    content: '';
    display: block;

    /* EXACT inactive dot size */
    width: var(--carousel-dot-inactive-size);
    height: var(--carousel-dot-inactive-size);

    /* EXACT inactive dot appearance */
    background: var(--carousel-dot-inactive-bg);
    opacity: var(--carousel-dot-inactive-opacity);
    border-radius: 999px; /* Full circle */

    /* CRISP rendering */
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;

    /* Smooth transitions */
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Force hardware rendering */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Remove any ::after pseudo-elements */
  .carousel__dot::after,
  .artwork-modal__carousel-dot::after,
  .featured-carousel__dot::after,
  .highlights__dot::after,
  .testimonials__dot::after,
  [class*="carousel"][class*="dot"]::after {
    display: none;
  }

  /* Dark theme - lighter inactive dots (affects ::before) */
  [data-theme="dark"] .carousel__dot::before,
  [data-theme="dark"] .artwork-modal__carousel-dot::before,
  [data-theme="dark"] .featured-carousel__dot::before,
  [data-theme="dark"] .highlights__dot::before,
  [data-theme="dark"] .testimonials__dot::before,
  [data-theme="dark"] [class*="carousel"][class*="dot"]::before {
    background: var(--carousel-dot-inactive-bg);
    opacity: var(--carousel-dot-inactive-opacity);
  }

  /* ACTIVE dot - elongated pill with brand accent (EXACT 22px × 6px) */
  .carousel__dot.is-active::before,
  .artwork-modal__carousel-dot.is-active::before,
  .featured-carousel__dot.is-active::before,
  .highlights__dot.is-active::before,
  .testimonials__dot.is-active::before,
  [class*="carousel"][class*="dot"].is-active::before {
    width: var(--carousel-dot-active-width);
    height: var(--carousel-dot-active-height);
    border-radius: 999px; /* Full pill */
    background: var(--carousel-dot-active-bg);
    opacity: var(--carousel-dot-active-opacity);

    /* Crisp rendering */
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
  }

  /* Dark theme active - same beige accent */
  [data-theme="dark"] .carousel__dot.is-active::before,
  [data-theme="dark"] .artwork-modal__carousel-dot.is-active::before,
  [data-theme="dark"] .featured-carousel__dot.is-active::before,
  [data-theme="dark"] .highlights__dot.is-active::before,
  [data-theme="dark"] .testimonials__dot.is-active::before,
  [data-theme="dark"] [class*="carousel"][class*="dot"].is-active::before {
    background: var(--carousel-dot-active-bg);
    opacity: var(--carousel-dot-active-opacity);
  }

  /* Hover state - slightly more visible, scale the ::before element */
  .carousel__dot:hover::before,
  .artwork-modal__carousel-dot:hover::before,
  .featured-carousel__dot:hover::before,
  .highlights__dot:hover::before,
  .testimonials__dot:hover::before,
  [class*="carousel"][class*="dot"]:hover::before {
    opacity: var(--carousel-dot-hover-opacity);
    transform: translateZ(0) scale(var(--carousel-dot-hover-scale));
  }

  /* Container spacing - consistent across all carousels */
  .carousel__pagination,
  .artwork-modal__carousel-dots,
  .featured-carousel__pagination,
  .highlights__pagination,
  .testimonials__pagination,
  [class*="carousel"][class*="pagination"],
  [class*="carousel"][class*="dots"] {
    display: flex;
    gap: var(--carousel-dot-gap);
    justify-content: center;
    align-items: center;
    margin-top: var(--carousel-dot-spacing-vertical);
    margin-bottom: var(--carousel-dot-spacing-vertical);
    padding: 0;

    /* CRISP container rendering */
    position: relative;
    z-index: 10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
    isolation: isolate; /* Create stacking context, prevent parent blur inheritance */
  }

  .btn--sm {
    min-height: var(--touch-target-min);
    padding: 0.625rem 1.25rem;
  }

  .btn--icon {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  /* Close buttons */
  .favorites-panel__close,
  .mobile-menu__close,
  .mobile-filter-dropdown__close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  /* Header action buttons */
  .header__theme-toggle,
  .header__menu-toggle {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0.625rem;
  }

  /* Newsletter form */
  .newsletter__button {
    min-height: var(--touch-target-min);
  }

  .newsletter__input {
    min-height: var(--touch-target-min);
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    min-height: var(--touch-target-min);
  }

  /* Radio and checkbox larger touch areas */
  input[type="radio"],
  input[type="checkbox"] {
    min-width: 24px;
    min-height: 24px;
  }

  /* Radio/checkbox labels - make clickable area larger */
  label:has(input[type="radio"]),
  label:has(input[type="checkbox"]) {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
  }
}

/* ==========================================================================
   3. REDUCED ANIMATION DURATION ON MOBILE (30% faster)
   ========================================================================== */

@media (max-width: 767px) {
  /* Reduce all animations by 30% on mobile for snappier feel */
  *,
  *::before,
  *::after {
    --duration-fast: 105ms;     /* Down from 150ms */
    --duration-normal: 210ms;   /* Down from 300ms */
    --duration-slow: 350ms;     /* Down from 500ms */
  }

  /* Animation-specific overrides */
  .artwork-card,
  .artwork-card__image,
  .btn,
  .tag,
  .mobile-filter-chip {
    transition-duration: 210ms;
  }

  /* Modal/panel transitions */
  .favorites-panel,
  .mobile-menu {
    transition-duration: 210ms;
  }

  /* Hover effects - instant on mobile */
  .artwork-card:hover,
  .btn:hover {
    transition-duration: 105ms;
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. SMART STICKY HEADER (Mobile Only)
   ========================================================================== */

@media (max-width: 767px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 200;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hide header when scrolling down */
  .header.is-hidden {
    transform: translateY(-100%);
  }

  /* Always show when at top of page */
  .header.is-scrolled {
    box-shadow: 0 2px 8px rgba(26, 24, 22, 0.1);
  }

  [data-theme="dark"] .header.is-scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* ==========================================================================
   5. IMPROVED SKELETON LOADING STATES (Brand Colors)
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-elevated) 50%,
    var(--bg-secondary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Skeleton for artwork cards */
.artwork-card.is-loading {
  pointer-events: none;
}

.artwork-card.is-loading .artwork-card__image {
  background: linear-gradient(
    135deg,
    var(--bg-secondary) 0%,
    rgba(184, 134, 107, 0.1) 50%,
    var(--bg-secondary) 100%
  );
  background-size: 200% 200%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.artwork-card.is-loading .artwork-card__title,
.artwork-card.is-loading .artwork-card__collection,
.artwork-card.is-loading .artwork-card__price {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 0%,
    rgba(184, 134, 107, 0.15) 50%,
    var(--bg-elevated) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s ease-in-out infinite;
  color: transparent;
  user-select: none;
}

/* Dark theme skeleton */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
}

[data-theme="dark"] .artwork-card.is-loading .artwork-card__image {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(184, 134, 107, 0.2) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .artwork-card.is-loading .artwork-card__image,
  .artwork-card.is-loading .artwork-card__title {
    animation: none;
    background: var(--bg-elevated);
  }
}

/* ==========================================================================
   6. MOBILE-SPECIFIC INTERACTION IMPROVEMENTS
   ========================================================================== */

@media (max-width: 767px) {
  /* REMOVED: padding on artwork-card - grid gap handles all spacing */
  /* Cards have ZERO margin - spacing is ONLY controlled by grid gap */
  .artwork-card {
    margin: 0;
    padding: 0;
    position: relative;
  }

  /* Prevent text selection during interactions */
  .mobile-bottom-nav,
  .header,
  .btn,
  .artwork-card__favorite {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Smooth momentum scrolling */
  .favorites-panel__content,
  .mobile-menu__list,
  .gallery-grid {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Better focus indicators for keyboard users */
  *:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 3px;
  }
}

/* ==========================================================================
   7. HAPTIC FEEDBACK VISUAL CUE
   ========================================================================== */

/* Add visual feedback when haptic feedback is triggered */
@media (max-width: 767px) {
  .artwork-card__favorite.haptic-feedback {
    animation: haptic-pulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@keyframes haptic-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* ==========================================================================
   8. SAFE AREA INSETS (For iPhone notch/Dynamic Island)
   ========================================================================== */

@media (max-width: 767px) {
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .header {
    padding-top: env(safe-area-inset-top);
  }

  /* Adjust body padding for safe areas */
  body {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   9. ACCESSIBILITY - HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
  .mobile-bottom-nav {
    border-top-width: 2px;
    border-top-color: currentColor;
  }

  .mobile-bottom-nav__link {
    border: 2px solid transparent;
  }

  .mobile-bottom-nav__link.is-active {
    border-color: var(--accent-primary);
    background: rgba(184, 134, 107, 0.1);
  }

  .artwork-card__favorite,
  .btn {
    border-width: 2px;
  }
}

/* ==========================================================================
   10. MOBILE FOOTER REDESIGN - IMPROVED VISUAL HIERARCHY
   ========================================================================== */

@media (max-width: 767px) {
  /* Enhanced footer spacing and breathing room */
  .footer {
    padding: var(--space-12) 0 calc(var(--space-10) + var(--mobile-nav-offset)); /* Extra bottom padding for mobile nav */
  }

  .footer__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-10); /* Increased from default for better separation */
    padding: 0 var(--space-6);
  }

  /* Brand section - more prominent */
  .footer__brand {
    max-width: 100%;
    text-align: center;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
  }

  .footer__logo {
    font-size: var(--text-2xl);
    display: block;
    margin-bottom: var(--space-3);
  }

  .footer__tagline {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 400px;
    margin: var(--space-3) auto 0;
  }

  /* Navigation sections - stacked vertically with clear hierarchy */
  .footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
  }

  .footer__nav-column {
    text-align: center;
  }

  .footer__nav-heading {
    font-size: var(--text-base);
    margin-bottom: var(--space-5);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
  }

  .footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer__nav-link {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    display: block;
    min-height: var(--touch-target-preferred); /* WCAG compliant touch target */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Social section - enhanced visibility */
  .footer__social {
    text-align: center;
    padding-bottom: var(--space-8);
  }

  .footer__social-heading {
    font-size: var(--text-base);
    margin-bottom: var(--space-5);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
  }

  /* Larger social icon tap targets - 56px for better mobile UX */
  .footer__social-list {
    justify-content: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
  }

  .footer__social-link {
    min-width: var(--touch-target-large);
    min-height: var(--touch-target-large);
    width: var(--touch-target-large);
    height: var(--touch-target-large);
    border: 2px solid var(--border-default);
    transition: all var(--transition-normal);
  }

  .footer__social-link:hover,
  .footer__social-link:active {
    transform: scale(1.1);
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
  }

  .footer__social-link svg {
    width: 24px;
    height: 24px;
  }

  /* Email link - larger touch target */
  .footer__email {
    margin-top: var(--space-5);
  }

  .footer__email-link {
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    min-height: var(--touch-target-min);
    transition: color var(--transition-normal);
  }

  .footer__email-link:hover,
  .footer__email-link:active {
    color: var(--accent-primary);
  }

  /* Trust badges - LARGER and MORE PROMINENT on mobile */
  .footer__trust-badges {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
  }

  .trust-badge-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: var(--font-medium);
    text-align: center;
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    min-width: 140px;
    box-shadow: var(--shadow-sm);
  }

  .trust-badge-small svg {
    width: 28px;
    height: 28px;
    color: var(--accent-primary);
    flex-shrink: 0;
  }

  /* Footer bottom - clear separation */
  .footer__bottom {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 2px solid var(--border-default);
    text-align: center;
  }

  .footer__copyright {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: var(--leading-relaxed);
  }

  /* Dark theme adjustments for mobile footer */
  [data-theme="dark"] .footer__brand,
  [data-theme="dark"] .footer__nav,
  [data-theme="dark"] .footer__social {
    border-bottom-color: var(--border-default);
  }

  [data-theme="dark"] .footer__trust-badges {
    border-top-color: var(--border-default);
  }

  [data-theme="dark"] .trust-badge-small {
    background: var(--bg-tertiary);
    box-shadow: var(--shadow-md);
  }

  [data-theme="dark"] .footer__bottom {
    border-top-color: var(--border-default);
  }

  /* ==========================================================================
     TOAST NOTIFICATIONS - POSITION ABOVE MOBILE NAV
     ========================================================================== */

  .toast-container {
    bottom: calc(var(--mobile-nav-offset) + env(safe-area-inset-bottom, 0px));
    left: var(--space-4);
    right: var(--space-4);
  }

  .toast {
    width: 100%;
    max-width: none;
    justify-content: center;
  }
}

/* ==========================================================================
   11. MOBILE HERO - INLINE NATIVE DESIGN
   Replaces modal overlay with scrollable, art-first layout on mobile
   ========================================================================== */

/* Breakpoint: 768px max for mobile */
@media (max-width: 768px) {

  /* Hide desktop hero overlay on mobile */
  .section-hero--desktop {
    display: none;
  }

  /* Mobile inline hero */
  .section-hero--mobile {
    display: block;
    min-height: auto;
    padding: 0;
    position: relative;
    overflow: visible;
  }

  /* Image container - inline, not background */
  .section-hero__image-container {
    width: 100%;
    height: clamp(50vh, 52vh, 55vh); /* Reduced from 60-70vh for better viewport fit */
    overflow: hidden;
    position: relative;
  }

  /* Subtle warm gradient overlay for soft transition to text */
  .section-hero__image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(184, 134, 107, 0.08) 40%,
      rgba(184, 134, 107, 0.12) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .section-hero__image-mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: brightness(1.0) contrast(1.05) saturate(1.15);
    display: block;
  }

  /* Text block - solid background, high contrast */
  .section-hero__text-block {
    background: var(--bg-primary);
    padding: var(--space-6) var(--space-4) var(--space-4);
    text-align: center;
  }

  .section-hero--mobile .section-hero__heading {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 6.5vw, 2.25rem); /* Slightly reduced for better balance */
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
  }

  .section-hero--mobile .section-hero__subheading {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 3.8vw, 1.0625rem); /* Slightly reduced */
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-secondary);
    letter-spacing: 0.005em;
    max-width: 480px;
    margin: 0 auto var(--space-5);
  }

  /* Single CTA - thumb-friendly placement */
  .section-hero__cta-mobile {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-4) var(--space-5);
  }

  .btn--hero-primary {
    padding: 0.875rem 1.75rem;
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    min-height: var(--touch-target-preferred);
    min-width: 200px;
    background: linear-gradient(135deg, var(--copper-400), var(--copper-500));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
  }

  .btn--hero-primary:hover,
  .btn--hero-primary:active {
    background: linear-gradient(135deg, var(--copper-300), var(--copper-400));
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .btn--hero-primary:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 4px;
  }

  .btn--hero-primary svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5px;
  }

  /* Scroll hint - subtle bounce animation */
  .section-hero__scroll-hint {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-4);
    opacity: 0.5;
    animation: gentleBounce 2s ease-in-out infinite;
  }

  .section-hero__scroll-hint svg {
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    stroke-width: 2px;
  }

  /* Subtle mobile statistics text - very quiet supporting information */
  .section-hero__stats-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-6);
    background: var(--bg-primary);
    margin-top: var(--space-2);
  }

  /* Each stat item - 2-line display */
  .section-hero__stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-align: center;
  }

  /* Line 1: Number and description */
  .section-hero__stat-line1 {
    font-family: var(--font-body);
    font-size: 0.6875rem; /* 11px - very small, caption-like */
    font-weight: 400; /* Regular weight for numbers/description */
    line-height: 1.3;
    color: var(--text-tertiary);
    letter-spacing: 0.015em;
    opacity: 0.65; /* Very subtle */
  }

  /* Line 2: Qualifier */
  .section-hero__stat-line2 {
    font-family: var(--font-body);
    font-size: 0.6875rem; /* 11px - very small, caption-like */
    font-weight: 300; /* Light weight for qualifier */
    line-height: 1.3;
    color: var(--text-tertiary);
    letter-spacing: 0.015em;
    opacity: 0.55; /* Even more subtle for qualifier */
  }

  /* Divider between stats */
  .section-hero__stat-divider {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 300;
    color: var(--text-tertiary);
    opacity: 0.4;
    padding: 0 0.25rem;
  }

  @keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }

  /* Dark theme support */
  [data-theme="dark"] .section-hero__image-container::after {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(184, 134, 107, 0.06) 40%,
      rgba(184, 134, 107, 0.10) 100%
    );
  }

  [data-theme="dark"] .section-hero__text-block {
    background: var(--bg-primary);
  }

  [data-theme="dark"] .section-hero--mobile .section-hero__heading {
    color: var(--text-primary);
  }

  [data-theme="dark"] .section-hero--mobile .section-hero__subheading {
    color: var(--text-secondary);
  }

  [data-theme="dark"] .section-hero__image-mobile {
    filter: brightness(0.85) contrast(1.08) saturate(1.0);
  }

  [data-theme="dark"] .section-hero__stats-mobile {
    background: var(--bg-primary);
  }

  [data-theme="dark"] .section-hero__stat-line1 {
    color: var(--text-tertiary);
    opacity: 0.55; /* Even more subtle in dark mode */
  }

  [data-theme="dark"] .section-hero__stat-line2 {
    color: var(--text-tertiary);
    opacity: 0.45; /* Even more subtle in dark mode */
  }

  [data-theme="dark"] .section-hero__stat-divider {
    color: var(--text-tertiary);
    opacity: 0.3; /* Very subtle divider in dark mode */
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .section-hero__scroll-hint {
      animation: none;
    }
  }

  /* Very short screens - reduce hero image height */
  @media (max-height: 600px) {
    .section-hero__image-container {
      height: 50vh;
    }

    .section-hero__text-block {
      padding: var(--space-6) var(--space-4);
    }
  }

} /* End mobile hero breakpoint */

/* Desktop: Show desktop hero, hide mobile hero - Breakpoint: 768px min for desktop */
@media (min-width: 768px) {
  .section-hero--mobile {
    display: none;
  }

  .section-hero--desktop {
    display: flex;
  }
}

/* ==========================================================================
   12. HIDE STATS GRID ON MOBILE
   Mobile uses inline hero stats; desktop shows "Artist by the Numbers" section
   ========================================================================== */

/* Hide "Artist by the Numbers" stats section on mobile - we have inline hero stats instead */
@media (max-width: 768px) {
  .section-stats {
    display: none;
  }
}

/* Show stats section on desktop */
@media (min-width: 768px) {
  .section-stats {
    display: block;
  }
}

/* ==========================================================================
   13. MOBILE CAROUSEL CONTROLS - Swipe-only (no arrows)
   ========================================================================== */

@media (max-width: 768px) {
  /* FIX MODAL BACKDROP BLUR - Remove blur from overlay to prevent dot smearing */
  .artwork-modal__overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.9); /* Solid dark background instead of blur */
  }

  /* Ensure modal content has its own stacking context (dots won't inherit parent blur) */
  .artwork-modal__content {
    isolation: isolate;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* HIDE ALL CAROUSEL ARROWS ON MOBILE - swipe-only interaction */
  .featured-carousel__nav--prev,
  .featured-carousel__nav--next,
  .artwork-modal__carousel-prev,
  .artwork-modal__carousel-next {
    display: none;
  }

  /* CLOSE BUTTON: Keep visible, no circular background */
  .artwork-modal__close {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    outline: none;
    width: var(--touch-target-preferred);
    height: var(--touch-target-preferred);
    min-width: var(--touch-target-preferred);
    min-height: var(--touch-target-preferred);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .artwork-modal__close:hover {
    background: transparent;
    transform: none;
  }

  .artwork-modal__close:focus-visible {
    outline: none;
  }

  .artwork-modal__close svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.5;
    stroke: var(--text-primary);
  }

  /* FAVORITE BUTTON: Remove background, just heart icon */
  .artwork-card__favorite,
  .featured-carousel__favorite {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: var(--touch-target-large);
    height: var(--touch-target-large);
    min-width: var(--touch-target-large);
    min-height: var(--touch-target-large);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .artwork-card__favorite:hover,
  .featured-carousel__favorite:hover {
    background: transparent;
    box-shadow: none;
    transform: scale(1.1);  /* Slight scale on tap */
  }

  .artwork-card__favorite svg,
  .featured-carousel__favorite svg {
    width: 32px;   /* Slightly bigger (was ~24px) */
    height: 32px;
    stroke-width: 2;
    stroke: var(--text-primary);
  }

  /* When favorited (filled heart) */
  .artwork-card__favorite.is-favorited svg,
  .featured-carousel__favorite.is-favorited svg {
    fill: var(--accent-primary);  /* Copper fill */
    stroke: var(--accent-primary);
  }

  /* ==========================================================================
     MOBILE GALLERY GRID - EQUAL SPACING REBUILD
     Clean CSS Grid with gap-only spacing, zero card margins
     ========================================================================== */

  /* GRID CONTAINER: Single gap value controls ALL spacing */
  .bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;  /* Single, constant gap value */
    grid-auto-rows: auto;  /* Natural flow, no masonry */
    grid-auto-flow: row;  /* Sequential, no dense packing */
  }

  /* CARD: ZERO margins - spacing controlled ONLY by grid gap */
  .artwork-card {
    margin: 0;
    padding: 0;
    /* Remove grid-row spanning - all cards flow naturally */
    grid-row: auto;
    grid-column: span 1;
  }

  /* Override all size variants on mobile - single column, equal spacing */
  .artwork-card[data-size="small"],
  .artwork-card[data-size="medium"],
  .artwork-card[data-size="large"],
  .bento-large,
  .bento-wide,
  .bento-tall {
    grid-column: span 1;
    grid-row: auto;
    margin: 0;
    padding: 0;
  }

  /* IMAGE CONTAINER: Prevent overflow, maintain aspect ratio */
  .artwork-card__image-wrapper {
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
  }

  .artwork-card__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-width: 100%;
  }
}