/* =============================================================================
   design-concepts-slider.css
   Styles for the Design Concepts Slider section on Gal Interiors home page.
   Matches existing site palette: burgundy (#7B2D3A), Cormorant Garamond,
   Montserrat. Drop this file in your public/static root so the <link> tag
   in design-concepts-slider-renderer.js resolves to /design-concepts-slider.css
   ============================================================================= */

/* ── Custom properties (mirrors site tokens) ─────────────────────────────── */
.dcs-section {
  --dcs-burgundy:       #7B2D3A;
  --dcs-burgundy-dark:  #5a1f29;
  --dcs-burgundy-light: #a04050;
  --dcs-gold:           #c9a96e;
  --dcs-off-white:      #faf8f5;
  --dcs-text:           #2c2c2c;
  --dcs-text-light:     #6b6b6b;
  --dcs-border:         rgba(123,45,58,.15);
  --dcs-shadow:         0 8px 40px rgba(0,0,0,.12);
  --dcs-radius:         4px;
  --dcs-transition:     .55s cubic-bezier(.4,0,.2,1);
  --dcs-slide-height:   calc(100vh - 80px); /* full viewport minus nav */
}

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.dcs-section {
  padding:          clamp(32px, 8vw, 150px);
  position:         relative;
  width:            100%;
  background-color: var(--dcs-off-white);
  overflow:         hidden;
  font-family:      'Montserrat', sans-serif;
}


/* ── Section title — inherits site's .section-title styles, no overrides needed ── */

/* ── Track wrapper ───────────────────────────────────────────────────────── */
.dcs-track-wrap {
  position:   relative;
  width:      100%;
  height:     420px;
  min-height: 320px;
  max-height: 480px;
}

/* ── Slide track ─────────────────────────────────────────────────────────── */
.dcs-track {
  width:    100%;
  height:   100%;
  position: relative;
}

/* ── Individual slide ────────────────────────────────────────────────────── */
.dcs-slide {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: stretch;
  opacity:    0;
  visibility: hidden;
  transition: opacity var(--dcs-transition), visibility var(--dcs-transition);
  will-change: opacity;
}

.dcs-slide--active {
  opacity:    1;
  visibility: visible;
}

/* ── Image side — 55% × 0.55 = ~30% (45% smaller) ───────────────────────── */
.dcs-slide__image-wrap {
  flex:     0 0 30%;
  position: relative;
  overflow: hidden;
}

[dir="rtl"] .dcs-slide__image-wrap {
  order: 2;
}

.dcs-slide__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
  transition: transform 8s ease;
}

.dcs-slide--active .dcs-slide__image {
  transform: scale(1.04);
}

/* Slide counter badge */
.dcs-slide__counter {
  position:      absolute;
  bottom:        20px;
  left:          20px;
  font-size:     .7rem;
  letter-spacing: .12em;
  color:         rgba(255,255,255,.8);
  background:    rgba(0,0,0,.35);
  padding:       4px 10px;
  border-radius: 2px;
  font-family:   'Montserrat', sans-serif;
}

[dir="rtl"] .dcs-slide__counter {
  left:  auto;
  right: 20px;
}

/* ── Content side ────────────────────────────────────────────────────────── */
.dcs-slide__content {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         clamp(32px, 5vw, 72px) clamp(28px, 4.5vw, 64px);
  background:      #fff;
  position:        relative;
}

[dir="rtl"] .dcs-slide__content {
  order: 1;
  text-align: right;
}

/* Decorative top-border accent */
.dcs-slide__content::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       clamp(28px, 4.5vw, 64px);
  right:      clamp(28px, 4.5vw, 64px);
  height:     2px;
  background: linear-gradient(90deg, var(--dcs-burgundy) 0%, transparent 100%);
  opacity:    .25;
}

[dir="rtl"] .dcs-slide__content::before {
  background: linear-gradient(270deg, var(--dcs-burgundy) 0%, transparent 100%);
}

/* Brand label row */
.dcs-slide__label {
  display:        flex;
  align-items:    center;
  gap:            12px;
  font-size:      .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--dcs-burgundy);
  margin:         0 0 20px;
  font-weight:    600;
}

.dcs-slide__label-line {
  display:    inline-block;
  width:      36px;
  height:     1px;
  background: var(--dcs-burgundy);
  flex-shrink: 0;
}

[dir="rtl"] .dcs-slide__label {
  flex-direction: row-reverse;
}

/* Title */
.dcs-slide__title {
  font-family: var(--font-primary);
  font-size:      clamp(1.1rem, 2.8vw, 2.2rem);
  font-weight:    500;
   color: var(--color-burgundy);
  line-height:    1.25;
  margin:         0 0 .75em;
  letter-spacing: .01em;
}

/* Description — supports both .dcs-slide__desc and .dcs-slide__description */
.dcs-slide__desc,
.dcs-slide__description {
  font-size:   clamp(.8rem, 1.3vw, .95rem);
  line-height: 1.75;
  color:       var(--dcs-text-light);
  margin:      0 0 2em;
  max-width:   520px;
  flex-grow:   1;
}

/* CTA button */
.dcs-slide__cta {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  align-self:     flex-start;
  padding:        12px 28px;
  background:     var(--dcs-burgundy);
  color:          #fff;
  text-decoration: none;
  font-size:      .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight:    600;
  border-radius:  var(--dcs-radius);
  transition:     background .25s, transform .2s, box-shadow .25s;
  font-family:    'Montserrat', sans-serif;
}

