/* ============================================
   Honeycomb Patterns & Hexagonal Design Elements
   ============================================ */

/* --- Honeycomb Background Pattern --- */
.honeycomb-bg {
  position: relative;
}

.honeycomb-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23D4A03C' stroke-width='0.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23D4A03C' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.honeycomb-bg > * {
  position: relative;
  z-index: 1;
}

/* --- Hexagonal Frame --- */
.hex-frame {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* --- Section Divider (decorative hexagons) --- */
.section-divider {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: var(--space-lg) 0;
}

.section-divider__hex {
  width: 10px;
  height: 10px;
  background: var(--color-honey-gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0.3;
}

.section-divider__hex:nth-child(2) { width: 14px; height: 14px; opacity: 0.5; }
.section-divider__hex:nth-child(3) { width: 18px; height: 18px; opacity: 0.8; }
.section-divider__hex:nth-child(4) { width: 14px; height: 14px; opacity: 0.5; }
.section-divider__hex:nth-child(5) { width: 10px; height: 10px; opacity: 0.3; }

/* --- Hex line divider --- */
.hex-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-xl) auto;
  max-width: 200px;
}

.hex-divider__line {
  flex: 1;
  height: 1px;
  background: var(--color-light-gray);
}

.hex-divider__icon {
  width: 20px;
  height: 20px;
  background: var(--color-honey-gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  flex-shrink: 0;
}