/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Preview Brand

File:
public/brand/bundle/preview.css

Version:
2.0

Responsibility:
Preview Brand Surface / Typography / Spatial Language

Depends on:
public/bundle-template/bundle-hero-preview.css

================================================
*/


/* =================================================
   1. Preview Color System
================================================= */

.sv-bundle-hero-preview {

  --sv-preview-bg:
    #f7f4ee;

  --sv-preview-surface:
    #fbf9f5;

  --sv-preview-surface-soft:
    #eee8de;

  --sv-preview-metal-light:
    #f8f6f1;

  --sv-preview-metal:
    #d8d1c7;

  --sv-preview-metal-dark:
    #b8afa3;

  --sv-preview-text:
    #24221f;

  --sv-preview-text-soft:
    #756e65;

  --sv-preview-earth:
    #6b5848;

  --sv-preview-line:
    rgba(117, 106, 94, 0.18);

}


/* =================================================
   2. Drawer Surface
================================================= */

.sv-bundle-hero-preview__panel {

  background:
    linear-gradient(
      145deg,
      #fbf9f5 0%,
      #f7f4ee 48%,
      #f1ece4 100%
    );

  color:
    var(--sv-preview-text);

  box-shadow:
    -18px 0 42px
      rgba(57, 47, 38, 0.10),

    inset 1px 0 0
      rgba(255, 255, 255, 0.72);
}


/* =================================================
   3. Subtle Spatial Highlight
================================================= */

.sv-bundle-hero-preview__panel::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.46),
      transparent 24%,
      transparent 74%,
      rgba(130, 111, 91, 0.045)
    );

  opacity: 0.9;
}


/* =================================================
   4. Header
================================================= */

.sv-bundle-hero-preview__header {

  position: relative;

  padding-bottom: 22px;

  border-bottom:
    1px solid
    var(--sv-preview-line);
}


/* =================================================
   5. Eyebrow
================================================= */

.sv-bundle-hero-preview__eyebrow {

  font-family:
    var(--sv-font-ui,
    var(--sv-font-brand));

  font-size: 9px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color:
    var(--sv-preview-earth);
}


/* =================================================
   6. Preview Title
================================================= */

.sv-bundle-hero-preview__title {

  margin-top: 10px;

  font-family:
    var(--sv-font-bundle,
    var(--sv-font-brand));

  font-size: clamp(30px, 4vw, 42px);

  font-weight: 600;

  line-height: 1.02;

  letter-spacing: -0.03em;

  color:
    var(--sv-preview-text);
}


/* =================================================
   7. Close Button
================================================= */

.sv-bundle-hero-preview__close {

  position: relative;

  border: 1px solid
    rgba(126, 115, 103, 0.28);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #e2dcd3
    );

  color:
    var(--sv-preview-text);

  font-family:
    Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  line-height: 1;

  box-shadow:
    0 4px 10px
      rgba(56, 45, 35, 0.08),

    inset 0 1px 0
      rgba(255, 255, 255, 0.86);

  transition:
    transform 240ms ease,
    box-shadow 240ms ease;
}


/* =================================================
   8. Close Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

  .sv-bundle-hero-preview__close:hover {

    transform:
      rotate(90deg);

    box-shadow:
      0 7px 15px
        rgba(56, 45, 35, 0.12),

      inset 0 1px 0
        rgba(255, 255, 255, 0.9);
  }

}


/* =================================================
   9. Content
================================================= */

.sv-bundle-hero-preview__content {

  scrollbar-color:
    rgba(107, 88, 72, 0.24)
    transparent;
}


/* =================================================
   10. Section
================================================= */

.sv-bundle-hero-preview__section {

  position: relative;
}


/* =================================================
   11. Section Heading
================================================= */

.sv-bundle-hero-preview__section-heading {

  position: relative;

  font-family:
    var(--sv-font-ui,
    var(--sv-font-brand));

  font-size: 9px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.17em;

  text-transform: uppercase;

  color:
    var(--sv-preview-earth);
}


/* =================================================
   12. Section Heading Line
================================================= */

.sv-bundle-hero-preview__section-heading::after {

  content: "";

  display: block;

  flex: 1 1 auto;

  height: 1px;

  margin-left: 14px;

  background:
    linear-gradient(
      90deg,
      var(--sv-preview-line),
      transparent
    );
}


/* =================================================
   13. Mobile
================================================= */

@media (max-width: 768px) {

  .sv-bundle-hero-preview__panel {

    box-shadow:
      0 -16px 38px
        rgba(57, 47, 38, 0.12),

      inset 0 1px 0
        rgba(255, 255, 255, 0.78);
  }


  .sv-bundle-hero-preview__header {

    padding-bottom: 18px;
  }


  .sv-bundle-hero-preview__title {

    font-size: 32px;
  }

}


/* =================================================
   14. Reduced Motion
================================================= */

@media (prefers-reduced-motion: reduce) {

  .sv-bundle-hero-preview__close {

    transition: none;
  }

}