.dcs-slide__cta:hover,
.dcs-slide__cta:focus-visible {
  background:  var(--dcs-burgundy-dark);
  transform:   translateY(-1px);
  box-shadow:  0 6px 20px rgba(123,45,58,.30);
  outline:     none;
}

.dcs-slide__cta svg {
  transition: transform .2s;
  flex-shrink: 0;
}

.dcs-slide__cta:hover svg,
.dcs-slide__cta:focus-visible svg {
  transform: translateX(3px);
}

[dir="rtl"] .dcs-slide__cta svg {
  transform: scaleX(-1);
}

[dir="rtl"] .dcs-slide__cta:hover svg,
[dir="rtl"] .dcs-slide__cta:focus-visible svg {
  transform: scaleX(-1) translateX(3px);
}

[dir="rtl"] .dcs-slide__cta {
  align-self: flex-end;
}

/* ── Arrow buttons ───────────────────────────────────────────────────────── */
.dcs-arrow {
  position:      absolute;
  top:           50%;
  transform:     translateY(-50%);
  z-index:       10;
  width:         46px;
  height:        46px;
  border-radius: 50%;
  border:        1.5px solid var(--dcs-border);
  background:    rgba(255,255,255,.92);
  color:         var(--dcs-burgundy);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .2s, border-color .2s, box-shadow .2s, transform .2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dcs-arrow:hover,
.dcs-arrow:focus-visible {
  background:   var(--dcs-burgundy);
  border-color: var(--dcs-burgundy);
  color:        #fff;
  box-shadow:   0 4px 16px rgba(123,45,58,.25);
  outline:      none;
}

.dcs-arrow--prev {
  left: 16px;
}

.dcs-arrow--next {
  right: 16px;
}

/* For RTL layouts, swap arrow positions AND flip icons */
[dir="rtl"] .dcs-arrow--prev {
  left:  auto;
  right: 16px;
}

[dir="rtl"] .dcs-arrow--next {
  right: auto;
  left:  16px;
}

[dir="rtl"] .dcs-arrow svg {
  transform: scaleX(-1);
}

/* ── Dot indicators ──────────────────────────────────────────────────────── */
.dcs-dots {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             10px;
  padding:         24px 0 36px;
}

.dcs-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--dcs-border);
  border:        1.5px solid var(--dcs-burgundy-light);
  cursor:        pointer;
  padding:       0;
  transition:    background .25s, transform .25s, border-color .25s;
}

.dcs-dot:hover,
.dcs-dot:focus-visible {
  background:  var(--dcs-burgundy-light);
  outline:     none;
}

.dcs-dot--active {
  background:  var(--dcs-burgundy);
  border-color: var(--dcs-burgundy);
  transform:   scale(1.35);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet: stack image above content */
@media (max-width: 900px) {
  .dcs-section {
    padding: clamp(24px, 5vw, 64px);
  }

  .dcs-track-wrap {
    height:     auto;
    min-height: unset;
    max-height: unset;
  }

  .dcs-slide {
    position:       relative;
    flex-direction: column;
    inset:          unset;
  }

  /* Only active slide takes space */
  .dcs-slide:not(.dcs-slide--active) {
    display: none;
  }

  .dcs-slide__image-wrap {
    flex:       none;
    width:      100%;
    height:     52vw;
    min-height: 220px;
    max-height: 400px;
  }

  [dir="rtl"] .dcs-slide__image-wrap { order: unset; }
  [dir="rtl"] .dcs-slide__content    { order: unset; text-align: right; }

  .dcs-slide__content {
    padding: 28px 24px 36px;
  }

  .dcs-slide__desc,
  .dcs-slide__description {
    max-width: 100%;
  }

  /* Arrows: sit centered over the image */
  .dcs-arrow {
    top:       calc(52vw / 2);
    transform: translateY(-50%);
  }
}

/* Mobile */
@media (max-width: 540px) {
  .dcs-section {
    padding: 16px 0 24px;   /* full-bleed image, side padding on content only */
  }

  .dcs-slide__image-wrap {
    height:     62vw;
    min-height: 180px;
  }

  .dcs-slide__content {
    padding: 20px 18px 28px;
  }

  .dcs-slide__title {
    font-size: clamp(1rem, 5vw, 1.4rem);
    margin-bottom: .5em;
  }

  .dcs-slide__desc,
  .dcs-slide__description {
    font-size:   .85rem;
    line-height: 1.65;
    margin-bottom: 1.25em;
  }

  .dcs-slide__cta {
    padding:      10px 20px;
    font-size:    .68rem;
    align-self:   stretch;          /* full-width tap target */
    justify-content: center;
  }

  /* Arrows: float over image, smaller & higher contrast on small screens */
  .dcs-arrow {
    width:     40px;
    height:    40px;
    top:       calc(62vw / 2);
    background: rgba(255,255,255,.96);
  }

  .dcs-arrow--prev { left:  10px; }
  .dcs-arrow--next { right: 10px; }

  [dir="rtl"] .dcs-arrow--prev { left: auto;  right: 10px; }
  [dir="rtl"] .dcs-arrow--next { right: auto; left:  10px; }
}

/* Very small phones */
@media (max-width: 375px) {
  .dcs-slide__image-wrap {
    height: 70vw;
  }

  .dcs-arrow {
    top: calc(70vw / 2);
  }
}


/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dcs-slide,
  .dcs-slide__image,
  .dcs-arrow,
  .dcs-dot,
  .dcs-slide__cta,
  .dcs-slide__cta svg {
    transition: none !important;
    animation:  none !important;
  }
}