/* ==========================================================================
   UNTERRO - CRAFTED AROUND YOU SHOWCASE COMPONENT (MOBILE-FIRST)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Section Container (.crafted-section)
   -------------------------------------------------------------------------- */
.crafted-section {
  position: relative;
  background-color: var(--color-bg-primary);
  padding: var(--space-xl) 0 var(--space-xxl);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* --------------------------------------------------------------------------
   2. Section Header
   -------------------------------------------------------------------------- */
.crafted-section__header {
  margin-bottom: 18px;
  padding: 0;
}

.crafted-section__title {
  font-family: var(--font-family-sans);
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.875rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  color: var(--color-text-primary);
  text-transform: uppercase;
  margin: 0;
  padding-left: var(--space-sm);
  border-left: 8px solid #AD622F; /* Left border copper accent bar (thickened to 8px, color #AD622F) */
}

/* --------------------------------------------------------------------------
   3. Symmetrical Image Card
   -------------------------------------------------------------------------- */
.crafted-section__card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 15; /* Exactly 25% taller than 4/3 mobile ratio */
  overflow: hidden;
  border-radius: 12px; /* Curved luxury corners */
  background-color: var(--color-bg-secondary);
  margin-top: var(--space-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.crafted-section__media-bg,
.crafted-section__video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--transition-smooth);
  transform: scale(1.01);
  will-change: transform;
  z-index: 1;
  pointer-events: none;
}

.crafted-section__video-bg {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.crafted-section__card:hover .crafted-section__media-bg,
.crafted-section__card:hover .crafted-section__video-bg {
  transform: scale(1.04); /* Premium subtle hover zoom */
}

.crafted-section__card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 15, 14, 0.15); /* Soft ambient dimming layer */
  transition: background-color var(--transition-smooth);
  z-index: 2;
  pointer-events: none;
}

.crafted-section__card:hover .crafted-section__card-overlay {
  background-color: rgba(16, 15, 14, 0.3); /* Slightly darker on hover */
}

/* --------------------------------------------------------------------------
   4. Rotating Center U-Coin Overlay
   -------------------------------------------------------------------------- */
.crafted-section__overlay-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centered precisely */
  z-index: 3;
  width: clamp(180px, 48vw, 210px); /* Further enlarged for mobile prominence */
  height: clamp(180px, 48vw, 210px);
  background-color: rgba(173, 98, 47, 0.72); /* Translucent copper/bronze fill matching #AD622F */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  border: 2px solid #ffffff; /* 2px solid white border */
}

/* Rotating Unified Container: Both Logo & Front Images rotate together */
.crafted-section__rotator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 95%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

/* White Logo (Layer 1 - Underneath) */
.crafted-section__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform-origin: center center;
  z-index: 1; /* Logo is underneath */
  background-color: transparent !important; /* Overrides default theme image backgrounds */
  background: transparent !important;
  border: none !important; /* Overrides default theme image borders */
  box-shadow: none !important; /* Overrides default theme shadows */
  padding: 0 !important; /* Overrides default theme padding offsets */
  pointer-events: none;
}

/* Circular Clipped Images Layer (Layer 2 - Brought to the front with 70% opacity) */
.crafted-section__slides {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 89.5%; /* Precisely matches the outer white circle stroke of U in circle_V3.webp */
  height: 89.5%;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix Safari border-radius overflow */
  z-index: 2; /* In FRONT of logo */
  pointer-events: none;
}

.crafted-section__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity, transform;
}

.crafted-section__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.crafted-section__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
  display: block;
  opacity: 0.6; /* Opacity set to 0.6 (60%) */
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   5. Responsive Tablet & Desktop Adjustments
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .crafted-section {
    padding: var(--space-huge) 0 var(--space-xxl);
  }

  .crafted-section__card {
    aspect-ratio: 16 / 9; /* Tablet landscape aspect ratio */
    margin-top: var(--space-lg);
  }

  .crafted-section__overlay-box {
    width: 240px; /* Tablet scale */
    height: 240px;
  }
}

@media (min-width: 1024px) {
  .crafted-section__header {
    margin-top: 48px;
    margin-bottom: 22px;
    padding: 0;
    width: fit-content;
    max-width: 60%;
  }

  .crafted-section__title {
    font-size: 3rem; /* Enlarged to 3rem matching design request */
    line-height: 1.25;
  }

  .crafted-section__card {
    aspect-ratio: 21 / 9; /* Wide cinematic aspect ratio on desktop */
  }

  .crafted-section__overlay-box {
    width: 360px; /* Desktop scale enlarged to match Canva */
    height: 360px;
  }
}

@media (min-width: 1440px) {
  .crafted-section__title {
    font-size: 3.25rem; /* Proportional scaling on large screens */
  }

  .crafted-section__overlay-box {
    width: 440px; /* Scaled up for 1440px widescreen */
    height: 440px;
  }
}

@media (min-width: 1920px) {
  .crafted-section__title {
    font-size: 3.5rem; /* Maximum scaling on ultra-wide screens */
  }

  .crafted-section__overlay-box {
    width: 520px; /* Scaled up for 1920px ultra-wide screens */
    height: 520px;
  }
}