/* =============================================
   COMPONENTS — Reusable UI Elements
   ============================================= */

/* === Editorial Button === */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: 1px solid;
  transition: var(--transition-base);
  cursor: pointer;
  text-align: center;
}

.btn--cream {
  color: var(--color-cream);
  border-color: var(--color-cream);
  background: transparent;
}

.btn--cream:hover {
  background: var(--color-cream);
  color: var(--color-wine-deep);
}

.btn--wine {
  color: var(--color-wine);
  border-color: var(--color-wine);
  background: transparent;
}

.btn--wine:hover {
  background: var(--color-wine);
  color: var(--color-cream);
}

.btn--filled {
  background: var(--color-wine);
  color: var(--color-cream);
  border-color: var(--color-wine);
}

.btn--filled:hover {
  background: var(--color-wine-deep);
  border-color: var(--color-wine-deep);
}

/* === Image Frame — Editable placeholder === */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--color-cream-dark);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.frame:hover img {
  transform: scale(1.03);
}

/* === Polaroid Frame === */
.frame--polaroid {
  background: var(--color-white);
  padding: 8px 8px 30px 8px;
  box-shadow: 2px 4px 20px rgba(0,0,0,0.12);
}

.frame--polaroid img {
  width: 100%;
  height: calc(100% - 22px);
  object-fit: cover;
}

/* === Thin Divider === */
.divider {
  width: 60px;
  height: 1px;
  background: var(--color-beige-aged);
}

.divider--wine {
  background: var(--color-wine);
}

.divider--cream {
  background: rgba(245, 240, 235, 0.3);
}

/* === Section Container === */
.section {
  padding: var(--section-padding) 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

/* === Background variants === */
.bg-cream { background-color: var(--color-cream); }
.bg-wine { background-color: var(--color-wine); }
.bg-wine-deep { background-color: var(--color-wine-deep); }
.bg-wine-dark { background-color: var(--color-wine-dark); }
.bg-black { background-color: var(--color-black); }

/* === Scroll Reveal Animation === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }