/**
 * Artist Feedback Implementation
 * CSS updates based on artist requirements for less aggressive selling style
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  --hero-info-size-base: 52px;
  --hero-info-size-reduced: calc(var(--hero-info-size-base) * 0.8); /* 41.6px */
  --hero-info-icon-size-base: 26px;
  --hero-info-icon-size-reduced: calc(var(--hero-info-icon-size-base) * 0.8); /* 20.8px */

  --hero-info-size-mobile-base: 56px;
  --hero-info-size-mobile-reduced: calc(var(--hero-info-size-mobile-base) * 0.8); /* 44.8px */
  --hero-info-icon-size-mobile-base: 30px;
  --hero-info-icon-size-mobile-reduced: calc(var(--hero-info-icon-size-mobile-base) * 0.8); /* 24px */
}

/* ==========================================================================
   HERO "i" BUTTON - REDUCED SIZE AND PROMINENCE
   ========================================================================== */

/* Using parent selector chain for proper specificity without class repetition hack */
.section-hero .hero-show-info {
  /* Reduce size by 20% using CSS custom properties */
  min-width: var(--hero-info-size-reduced);
  height: var(--hero-info-size-reduced);
  /* Reduce opacity for less prominence */
  opacity: 0.85;
  /* Override display: none from components.css */
  display: flex;
  /* Fixed positioning relative to viewport */
  position: fixed;
  right: 24px;
  bottom: 88px;
}

.section-hero .hero-show-info .hero-show-info__icon {
  /* Reduce icon size proportionally using CSS custom properties */
  font-size: var(--hero-info-icon-size-reduced);
}

.section-hero .hero-show-info:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .section-hero .hero-show-info {
    min-width: var(--hero-info-size-mobile-reduced);
    height: var(--hero-info-size-mobile-reduced);
  }

  .section-hero .hero-show-info .hero-show-info__icon {
    font-size: var(--hero-info-icon-size-mobile-reduced);
  }
}

/* ==========================================================================
   ARTIST PHOTO AND TEXT CENTERING ON MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .section-about-preview__container {
    text-align: center;
  }

  .section-about-preview__image {
    margin-left: auto;
    margin-right: auto;
  }

  .section-about-preview__content {
    text-align: center;
  }

  .section-about-preview__heading {
    text-align: center;
  }

  .section-about-preview__text {
    text-align: center;
  }

  .section-about-preview__link {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

/* ==========================================================================
   REMOVE STATS ANIMATION
   ========================================================================== */

/* Using parent selector chain for proper specificity */
.section-stats .stat-item {
  /* Disable animation by removing transition */
  transition: none;
  /* Ensure stats are always visible */
  opacity: 1;
  transform: none;
}

.section-stats .stat-item__number {
  /* Disable number animation */
  transition: none;
}

/* Disable intersection observer effects - using parent chain */
.section-stats [data-stat-item].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   ARTWORK DETAILS POPUP ENHANCEMENTS
   ========================================================================== */

/* Prints Available Marker */
.artwork-prints-available {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--copper-50);
  border: 1px solid var(--copper-200);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--copper-700);
  margin-top: 1rem;
}

[data-theme="dark"] .artwork-prints-available {
  background: var(--copper-900);
  border-color: var(--copper-700);
  color: var(--copper-200);
}

.artwork-prints-available svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Color Variation Notice */
.artwork-color-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--sage-50);
  border-left: 3px solid var(--sage-400);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 1.5rem;
}

[data-theme="dark"] .artwork-color-notice {
  background: var(--sage-900);
  border-color: var(--sage-600);
}

.artwork-color-notice svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sage-600);
}

[data-theme="dark"] .artwork-color-notice svg {
  color: var(--sage-400);
}

/* Try Before You Buy Message */
.artwork-try-before-buy {
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--copper-50) 0%, var(--sage-50) 100%);
  border: 1px solid var(--copper-200);
  border-radius: var(--radius-md);
  margin-top: 1.5rem;
  text-align: center;
}

[data-theme="dark"] .artwork-try-before-buy {
  background: linear-gradient(135deg, var(--copper-900) 0%, var(--sage-900) 100%);
  border-color: var(--copper-700);
}

.artwork-try-before-buy__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.artwork-try-before-buy__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.artwork-try-before-buy__text a {
  color: var(--copper-600);
  text-decoration: underline;
  font-weight: 500;
}

[data-theme="dark"] .artwork-try-before-buy__text a {
  color: var(--copper-400);
}

/* Inquiry Button in Details Popup */
.artwork-inquiry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--copper-600);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1.5rem;
  width: 100%;
}

.artwork-inquiry-button:hover {
  background: var(--copper-700);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 134, 107, 0.3);
}

.artwork-inquiry-button:active {
  transform: translateY(0);
}

.artwork-inquiry-button svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   CAROUSEL FOR ARTWORK IMAGES
   ========================================================================== */

.artwork-carousel {
  position: relative;
  width: 100%;
  max-height: 70vh;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
}

.artwork-carousel__track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.artwork-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
}

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

.artwork-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}

.artwork-carousel__nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.artwork-carousel__nav--prev {
  left: 0.5rem;
}

.artwork-carousel__nav--next {
  right: 0.5rem;
}

.artwork-carousel__indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
}

.artwork-carousel__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--copper-300);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.artwork-carousel__indicator--active {
  background: var(--copper-600);
  transform: scale(1.3);
}

/* Mobile adjustments for carousel */
@media (max-width: 768px) {
  .artwork-carousel {
    max-height: 60vh;
  }

  .artwork-carousel__image {
    max-height: 60vh;
  }

  .artwork-carousel__nav {
    padding: 0.75rem;
  }
}

/* ==========================================================================
   VERIFIED ARTIST BADGE REPOSITIONING
   ========================================================================== */

/* Updated positioning in hero section - now at bottom */
.section-hero__content .verified-artist-badge {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* Reduce visual prominence of badge - smaller size */
.verified-artist-badge {
  opacity: 0.9;
  font-size: 0.75rem; /* Smaller */
  padding: 0.125rem 0.375rem; /* Very tight padding for minimal frame */
  text-align: center; /* Center text within badge */
  display: inline-flex; /* Ensure proper centering of flex content */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
}

/* Scale down icon to match smaller badge */
.verified-artist-badge svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 768px) {
  .artwork-try-before-buy {
    padding: 1rem;
  }

  .artwork-try-before-buy__title {
    font-size: 1rem;
  }

  .artwork-try-before-buy__text {
    font-size: 0.875rem;
  }

  .artwork-inquiry-button {
    font-size: 0.9375rem;
    padding: 0.75rem 1.25rem;
  }
}