/**
 * Slider styles (Swiper.js)
 *
 * Purpose:
 * - Styles specific to Swiper-based sliders
 * - Originals section artwork carousel
 *
 * Scope:
 * - Homepage / featured sections
 * - No global layout rules
 *
 * Notes:
 * - Paired with module-level Swiper JS enqueue
 * - Keep selectors scoped under `.section.originals`
 */

/*  SWIPER */

.originals .section-content {
  min-width: 0;
  position: relative;
  padding-inline: clamp(2.5rem, 5vw, 4rem);
}

.originals .swiper {
  border: var(--border-neutral-light);
  background-color: var(--color-white);
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: var(--spacing-xl) 0;
}

.originals .swiper-wrapper {
  /* border: 3px dotted pink; */
  display: flex;
  gap: 0;
  gap: clamp(2rem, 6vw, 6rem);
}

.originals .swiper-slide {
  /* border: 3px dotted red; */
  /* width: 280px; */
  width: clamp(240px, 25vh, 280px);
  flex-shrink: 0;
  display: flex;
  height: auto;
  padding: 0;
  background-color: transparent;
}

@media (width >= 48rem) {
  .originals .swiper-slide {
    /* width: 320px; */
  }
}

@media (width >= 48rem) {
  .originals .swiper-slide {
    /* width: 360px; */
  }
}

.swiper-card {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  pointer-events: auto;
}

.swiper-card a{
  position: static; /* default */
}

/* .swiper-card:hover,
.swiper-card:focus-within {} */

.swiper-card a::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

/* card-media */

.card-media {
  position: relative;
}

.swiper-card .card-media img {
  opacity: 1;
  box-shadow: 0;
  transition: 
    opacity var(--transition), 
    box-shadow var(--transition);
}

.swiper-card:hover .card-media img {
  opacity: 0.4;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.swiper-card {
  position: relative;
}

.swiper-card:hover::after,
.swiper-card:focus-within::after {
  opacity: 1;
}

.card-info {
  /* background-color: var(--color-gray-100); */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--spacing-xs) var(--spacing-m) var(--spacing-xs);
}

h3.card-title {
  font-size: var(--font-size-24);
  line-height: var(--line-height-3);
  padding-bottom: var(--spacing-s);
  margin-bottom: 0;
}

h3.card-title a {
  font-size: var(--font-size-24);
  line-height: var(--line-height-3);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-neutral-dark);
  letter-spacing: var(--letter-spacing-small);
  /* border: 2px dotted greenyellow; */
}

.swiper-card:hover h3.card-title a {
  font-weight: var(--font-weight-medium);
  color: var(--text-color-brand-medium);
}

.card-metadata {
  /* display: flex;
  gap: var(--spacing-xxs); */
  margin-bottom: var(--spacing-m);
}

.card-metadata > p {
  display: inline-block;
  word-spacing: normal;
}

.swiper-card .card-artist,
.swiper-card .card-metadata {
  color: var(--text-color-neutral-dark);
  transition: var(--transition);
}

.swiper-card:hover .card-artist,
.swiper-card:hover .card-metadata {
  color: var(--text-color-neutral-medium);
}

p.card-artist {
  font-size: var(--font-size-16);
  line-height: var(--line-height-2);
  margin-bottom: var(--spacing-xxs);  
}

.card-metadata p{
  font-size: var(--font-size-16);
  line-height: var(--line-height-2);
  margin-bottom: var(--spacing-xxs);
}

.card-medium {
  /* font-style: italic; */
}
.card-medium::after {
  content: ',';
}
.card-year {}






/* read more product card */

.card-info a.product-card-read-more {
  display: block;
  width: 100%;

  color: var(--text-color-brand-medium);
  font-weight: var(--font-weight-regular);
  text-align: center;
  text-transform: uppercase;
  border: var(--border-brand-light);
}


@media (hover: hover) {
  .card-info a.product-card-read-more {
    color: var(--text-color-neutral-dark);
    border: var(--border-neutral-light);
    background-color: none;
    transition: color var(--transition), border var(--transition);
  }
  .swiper-card:hover  .card-info a.product-card-read-more {
    color: var(--text-color-brand-medium);
    border: var(--border-brand-light);
    background-color: var(--surface-color-brand-light);
  }  
}









.swiper-navigation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  /* top: 50%; */
  bottom: 0;
  /* transform: translateY(-50%); */
  pointer-events: auto;
}

.swiper-button-prev {
  /* background-color: pink; */
  left: 0;
}

.swiper-button-next {
  /* background-color: pink; */
  right: 0;
}